layui在表格中新增一条表数据

layui新增一条数据，且可以读取接口的表数据，且可修改表中数据做计算

BiKABi废话不多说，先上代码分析一下

/*给表格添加序号*/
 <script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

/*
*表新增数据
*/
var ctx = "/";
const prefix_lm = ctx + "basicSetup/field";/*路径*/
var selsectId = $("#id").val();//获取ID组件值用来判断是 新增还是修改

if(selsectId && selsectId != "")
{
    /*ID存在，当前是修改界面*/
    editPageInit();
}else{
    /*当前是新增界面*/
    addPageInit();
}

/*规则明细中值类型选择的监听器*/
function valueTypeSelect(form){
    form.on('select(valueType)', function(obj) {
        var elem = $(obj.elem);
        var trElem = elem.parents('tr');
        var tableData = table.cache['demo'];
        /*更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值*/ 
        tableData[trElem.data('index')][elem.attr('name')] = obj.value;
    });
}

/*规则明细表单加载*/
function detailTableRender(table, datas, form){
    layui.use([ 'table' ,'laydate'], function() {
        var laydate = layui.laydate;
    table.render({
        elem : '#demo',
        height : '500',
        // url : '/common/data/processInfoList',
        // method: "POST",
        data : datas, /*数据接口，最下面有自定义的一个datas的数据，也就是新增在页面上的*/ 
        page : false,
        limit : Number.MAX_VALUE,
        where : {
            orderNum : $('#orderNum').val()
        },
        cols : [ [
            {
				title: '序号',
				templet: '#xuhao',/*这个序号的添加需要在body处添加一个script*/
				hide : true
			},
            {
                field : 'id',
                edit : 'text',
                fixed : 'left',
                hide : true
            }, {/*下拉选择*/
                field : 'processName',
                title : '工序名称<font color="red">*</font>',
                align : 'center',
                width : 200,
                templet :function (d) {
                    var workNos = [];
                    $.ajax({
                        url : '/路径',
                        method : 'post',
                        async: false,
                        contentType : "application/json", /*指定这个协议很重要，很重要，很重要*/ 
                        dataType : 'JSON',
                        success : function(res) {
                            if (res.code = '0') {
                                workNos = res.data;

                            } else
                                alert(res.msg);
                        },
                        error : function(data) {
                        }
                    });
                    var ret = '<select name="processName" lay-filter="testSelect"  lay-search="" data-value="' + d.processName + '" >\n';
                    ret = ret + '<option value="">请选择</option>\n';
                    if(workNos != null && workNos.length >0)
                    {

                        for(var i=0; i<workNos.length; i++)
                        {
                            var selected = "";
                            if(d.processName == workNos[i].value)
                            {
                                selected = " selected "
                            }
                            ret = ret + '<option value="'+workNos[i].value+'" '+ selected +'>'+workNos[i].name+'</option>\n';
                        }

                    }
                    ret = ret + "</select>";
                    return ret;
                },
                unresize : true
            }, {
                field : 'simplexTime',
                title : '单工时(h)<font color="red">*</font>',
                align : 'center',
                edit : 'text'
            }, {
                field : 'totalTime',
                title : '总工时(h)<font color="red">*</font>',
                align : 'center'
            }, {
                field: 'startTime',
                title: '开始时间',
                align: 'center',
                templet: function (d) {
                    return '<input type="text" name="startTime"  lay-verify="verify" value="' + (d.startTime || '') + '" placeholder="请选择时间" readonly="readonly" class="layui-input layui-input-date" style="text-align: center;margin-top: -10px;"/>';
                }
            },
            {
                field: 'endTime',
                title: '结束时间',
                align: 'center',
                templet: function (d) {
                    return '<input type="text" name="endTime"  lay-verify="verify" value="' + (d.endTime || '') + '" placeholder="请选择时间" readonly="readonly" class="layui-input layui-input-date" style="text-align: center;margin-top: -10px;"/>';
                }
            },{
                field : 'operate',
                title : '操作',
                align : 'center',
                toolbar : '#barDemo'
            },
        ] ],
        done: function (msg, curr, count) {
            /*日期控件*/
            $(".layui-input-date").each(function (i) {
                layui.laydate.render({
                    elem: this,
                    type: 'datetime',
                    format: "yyyy-MM-dd HH:mm:ss",
                    done: function (value, date) {
                        var filedName = this.elem[0].name;
                        var no = parseInt(i/2);
                        if (msg && msg.data[no]) {
                            if(filedName == "endTime")
                            {
                                $.extend(msg.data[no], {'endTime': value})
                            }else if(filedName == "startTime"){
                                $.extend(msg.data[no], {'startTime': value})
                            }
                        }
                    }
                });
            });
            console.log(msg);
        }
    })
    })
	/*下拉选择*/
    form.on('select(testSelect)', function(obj) {
        var elem = $(obj.elem);
        var trElem = elem.parents('tr');
        var tableData = table.cache['demo'];

        /*更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值*/ 
        tableData[trElem.data('index')][elem.attr('name')] = obj.value;
    });
    table.on('radio(demo)', function(obj) {
        alert("ddd");

    });
}
/*
*删除，上移，下移
*/
function detailTool(table){
    table.on('tool(demo)', function(obj) {
        // 注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data, // 获得当前行数据
            layEvent = obj.event; // 获得 lay-event 对应的值
        if (layEvent === 'detail') {
            layer.msg('查看操作');
        } else if (layEvent === 'del') {
            layer.confirm('真的删除行么', function(index) {
                var details = table.cache["demo"];
                var newDetails = [];
                var trElem = obj.tr;
                var allTime = 0;
                for(var i=0; i<details.length; i++)
                {
                    if(trElem.data('index') != details[i].LAY_TABLE_INDEX)
                    {
                        newDetails.push(details[i]);
                        allTime += details[i].totalTime;
                    }
                }
                table.reload('demo', {
                    data : newDetails
                });
                $("#allTime").html(allTime);
                layer.close(index);

                // 向服务端发送删除指令
            });
        } else if (layEvent === 'edit') {
            layer.msg('编辑操作');
        }else if(layEvent === 'up')
        {
            var tbData = table.cache["demo"]; //是一个Array
            var tr = $($(this)).parent().parent().parent();
            if ($(tr).prev().html() == null) {
                layer.msg("已经是最顶部了");
                return;
            }else{
                // 未上移前，记录本行和下一行的数据
                var tem = tbData[tr.index()];
                var tem2 = tbData[tr.prev().index()];

                // 将本身插入到目标tr之前
                $(tr).insertBefore($(tr).prev());
                // 上移之后，数据交换
                tbData[tr.index()] = tem;
                tbData[tr.next().index()] = tem2;
            }
        }else if(layEvent === 'down')
        {
            var tbData = table.cache["demo"];
            var tr = $($(this)).parent().parent().parent();
            if ($(tr).next().html() == null) {
                layer.msg("已经是最底部了");
                return;
            } else{
                // 记录本行和下一行的数据
                var tem = tbData[tr.index()];
                var tem2 = tbData[tr.next().index()];
                // 将本身插入到目标tr的后面
                $(tr).insertAfter($(tr).next());
                // 交换数据
                tbData[tr.index()] = tem;
                tbData[tr.prev().index()] = tem2;
            }
        }
    });
}
// 提交
function saveBind(form, table)
{
    form.on('submit(save)', function(data) {
        var details = table.cache["demo"];
        var orderNum = $("#orderNum").val();
        var performSingle = $("#performSingle").val();
        var assignedNum = $("#assignedNum").val();
        var jobSubmissionPerson = $("#jobSubmissionPerson").text();
        var postData = {};
        var ynContinue = true;
        // postData = $("#form-node").serialize();
        postData.orderNum = orderNum;
        postData.performSingle =  performSingle;
        postData.assignedNum = assignedNum;
        postData.jobSubmissionPerson =  jobSubmissionPerson;
        var ruleDetails = [];
        for (j = 0, len = details.length; j < len; j++) {
            var _data = {};
            $.each(details[j], function(k, v) {
                /*由于layui2.0在表单中新增了LAY_TABLE_INDEX属性，先移除再重组参数*/
                if (k != "LAY_TABLE_INDEX") {
                    if((k == "processName" && (v == null || v == "null" || v == "")) )
                    {
                        layer.alert('请选择工序', {
                            icon : 2,
                            title : "警告"
                        });
                        ynContinue = false;
                        return false;
                    }else if((k == "startTime" && (v == null || v == "null" || v == "")) )
                    {
                        layer.alert('请选择开始时间', {
                            icon : 2,
                            title : "警告"
                        });
                        ynContinue = false;
                        return false;
                    }else if((k == "endTime" && (v == null || v == "null" || v == "")) )
                    {
                        layer.alert('请选择结束时间', {
                            icon : 2,
                            title : "警告"
                        });
                        ynContinue = false;
                        return false;
                    }
                    _data[k] = v;
                }
            });
            ruleDetails.push(_data);
        }
		/*ynContinue判断上面的下拉和时间、$.validate.form()判断input不能为空*/
        if(ynContinue && $.validate.form()){
            postData.details = ruleDetails;
            var ss = JSON.stringify(postData);
            $.ajax({
                url : '路径',
                method : 'post',
                contentType : "application/json",
                data : JSON.stringify(postData),
                dataType : 'JSON',
                success : function(res) {
                    if (res.code = '0') {
                        form.render();
                        layer.alert('制程排配成功', { icon: 1, closeBtn: 0 }, function (index) {
                            window.parent.location.reload();
                        });

                    } else
                        alert(res.msg);
                },
                error : function(data) {
                }
            });
        }
    });
}
/**/
function addPageInit()
{
    layui.use(['form', 'table', 'element'], function() {
        var table = layui.table;
        var form = layui.form;
        form.render("select");
        var oldData = [];
        let datas = $.extend(true, [], oldData);
        //各选择框建立监听
        valueTypeSelect(form);
        //规则明细表单加载
        detailTableRender(table, datas, form);
        // 监听工具条
        detailTool(table);
        saveBind(form, table);
        table.on('edit(demo)', function(obj){
            var trElem = obj.tr;
            var tableData = table.cache['demo'];//这个是总工时
            var value = obj.value //得到修改后的值，这个是单工时的值
            tableData[trElem.data('index')]['totalTime'] = tableData[trElem.data('index')].quantity * value;
            /*tableData[trElem.data('index')].quantity 这个是标中的某个值，如数量，quantity 就是数量的参数
			*如果是计算表格外部的值和单工时计算，那就更简单，获取val就可以，然后(外部值*value)
			*/
            table.reload('demo', {
                data : tableData
            });
            /*循环记录表中每条总工时的值，相加，传到页面记录所有的时间*/
            var allTime = 0;
            for(var i=0; i<tableData.length; i++)
            {
                allTime += tableData[i].totalTime;
            }
            $("#allTime").html(allTime);
        });
    });
}


