热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下:

步骤一:布置行工具栏样式与数据表格初始化,代码如下:


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表格行工具事件与数据回填方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 使用Numpy实现无外部库依赖的双线性插值图像缩放
    本文介绍如何仅使用Numpy库,通过双线性插值方法实现图像的高效缩放,避免了对OpenCV等图像处理库的依赖。文中详细解释了算法原理,并提供了完整的代码示例。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • QBlog开源博客系统:Page_Load生命周期与参数传递优化(第四部分)
    本教程将深入探讨QBlog开源博客系统的Page_Load生命周期,并介绍一种简洁的参数传递重构方法。通过视频演示和详细讲解,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
author-avatar
逢源堂_344
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有