layui 表格中添加input表單效果且實現數據監聽

在layui 表格中列操作中插入input 表單輸入框，實現數據內容監聽效果；

實現效果1：

<table class="layui-table layuiadmin-page-table" lay-skin="line" id="itemslist" lay-filter="itemslist"></table>
<!-- 采購數量輸入 -->
<script type="text/html" id="purchaseTotal">
<input type="number" min="0" class="layui-input" lay-vertype="tips" name="purchase_total" value="" lay-event="purchaseTotal" lay-filter="purchaseTotal">
</script>
<script>
layui.use(['form','layer', 'table', 'laytpl','laydate'], function() {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form,
table = layui.table,
laytpl = layui.laytpl,
laydate = layui.laydate;
//請求條件
var where={start_time:start,end_time:end,status:status};
itemslist(where);
//渲染商品內容
function itemslist(where){
table.render({
elem: '#itemslist',
url:'/api/fresh/orderItems',
id:'itemslist',
toolbar: '#toolBar',
defaultToolbar: [],
title: '生成采購單商品',
where:where,
page:true,
cols: [[
{type:'checkbox'},
{title: '商品圖片', minWidth: 80,width: 90,height:60, align: "left",templet:function (d) {
return '<img lay-event="maxImg" width="60" height="60" src="'+d.item_cover+'" />';
}},
{field: 'item_title', title: '商品名稱', minWidth: 220, align: 'left'},
{field: 'cat_name', title: '商品分類', minWidth:90, align:"left"},
{field: 'sku_name', title: '商品規格', minWidth: 120, align: 'left'},
{field: 'unit_name', title: '商品單位', minWidth: 80, align: 'left'},
{field: 'total', title: '訂購數', minWidth:100, align:"left"},
{field: 'stock', title: '庫存數', minWidth:100, align:"left"},
{field: 'purchase_total',title: '采購數', minWidth:100, align:"left",templet: '#purchaseTotal'},
{field: 'suppier_name',title: '供應商', minWidth:100, align:"left",templet: '#suppierChoose'},
{title: '操作', minWidth:90, minHeight:60, templet:'#listBar',fixed:"right",align:"center"}
]],
done:function (res, curr, count) {
$(".layui-table-main  tr").each(function (index ,val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
layui.each($('select'), function (index, item) {
var elem = $(item);
elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();
}
});
}
/*表格列表操作*/
table.on('tool(itemslist)', function(obj){
var data = obj.data, layEvent = obj.event;
if (layEvent === 'purchaseTotal') { //大圖
layui.$(this).on('input porpertychange',function(e){
var val= layui.$(this).val();
var name= layui.$(this).attr('name');
data[name]=val
obj.update(data);//更新行對象數據
console.log(obj);
})
}else if(layEvent === 'maxImg'){
layer.photos({
photos: {
"data": [{
"src": data.item_cover,
}]
},
shade: 0.7,
anim: 5
});
}
});
});
</script>

另外一種實現方法

function itemslist(where){
table.render({
elem: '#itemslist',
url:'/api/fresh/orderItems',
id:'itemslist',
toolbar: '#toolBar',
defaultToolbar: [],
title: '生成采購單商品',
where:where,
page:true,
cols: [[
{type:'checkbox'},
{title: '商品圖片', minWidth: 80,width: 90,height:60, align: "left",templet:function (d) {
return '<img lay-event="maxImg" width="60" height="60" src="'+d.item_cover+'" />';
}},
{field: 'item_title', title: '商品名稱', minWidth: 220, align: 'left'},
{field: 'cat_name', title: '商品分類', minWidth:90, align:"left"},
{field: 'sku_name', title: '商品規格', minWidth: 120, align: 'left'},
{field: 'unit_name', title: '商品單位', minWidth: 80, align: 'left'},
{field: 'total', title: '訂購數', minWidth:100, align:"left"},
{field: 'stock', title: '庫存數', minWidth:100, align:"left"},
{field: 'purchase_total',title: '采購數', minWidth:100, align:"left", edit: 'text',style: 'outline: 1px solid #e6e6e6;outline-offset: -18px;padding-left:10px;'},
{field: 'suppier_name',title: '供應商', minWidth:100, align:"left",templet: '#suppierChoose'},
{title: '操作', minWidth:90, minHeight:60, templet:'#listBar',fixed:"right",align:"center"}
]],
done:function (res, curr, count) {
$(".layui-table-main  tr").each(function (index ,val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
layui.each($('select'), function (index, item) {
var elem = $(item);
elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
});
form.render();
}
});
}
//編輯采購數量
table.on('edit(itemslist)', function () {
var data = table.cache['itemslist'];
for(var i=0;i<data.length;i++){
data[i].purchase_total = (!data[i].purchase_total || (parseFloat(data[i].purchase_total).toFixed(0) <= 0)) ? 0 : parseFloat(data[i].purchase_total).toFixed(0);
}
console.log(data);
});