码迷,mamicode.com
首页 > 其他好文 > 详细

00028-layui 表单有子列表,如何动态新增和保存(表格table行编辑)?

时间:2020-09-18 02:31:49      阅读:41      评论:0      收藏:0      [点我收藏+]

标签:header   render   父页面   count   lte   function   mat   conf   data-   

html:

<div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" style="background-color: #e6e6e6">资料清单</div>
                <div class="layui-card-body" style="height: 200px;">
                    <table class="layui-hide" id="serviceMaterialListTable" lay-filter="serviceMaterialListTable"></table>

                    <script type="text/html" id="serviceMaterialListTable-toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" data-type="addMaterial">添加</button>
                        </div>
                    </script>

                    <script type="text/html" id="serviceMaterialListTable-bar">
                        <%--<a class="layui-btn layui-btn-xs" lay-event="editMaterial">编辑</a>--%>
                        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delMaterial">删除</a>
                    </script>
                    <script type="text/html" id="serviceMaterialTypeTpl">
                        <select name="type" lay-filter="service_material_type" autocomplete="off">
                            <option value="">请选择</option>
                            {{#
                            var typeArr = layui.dict.options("service_materialType");
                            layui.each(typeArr, function(index, item){
                            }}
                            <option value="{{item[0]}}" {{d.type==item[0]?‘selected‘:‘‘}}>{{item[1]}}</option>
                            {{# }) }}
                        </select>
                    </script>
                    <script type="text/html" id="certTypeTpl">
                        <select name="type" lay-filter="cert_type"  autocomplete="off">
                            <option value="">请选择</option>
                            {{#
                            var certTypeArr = layui.dict.options("company_paper_certType");
                            layui.each(certTypeArr, function(index, item){
                            }}
                            <option value="{{item[0]}}" {{d.certType==item[0]?‘selected‘:‘‘}}>{{item[1]}}</option>
                            {{# }) }}
                        </select>
                    </script>
                </div>
            </div>
        </div>

方法:

var active = {
            getSubData:function () {
                var materialList = active.getMaterialList();
                var flowList = active.getFlowList();
                var minDay = 0;
                var maxDay = 0;
                $.each(flowList,function (index,item) {
                    minDay += item.minDay?parseFloat(item.minDay):0;
                    maxDay += item.maxDay?parseFloat(item.maxDay):0;
                });
                return {
                    materialList:materialList,
                    flowList:flowList,
                    minDay:minDay,
                    maxDay:maxDay
                }
            },
            getMaterialList:function () {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                $.each(dataTemp,function (index,item) {
                    item = $.extend(item,{createTime:null,modifyTime:null});
                })
                return dataTemp;
            },
            getFlowList:function () {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                $.each(dataTemp,function (index,item) {
                    item = $.extend(item,{createTime:null,modifyTime:null});
                });
                return dataTemp;
            },
            addFlow:function () {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                var len = dataTemp?(dataTemp.length+1):1;
                dataTemp.push({sortOrder:len,minDay:1,maxDay:1});
                serviceFlowTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp,
                }, config.page ? {
                    // 一般新增都是加到最后,所以始终打开最后一页
                    page: {
                        curr: Math.ceil(dataTemp.length / config.page.limit)
                    }
                } : {}));
            },
            editFlow:function (obj) {

            },
            delFlow:function (data) {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                // 得到tr的data-index
                var trElem = data.tr.first();
                var index = trElem.data(‘index‘);
                // 计算出在data中的index
                var dataIndex = index;
                // 删除对应下标的数据
                dataTemp.splice(dataIndex, 1);

                // 重新接收reload返回的对象,这个很重要
                serviceFlowTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp
                }, {}));
            },
            addMaterial:function () {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                var len = dataTemp?(dataTemp.length+1):1;
                dataTemp.push({sortOrder:len});
                materialTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp,
                }, config.page ? {
                    // 一般新增都是加到最后,所以始终打开最后一页
                    page: {
                        curr: Math.ceil(dataTemp.length / config.page.limit)
                    }
                } : {}));
            },
            editMaterial:function (obj) {

            },
            delMaterial:function (data) {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                // 得到tr的data-index
                var trElem = data.tr.first();
                var index = trElem.data(‘index‘);
                // 计算出在data中的index
                var dataIndex = index;
                // 删除对应下标的数据
                dataTemp.splice(dataIndex, 1);

                // 重新接收reload返回的对象,这个很重要
                materialTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp
                }, {}));
            },
            setDataList:function () {
                window.parent.formData = $.extend(window.parent.formData,{serviceMaterialList:serviceMaterialList})
                window.parent.formData = $.extend(window.parent.formData,{serviceFlowList:serviceFlowList})
            },
        }

