DDR爱好者之家 Design By 杰米
使用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,可自定义
把回填事件写入重置按钮点击事件这样设置的好处是在点击重置是在点击重置时可以重新回填数据,可以给用户选择的空间,效果图如下:
以上这篇Layui表格行工具事件与数据回填方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]