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


推荐阅读
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本文针对HDU 1042 N! 问题提供详细的解析和代码实现。题目要求计算给定整数N(0 ≤ N ≤ 10000)的阶乘N!。文章不仅提供了算法思路,还附上了C++语言的具体实现。 ... [详细]
  • 使用OpenGL实现三维空间中任意两点间圆柱体管道的绘制
    本文介绍了如何利用OpenGL在三维空间中的任意两个点之间绘制具有指定半径的圆柱体管道。鉴于OpenGL较为底层,许多功能需自行实现,文中提供了详细的代码示例及解析。 ... [详细]
  • 本文分享了作者在使用LaTeX过程中的几点心得,涵盖了从文档编辑、代码高亮、图形绘制到3D模型展示等多个方面的内容。适合希望深入了解LaTeX高级功能的用户。 ... [详细]
  • 本文介绍如何使用R语言中的相关包来解析和转换搜狗细胞词库(.scel格式),并将其导出为CSV文件,以便于后续的数据分析和文本挖掘任务。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • 在使用 PyInstaller 将 Python 应用程序打包成独立的可执行文件时,若项目中包含动态加载的库或插件,需要正确配置 --hidden-import 和 --add-binary 参数,以确保所有依赖项均能被正确识别和打包。 ... [详细]
  • 解决Linux中wget无法解析主机的问题
    本文介绍了如何通过修改/etc/resolv.conf文件来解决Linux系统中wget命令无法解析主机名的问题,通过添加Google的公共DNS服务器地址作为解决方案。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • SSE图像算法优化系列三:超高速导向滤波实现过程纪要(欢迎挑战)
    自从何凯明提出导向滤波后,因为其算法的简单性和有效性,该算法得到了广泛的应用,以至于新版的matlab都将其作为标准自带的函数之一了&#x ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
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社区 版权所有