Layui表单回填与覆盖

开发工具与关键技术：MVC、C#、Layui
作者：张俊辉
撰写时间：2019年04月27日

本文献是获取表格数据回填到表单中,因此首先需要获取到表格中的数据,代码如下,此方法需要使用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>

layui.use(['table','form','layer'], function () {
var table = layui.table,form=layui.form,layer=layui.layer;
	listEnquiryQuote = table.render({
                elem: '#EnquiryQuote'
              , method: 'post'
              , url: '/Purchase/AwaitQueryPrice/SelectEnquiry' //数据接口
              , id: 'idEnquiryQuote'
              , page: true //开启分页
              , cols: [[ //表头
				//根据实际需求填写表头字段如下:
                , { field: 'EnquiryID', title: '询价ID', hide: true } 
				//开启行工具
                , { fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 120 }
              ]]
                , limit: 10
                , response: {  statusName: 'success', statusCode: true, countName: 'totalRows' }
                , request: {pageName: 'curPage', limitName: 'pageSize'}
            });
//监听询价记录行工具事件
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 });
    				 }     
				//数据回填
				form.val("UpdateEnquiry", data);
		 		//覆盖
				form.val("UpdateEnquiry",{"DateCode":data.DateCod)
				if (data.SupplierID != null) {
        		 		//给表单赋值
     				form.val("UpdateEnquiry", { State": "true"})
				} else {
        			 	//给表单赋值
        				 form.val("UpdateEnquiry", { "State": ""})
				}
		}
	});
	});

其中 EnquiryQuote是table原始容器的属性lay-filter="EnquiryQuote"对应的值， UpdateEnquiry为class=“layui-form” 所在元素对应的lay-filter=”UpdateEnquiry”对应的值
效果图如下：