使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下:
<强>布置行工具栏样式与数据表格初始化,代码如下:
& lt;脚本type=" text/html " id=癰arDemo2”比;
& lt;一个类=" layui-btn layui-btn-xs layui-btn-normal”lay-event=氨嘁搿弊４潜嗉? lt;/a>
& lt;一个类=" layui-btn layui-btn-xs layui-btn-normal”lay-event=癲elete”祝辞删除& lt;/a>
& lt;/script>
var listEnquiryQuote;//询价记录表格
layui。使用([‘表’,‘形式’,‘层’),函数(){//询价记录表格初始化
listEnquiryQuote=table.render ({
elem:“# EnquiryQuote”
方法:“文章”
url:“/购买/AwaitQueryPrice/SelectEnquiry '//数据接口
id:“idEnquiryQuote”
、页面:真//开启分页
关口:[[//表头
{类型:“广播”}
,{字段:“EnquiryID”,标题:“询价ID”,隐藏:真正的}
,{字段:“SupplierName”,标题:“供应商名称”,宽度:180}
,{字段:“公司名称”,标题:“公司英文名的,宽度:180}
,{字段:“SupplierID”,标题:“供应商ID”,隐藏:真正的}
,{字段:ProductName,标题:“产品名称”,宽度:90}
,{字段:“模型”,标题:“型号”,宽度:120}
,{字段:“商标”,标题:“原厂品牌”,宽度:90}
,{字段:“PrimaryNumber”,标题:“原厂料号的,宽度:90}
,{字段:“QualityName”,标题:“品质”,宽度:60}
,{字段:“QualityID”,标题:“品质ID”,隐藏:真正的}
,{字段:单位的名字,标题:“单位”,宽度:60}
,{字段:“UnitID”,标题:“单位ID”,隐藏:真正的}
,{字段:“FPackaging”,标题:“封装”,宽度:90}
,{字段:“BPackaging”,标题:“包装”,宽度:60}
,{字段:“DateCodeS”,标题:“生产日期”,宽度:105}
,{字段:“描述”,标题:“描述的,宽度:150}
,{字段:“DeliveryTime”,标题:“货期的,宽度:60}
,{字段:“MinOrder”,标题:“最小订购量”,宽度:105}
,{字段:“QuantityDemanded”,标题:“需求量”,宽度:80}
,{字段:“TaxPoint”,标题:“税点的,宽度:60}
,{字段:“引用”,标题:报的价的,宽度:70}
,{字段:“EnquiryDateS”,标题:“询价日期”,宽度:105}
,{字段:“AdoptQuantity”,标题:“采纳量”,宽度:80}
{固定:“正确”的标题:“操”作,工具栏:# barDemo2,宽度:120}
]]
限制:10
响应:{
statusName:‘成功’//规定数据状态的字段名称,默认:代码
statusCode:真正的//规定成功的状态码,默认:0
countName:“totalRows”//规定数据总数的字段名称,默认:计数
}
要求:{
pageName:“curPage”//页码的参数名称,默认:页面
limitName:“页大小的
}
}）;
});
效果图如下:
<>强监听行点击事件:
layui。使用([‘表’,‘形式’,‘层’),函数(){//监听询价记录行工具事件
table.on(工具(EnquiryQuote),函数(obj) {
var=https://www.yisu.com/zixun/obj.data数据;//修改
如果(obj。事件===氨嘁搿?{
如果(数据)。AdoptQuantity==null | |数据。AdoptQuantity==0) {//弹出修改询价记录模态框
layer.open ({
类型:1、
标题:“修改询价记录的,
面积:[950 px,“600 px”),
内容:$ (' # UpdateEnquiry ')//这里的内容是一个DOM,注意:最好该元素要存放在身体最外层,否则可能被其它的相对元素所影响
}）;
其他}{
层。味精(“已有采购单采纳该询的价,不得编辑!”,{图标:0});
}//重置
$ (" # reset4”)。点击(函数(){//数据回填
的形式。瓦尔(“UpdateEnquiry”数据);
的形式。瓦尔(“UpdateEnquiry”{
“DateCode”: data.DateCodeS
}）
如果(数据)。SupplierID !=null) {//给表单赋值
的形式。瓦尔(“UpdateEnquiry”{
“状态”:“真正的”
}）
其他}{//给表单赋值
的形式。瓦尔(“UpdateEnquiry”{
“状态”:“
}）
}
}）;
$ (" # reset4 ") .click ();
}
});
应注意的表单必须有layui-form类与lay-filter属性,本文献lay-filter属性值为UpdateEnquiry,可自定义
把回填事件写入重置按钮点击事件这样设置的好处是在点击重置是在点击重置时可以重新回填数据,可以给用户选择的空间,效果图如下:
