首页 > 技术文章 > layui 表格中添加input表单效果且实现数据监听

webSnow 2021-12-27 14:40 原文

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);
});

 

推荐阅读