js:

var serviceMaterialList = [];

        if(id){
            var rtnList2 = admin.syncReq(ctx+"/base/serviceMaterial/queryByAll",{serviceId:id});
            serviceMaterialList = rtnList2.data;
        }
        var materialTable = table.render({
            elem:‘#serviceMaterialListTable‘
            ,data:serviceMaterialList
            ,cellMinWidth: 80
            ,toolbar: ‘#serviceMaterialListTable-toolbar‘
            ,defaultToolbar: []
            ,cols: [[
                {field:‘licenceName‘, title: ‘证照名称‘, align: ‘center‘,minWidth:100,edit:‘text‘ }
                ,{field:‘type‘, title: ‘资料类型‘, align: ‘center‘,minWidth:100,templet:‘#serviceMaterialTypeTpl‘}
                ,{field:‘certType‘, title: ‘证件类型‘, align: ‘center‘,minWidth:100,templet:‘#certTypeTpl‘}
                ,{field:‘sortOrder‘, title: ‘排序‘, align: ‘center‘,minWidth:100,edit:‘text‘}
                ,{title:‘操作‘, toolbar: ‘#serviceMaterialListTable-bar‘, width:120}
            ]]
            ,done: function(res, curr, count){
                serviceMaterialList = res.data;
            }
            ,height: ‘250‘
        });

        table.on(‘tool(serviceMaterialListTable)‘, function(obj){
            switch(obj.event){
                case ‘delMaterial‘:
                    active.delMaterial(obj);
                    break;
            }
        });

        form.on(‘select(service_material_type)‘, function(obj){
            var tr_index = $(obj.othis).parent().parent().parent().data("index");
            $.each(serviceMaterialList,function (index,item) {
                if(tr_index==index){
                    item = $.extend(item,{type:obj.value})
                }
            })

        });
        form.on(‘select(cert_type)‘, function(obj){
            var tr_index = $(obj.othis).parent().parent().parent().data("index");
            $.each(serviceMaterialList,function (index,item) {
                if(tr_index==index){
                    item = $.extend(item,{certType:obj.value})
                }
            })
        });

        $("body").on(‘click‘,‘.layui-btn-container .layui-btn‘, function(){
            var type = $(this).data(‘type‘);
            active[type] ? active[type].call(this) : ‘‘;
        });

        window.parent._active = active;

父页面获取表单的所有数据:

var subData = window._active.getSubData();
                            var materialList = subData.materialList;
                            var flowList = subData.flowList;
                            var minDay = subData.minDay;
                            var maxDay = subData.maxDay;
                            field = $.extend(field,{
                                serviceMaterialJson:JSON.stringify(materialList),
                                serviceFlowJson:JSON.stringify(flowList),
                                minDay:minDay,
                                maxDay:maxDay,
                            })

                            field.id = rec.id;
                            var rtn = admin.syncReq(ctx+"/base/service/modify",field);
                            if(rtn && rtn.code==0){
                                layer.msg(‘操作成功‘);
                                active.reload();
                                layer.close(index);
                            }else{
                                layer.msg(‘操作失败‘);
                            }

00028-layui 表单有子列表,如何动态新增和保存(表格table行编辑)?

标签:header   render   父页面   count   lte   function   mat   conf   data-   

原文地址:https://blog.51cto.com/14816966/2533407

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!