开发工具与关键技术: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”对应的值
效果图如下: