最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 14:43:22
文档

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

Layui表格行工具事件与数据回填方法:使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type=text/html id=barDemo2> <a class=layui-btn layui-btn-xs l
推荐度:
导读Layui表格行工具事件与数据回填方法:使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type=text/html id=barDemo2> <a class=layui-btn layui-btn-xs l


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

文档

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

Layui表格行工具事件与数据回填方法:使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type=text/html id=barDemo2> <a class=layui-btn layui-btn-xs l
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top