//新增明细资料
function pmTask_addDetail() {
    var selfMadeNum1 = $("#selfMadeNum1").val();
    layui.use([ 'form', 'table', 'element' ], function() {
        var table = layui.table;
        var form = layui.form;
        var tableData = table.cache["demo"];
        var datas = {
            "processName" : "",
            "line_separation" : "",
            "simplexTime" : "",
            "totalTime" : "",
            "startTime" : "",
            "endTime" : ""
        };
        tableData.push(datas);
        table.reload('demo', {
            data : tableData
        });
        var allTime = 0;
        for(var i=0; i<tableData.length; i++)
        {
            allTime += tableData[i].totalTime;
        }
        $("#allTime").html(allTime);
    })

}
/*读取已有的值，展示到表格中*/
$(function () {
    const orderNum=$('#orderNum').val();
    layui.use([ 'form', 'table', 'element' ], function() {
        var table = layui.table;
        var form = layui.form;
        var tableData = [];
        detailTableRender(table,tableData,form);
        $.ajax({
            url : '路径',
            method : 'post',
            data : {orderNum:orderNum},
            dataType : 'JSON',
            success : function(data) {
                console.log(data);

                var tableData = [];
                for ( var i in data.data){
                    console.log(data.data[i]);
                    var datas = {
                        "processName" : data.data[i].processName,
                        "simplexTime" : data.data[i].simplexTime,
                        "totalTime" : data.data[i].totalTime,
                        "startTime" : data.data[i].startTime,
                        "endTime" : data.data[i].endTime
                    };
                    tableData.push(datas);
                }
                layui.use([ 'form', 'table', 'element' ], function() {
                    var table = layui.table;
                    var form = layui.form;
                    table.reload('demo', {
                        data : tableData
                    });
                });

            },

        });
    });

})

这个新增功能很有意思，希望对你有帮助，代码基本都写了是什么功能，如有不懂，可以留言
如有错误或好的方法请斧正
以上