前言：写这个博文前几天，还一直在纠结中，但是做完了感觉自信又回来了，作为一名后端程序员，前端的简单的布局是在所难免的，所以有时候也是要折腾一下前端。

一  功能简述

这个功能主要是用于相关部门打请购申请的，添加多条明细用的

二 实现的效果图

三 技术难点

由于我用的是Eaysui的前端布局，并且封装了一个common.js调用easyui的效果来实现;

刚开始是用表格来显示的，但是由于数据比较多，在一行显示显得不够友好，所以考虑用块来解决，

这里问题来了，由于添加节点会在页面已经渲染完成了，用户才主动加进去的，

所以input框是没有任何的效果的，因此这里需要解决的是添加了要还原以前的效果，

解决方案1：$.parser.parse($(‘#tt‘).parent()); 这个主要是主动调用Easyui再次渲染页面，很不幸，这个只对用了Easyui中class的方法才会有效果

解决方案2：当用户添加时候再次调用自动加载函数来解决样式和url请求的问题

四 代码

//这里只贴一部分代码，通过id动态用户添加时候加一个index标志每次添加id都会动态变化，再次去调用初始化方法，注意初始化也需要加入index标志动态变化

function pur_info() {

//把id的值设置为动态值

var money = "#money" + index_run;

var goods_name = "#goods_name" + index_run;

var supplier_name = "#supplier_name" + index_run;

var buy_num = "#buy_num" + index_run;

var invoice_flag = "#invoice_flag" + index_run;

var comment = "#comment" + index_run;

var pay_status = "#pay_status" + index_run;

var id_goods_len = "#id_goods_len" + index_run;

var goods_num = "#goods_num" + index_run;

var goods_spe = "#goods_spe" + index_run;

var cust_name = "#cust_name" + index_run;

var using = "#using" + index_run;

var supplier_info = "#supplier_info" + index_run;

//物品名称

init_easyui_textbox(goods_name, {

required: true,

width: 100,

});

//供应商名

init_easyui_textbox(supplier_name, {

required: true,

width: 100

});

//总价

init_easyui_numberbox(money, {

required: true,

editable: false,

min: 0,

width: 100

});

//规格

init_easyui_textbox(goods_spe, {

width: 100

});

//客户名

init_easyui_textbox(cust_name, {

width: 100

});

//用途

init_easyui_textbox(using, {

width: 100

});

//供应商信息

init_easyui_textbox(supplier_info, {

width: 100

});

//购买单价

init_easyui_numberbox(buy_num, {

required: true,

min: 0,

width: 100

}).numberbox({

onChange: function (newValue, oldValue) {

var num = $(goods_num).numberbox(‘getValue‘);//获取到数量

var sum_m = parseFloat(num) * newValue;//总价

$(money).numberbox(‘setValue‘, sum_m);

}

});

//购买数量

init_easyui_numberbox(goods_num, {

required: true,

min: 0,

width: 100

});

//备注

init_easyui_textbox(comment, {

width: 200,

height: 80,

multiline: true,

multiple: true,

validType: ‘‘

});

//是否开票

init_easyui_combox(invoice_flag, {

required: true,

width: 100,

data: [

{label: "否", value: "0"},

{label: "是", value: "1"},

],

panelHeight: 60

});

//结算方式

init_easyui_combox(pay_status, {

required: true,

width: 100,

data: [

{label: "现款结算", value: "0"},

{label: "转账结算", value: "1"},

],

panelHeight: 60

});

//采购单位

init_easyui_combox(id_goods_len, {

required: true,

url: url_measdoc,

width: 100

});

index_run++;

}

原文：https://www.cnblogs.com/learningPHP-students2018/p/10885236.html