Layui表格行工具事件与数据回填

开发工具与关键技术:MVC、C#、Layui、jQuery
作者:张俊辉
撰写时间:2019年05月07日

使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下:
步骤一:布置行工具栏样式与数据表格初始化,代码如下:

<script type="text/html" id="barDemo2">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="compile">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
	</script>

var listEnquiryQuote;//询价记录表格
layui.use(['table','form','layer'], function () {
//询价记录表格初始化
            listEnquiryQuote = table.render({
                elem: '#EnquiryQuote'
              , method: 'post'
              , url: '/Purchase/AwaitQueryPrice/SelectEnquiry' //数据接口
              , id: 'idEnquiryQuote'
              , page: true //开启分页
              , cols: [[ //表头
                  { type: 'radio' }
                , { field: 'EnquiryID', title: '询价ID', hide: true }
                , { field: 'SupplierName', title: '供应商名称', width: 180 }
                , { field: 'CompanyName', title: '公司英文名', width: 180 }
                , { field: 'SupplierID', title: '供应商ID', hide: true }
                , { field: 'ProductName', title: '产品名称', width: 90 }
                , { field: 'Model', title: '型号', width: 120 }
                , { field: 'Trademark', title: '原厂品牌', width: 90 }
                , { field: 'PrimaryNumber', title: '原厂料号', width: 90 }
                , { field: 'QualityName', title: '品质', width: 60 }
                , { field: 'QualityID', title: '品质ID', hide: true }
                , { field: 'UnitName', title: '单位', width: 60 }
                , { field: 'UnitID', title: '单位ID', hide: true }
                , { field: 'FPackaging', title: '封装', width: 90 }
                , { field: 'BPackaging', title: '包装', width: 60 }
                , { field: 'DateCodeS', title: '生产日期', width: 105 }
                , { field: 'Describe', title: '描述', width: 150 }
                , { field: 'DeliveryTime', title: '货期', width: 60 }
                , { field: 'MinOrder', title: '最小订购量', width: 105 }
                , { field: 'QuantityDemanded', title: '需求量', width: 80 }
                , { field: 'TaxPoint', title: '税点', width: 60 }
                , { field: 'Quote', title: '报价', width: 70 }
                , { field: 'EnquiryDateS', title: '询价日期', width: 105 }
                , { field: 'AdoptQuantity', title: '采纳量', width: 80 }
                , { fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 120 }
              ]]
                , limit: 10
                , response: {
                    statusName: 'success' //规定数据状态的字段名称,默认:code
                  , statusCode: true //规定成功的状态码,默认:0
                  , countName: 'totalRows' //规定数据总数的字段名称,默认:count
                }
                , request: {
                    pageName: 'curPage' //页码的参数名称,默认:page
                  , limitName: 'pageSize'
                }
            });
});

效果图如下:
在这里插入图片描述
步骤二:监听行点击事件:

layui.use(['table','form','layer'], function () {
//监听询价记录行工具事件
            table.on('tool(EnquiryQuote)', function (obj) {
                var data = obj.data;
                //修改
                if (obj.event === 'compile') {
                    if (data.AdoptQuantity == null || data.AdoptQuantity == 0) {
                        //弹出修改询价记录模态框
                        layer.open({
                            type: 1,
                            title: '修改询价记录',
                            area: ['950px', '600px'],
                            content: $('#UpdateEnquiry'), //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
                        });
                    } else {
                        layer.msg('已有采购单采纳该询价,不得编辑!', { icon: 0 });
                    }
                    //重置
                    $("#reset4").click(function () {
                        //数据回填
                        form.val("UpdateEnquiry", data);
                        form.val("UpdateEnquiry", {
                            "DateCode": data.DateCodeS
                        })
                        if (data.SupplierID != null) {
                            //给表单赋值
                            form.val("UpdateEnquiry", {
                                "State": "true"
                            })
                        } else {
                            //给表单赋值
                            form.val("UpdateEnquiry", {
                                "State": ""
                            })
                        }
                    });
                    $("#reset4").click();
        } 
});

应注意的表单必须有layui-form类与lay-filter属性,本文献lay-filter属性值为UpdateEnquiry,可自定义
把回填事件写入重置按钮点击事件这样设置的好处是在点击重置是在点击重置时可以重新回填数据,可以给用户选择的空间,效果图如下:

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值