【layui】table的自定义=添加、编辑

原创于 2025-02-06 11:17:39 发布 · 726 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #ecmascript

在这里插入图片描述

第一种、利用table的【edit: ‘text’】属性添加编辑

<div class="layui-form-item" style="margin-bottom: 5px;">
  <label class="layui-form-label">添加SKU</label>
  <div class="layui-input-block"> 
       <button type="button" class="layui-btn layui-btn-sm" data-type="addSku" style="width: 50px;">
           <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
       </button>
       <table class="layui-hide" id="skuTable" lay-filter="skuTable"></table>
   </div>
</div>
<div class="layui-form-item">
   <div class="layui-input-block">
       <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">
       <i class="layui-icon">&#xe654;</i>提交</button>
   </div>
</div>

// ======默认table======
let jsondata=[{sku: '', qty: ''}];
table.render({
    elem: '#skuTable',
    data: jsondata,
    cols: [[
        {field: 'sku', title: 'SKU', edit: 'text',templet:function(d){
            return '<input type="text" placeholder="请输入" value="'+d.sku+'" lay-verify="required" class="layui-input" style="height:28px;">'
        }},
        {field: 'qty', title: '数量', edit: 'number',templet:function(d){
            return '<input type="text" placeholder="请输入" value="'+d.qty+'" lay-verify="required" class="layui-input" style="height:28px;">'
        }},
        {fixed: 'right', title: '操作', width:60, align:'center', templet:function(d){
            return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>';
        }}
    ]],
    page: false,limit:10000
});
// ======监听 添加SKU 按钮======
var $ = layui.$, active = {
   addSku:function(){
        table.reload('skuTable', {
            data: table.cache['skuTable'].concat({ sku: '', qty: '' }) // 重新载入数据
        });
    }
};
$('.layui-input-block .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});
// ======table 删除 按钮======
table.on('tool(skuTable)', function(obj){
    if(obj.event === 'del'){ obj.del(); }
})
// ======监听提交 按钮======
form.on('submit(submit)', function(data){
     data.field.items = table.cache['skuTable'].map(function(row){
         return { sku: row.sku, qty: row.qty };
     });
     admin.req({
         url: layui.setter.baseUrl+'admin/ceshi/add',
         data: data.field,
         type: 'post',
         success: function(res){
             if(res.code==1){
                 layer.msg(res.msg , {icon: 1,shade:0.5,time: 1000} , function(){
                     layer.close(index); //执行关闭 
                     // 当前页码
                     var recodePage = $(".layui-laypage-skip .layui-input" ).val();
                     layui.table.reload('ceshi_list',{page:{curr: recodePage}}); //重载表格
                 });
             }else{
                 layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
             }
         }
     }); 
 });

在这里插入图片描述

第二种、在table中利用input的【οnblur=“skuBlur(this)”】属性添加编辑

<div class="layui-form" lay-filter="see_transit" style="padding: 0 10px 0 0;">
    <div class="layui-form-item">
        <script type="text/html" template>                        
            <input type="hidden" name="id" class="layui-input" value="{{ d.params.id || '' }}" >
        </script> 
        <button type="button" class="layui-btn" data-type="addSku">
            <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
        </button>
        <button type="button" class="layui-btn" style="padding: 0 30px;"
        lay-submit="" lay-filter="submit">提交</button>
    </div>
    <table class="layui-hide" id="skuTable" lay-filter="skuTable"></table>
</div>

// ======默认table======
let items= [
    { id: 1,qty: 10,sku: "H-B26-004" },
    { id: 2,qty: 20,sku: "dddd" }
],jsondata=[];
// 添加isEditable:false属性使得默认数据不可编辑
jsondata = items.map(function(row){
   return { sku: row.sku, qty: row.qty,id:row.id,isEditable:false };
});
table.render({
    elem: '#skuTable',
    data: jsondata,
    cols: [[
        {field: 'sku', title: 'SKU',templet:function(d){
            return d.isEditable ? '<input type="text" placeholder="请输入" value="'+d.sku+'" lay-verify="required" class="layui-input" onblur="skuBlur(this)" style="height:28px;">':d.sku;
        }},
        {field: 'qty', title: '数量',templet:function(d){
            return d.isEditable ? '<input type="text" placeholder="请输入" value="'+d.qty+'" lay-verify="required" class="layui-input" onblur="qtyBlur(this)" style="height:28px;">':d.qty;
        }},
        {fixed: 'right', title: '操作', width:60, align:'center', templet:function(d){
            return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>';
        }}
    ]],page: false,limit:10000
});
// ======监听输入框变化来修改table的data======
window.skuBlur = function(obj){ initBlur(obj,'sku'); }
window.qtyBlur = function(obj){ initBlur(obj,'qty'); }
function initBlur(obj,name){
    let data = table.cache['skuTable'].find(function (item) {
        return $(obj).parents('tr').attr('data-index') == item.LAY_TABLE_INDEX;
    });
    if (data) data[name] = $(obj).val();
}
// ======监听 添加SKU 按钮======
var $ = layui.$, active = {
    addSku:function(){
		// 添加isEditable:true属性，表示数据可修改编辑
        table.reload('skuTable', {
            data: table.cache['skuTable'].concat({ sku: '', qty: '', isEditable: true })
        });
    }
};
$('.layui-form .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});
// ======table 删除 按钮======
table.on('tool(skuTable)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
        if(data.isEditable){ // 通过[添加按钮]添加的数据可删除
            obj.del();
        } else{
        	// 默认数据通过接口删除
            layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
                admin.req({
                    url: layui.setter.baseUrl+'admin/ceshi/del',
                    data: {id:data.id},
                    type:'get',
                    success: function(res){
                        if(res.code==1){
                            obj.del();
                            layer.close(index);       
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                });  
            });
        }
    }
})
// ======监听提交 按钮======
form.on('submit(submit)', function(data){
	// 筛选出isEditable为true的条目
    var newSkus = table.cache['skuTable'].filter(function(ns){
        return ns.isEditable
    })
    // 提取需要提交的字段
    data.field.item = newSkus.map(function(row){
        return { sku: row.sku, qty: row.qty };
    });
    admin.req({
        url: layui.setter.baseUrl+'admin/ceshi/lists_add',
        data: data.field,
        type: 'post',
        success: function(res){
            if(res.code==1){
                layer.msg(res.msg , {icon: 1,shade:0.5,time: 1000} , function(){
                    layer.close(index); //执行关闭 
                });
            }else{
                layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
            }
        }
    }); 
});