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 call方法使用说明
Jan 11 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
浅谈js中的闭包
Mar 16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
百度地图api如何使用
Aug 03 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
js 内存释放问题
2010/04/25 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
vue中的scope使用详解
2017/10/29 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python中删除文件的程序代码
2011/03/13 Python
python模拟Django框架实例
2016/05/17 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Python 实现数组相减示例
2019/12/27 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
Python排序函数的使用方法详解
2020/12/11 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
总务岗位职责
2013/11/19 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2015年端午节活动总结
2015/02/11 职场文书
搞笑老公保证书
2015/02/26 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python