layui 表格中添加input表单效果且实现数据监听
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); });