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>

实现2代码：

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