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


Posted in Javascript onSeptember 13, 2019

使用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表格行工具事件与数据回填方法

步骤二:监听行点击事件:

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表格行工具事件与数据回填方法

以上这篇Layui表格行工具事件与数据回填方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
js给selected添加options的方法
May 06 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 #Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 #Javascript
You might like
php addslashes 函数详细分析说明
2009/06/23 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Vue实现购物车功能
2017/04/27 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python迭代器和生成器介绍
2015/03/06 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
小学数学教研活动总结
2014/07/01 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL