Layui表格行工具事件与数据回填方法
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇Layui表格行工具事件与数据回填方法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下
步骤一布置行工具栏样式与数据表格初始化,代码如下:
<script type="text/html" id="barDemo2"> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pile">编辑</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: 'suess' //规定数据状态的字段名称,默认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 === 'pile') { 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,可自定义
把回填事件写入重置按钮点击事件这样设置的好处是在点击重置是在点击重置时可以重新回填数据,可以给用户选择的空间,效果图如下
以上这篇Layui表格行工具事件与数据回填方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程