layui表格顶部工具栏按钮打开实现输入框回显操作

 表格:

 var tableIns = table.render({
            elem: "#Lay-pxxq-TrainingNeeds-table",
            url: layui.setter.apiHost + '/hqDemandConfirm/pageList',
            where:{confirmStatic:"0"},
            toolbar: "#Lay-pxxq-TrainingNeeds-table-toolbar", //表格上方法的工具栏，不需要删除即可
            cols: [[{type: "checkbox"}
                , {field: "id", width: 60, title: "序号", align: "center"}
                , {field: "confirmName", width: 100, title: "确认单名称", align: "center"}
                , {field: "schoolDate", width: 100, title: "来院时间", align: "center"}
                , {field: "checkOutStartDate", width: 100, title: "退房时间", align: "center"}
                , {field: "confirmName1", width: 100, title: "项目信息员", align: "center"}
                , {field: "teachAssistant", width: 90, title: "教学助理", align: "center"}
                , {field: "confirmStatic", width: 100, title: "确认单状态", align: "center",templet: function (d) {
                        return "<div>" + confirmStatic[dicSelect.keyPrefix + d.confirmStatic] + "</div>";
                    }}
                , {field: "settlementStatus",width: 90, title: "结算状态", align: "center",templet: function (d) {
                        return "<div>" + settlementStatus[dicSelect.keyPrefix + d.settlementStatus] + "</div>";
                    }}
                , {title: "操作", align: "center", toolbar: "#Lay-pxxq-TrainingNeeds-table-control"}]],
            page: true,
            limit: 10,
            limits: [10, 15, 20, 25, 30]
        });

顶部工具栏:

 //顶部工具条事件绑定
        table.on('toolbar(Lay-pxxq-preTrialManagement-table)', function (obj) {
            //获取选中的内容方式
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'submit':
                    var data = checkStatus.data;
                    //修改确认单状态
                    admin.post({
                        url: '/hqDemandConfirm/update',
                        data: {id:data[0].id,confirmStatic:"2"},
                        done: function () {
                            layer.msg("提交成功");
                        }
                    });
                    location.reload();
                    break;
                case 'overrule':   //驳回
                    var data = checkStatus.data;    //获取表格数据
                    addAndEdit1(data);
                    break;
            }
            ;
        });

 具体方法:

/*=========================================================驳回实现开始*/
        //添加和编辑方法
        function addAndEdit1(data) {
            //debugger
            layer.open({
                type: 1,
                title: "驳回",
                area: ['600px', '500px']
                , id: "LAY-pxxq-pxxq-overrule-form-text"
                , btn: ["保存", "关闭"]
                , success: function (layero, index) {
                    view(this.id).render('hqfw/pxxq/overrule',data[0]).done(function () {
                        //回显
                     //   console.log(data[0])
                        renderLayer1(data[0]);
                        //修改确认单状态
                        admin.post({
                            url: '/hqDemandConfirm/update',
                            data: {id:data[0].id,confirmStatic:"0"},
                            done: function () {
                                layer.msg("保存成功");
                                //更新table数据
                                active['search'].call(this);
                                //关闭编辑窗口
                              //  layer.close(bindData.index);
                            }
                        });
                        bindLayerEvent1();
                    });
                },
                yes: function (index, layero) {
                    //TODO 保证只能提交一次
                    myUtils.submitForm(layero, "LAY-pxxq-pxxq-overrule-form-test", {index: index})
                }
            });
        }

        //layer中渲染表单，时间控件等等，
        function renderLayer1(data) {
          //  debugger
            //渲染表单
            form.render(null, "LAY-pxxq-pxxq-overrule-form-test");

            //将数据回显在表单中
            form.val("LAY-pxxq-pxxq-overrule-form-test", data);
        }

        //layer中的事件绑定，统一在这里
        function bindLayerEvent1() {
            form.on('submit(LAY-pxxq-pxxq-overrule-form-test)', function (data) {

                //获取表单信息
                var info = data.field;
              //  debugger
                //+++++++++++++++++++提示区++++++++++++++++++++++++++++
                //表单的数据再加工后提交到后台，比如：checkbox选中才有值，所有没有选中需要默认为0
                //info.state = info.state || '0';
                //再比如 密码需要加密后传输
                //密码加密传输
                //var trimPw = $.trim(info.password);
                //info.password = trimPw === ''?'':CryptoJS.SHA256(trimPw).toString();
                //+++++++++++++++++++++++++++++++++++++++++++++++++++++++

                //判断是添加/还是更新
                var url = '/hqDemandTurnDown/add';
                admin.post({
                    url: url,
                    data: info,
                    done: function () {
                        layer.msg("保存成功");
                        //更新table数据
                        active['search'].call(this);
                        //关闭编辑窗口
                       // layer.close(bindData.index);
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        }
        /*=================================================驳回实现结束*/

回显页面:

<title>提交审批</title>
<div class="layui-fluid ">
    <div class="layui-form" lay-filter="LAY-pxxq-pxxq-overrule-form-test" >

        <script type="text/html" template>
            <input type="hidden"  name="id" value="{{d.params.id || ''}}">

            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="confirmName" id="confirmName"  value="{{d.params.id || ''}}"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">附件</label>
                <div class="layui-input-block">
                    <input type="text" name="appendix"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>用户</label>
                <div class="layui-input-block">
                    <input type="text" name="teachAssistant" id="teachAssistant"  value=""  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block">
                    <textarea style="width: 100%; height: 80px;" autocomplete="off"  class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
        </script>

    </div>
</div>

 

顶部工具条删除按钮实现多个删除:

 //顶部工具条事件绑定
        table.on('toolbar(Lay-pxxq-pxxq-accommodation-table)', function (obj) {
            //获取选中的内容方式
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'roomReservation':
                    addAndEdit(true,obj);
                    layer.msg("客房预订成功!");
                    break;
                case 'del':
                    //layer.msg("删除成功!");
                    var data = checkStatus.data;  //获取表格数据
                   // console.log(data)
                    var ids =[]
                    for(var i=0; i<data.length; i++) {
                        ids.push(data[i].id);
                    }
                    layer.confirm('确定删除选中的教室？',{title:"提示"}, function (index) {
                        layer.close(index);
                        admin.post({
                            url:'/hqDormUseInfo/delete',
                            data:{ids:ids},
                            done:function(){
                                layer.msg("删除成功");
                                //更新table数据
                                tableIns.reload();
                            }
                        });
                    });
                    break;
            }
            ;
        });