layui单元格编辑自定义类型

1.添加监听

        {field: 'useNumber', align: 'center', title: '使用数量',event:"cellClick"},

2。监听事件

    table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'del') {
            layer.open({
                type: 1,
                title: ['确认提示', 'font-size:18px;background:#0E7CC9;color:#fff'],
                closeBtn: 0,
                content: $('#deldemo'),
                btn: ['取消', '确定'],
                btnAlign: 'c',
                btn2: function () {

                    obj.del();
                    var tableData = table.cache["demo"];
                    for (var j = 0; j < tableData.length; j++) {
                        var bool = $.isArray(tableData[j]);
                        if (bool) {
                            tableData.splice(j, 1);
                        }
                    }
                    chirldDateArr = tableData;
                    table.reload('demo', {data: chirldDateArr})
                }
            });
        }
      else  if (layEvent === 'cellClick') {
            cellClick(this,obj);
        }
    });

3.想法,点击时候弹出一个窗体进行input框覆盖赋值

  function cellClick(that,obj){

        var field = $(that).data("field");
        //判断是否需要添加编辑框
        if(field=="edit")return true;


        //当前行数据
        var data = obj.data;
        //当前单元格的值
        var value = data[field];

        //当前点击td的宽高
        var height = $(that)[0].offsetHeight,width = $(that)[0].offsetWidth;
        //当前点击td的坐标
        var top = $(that).offset().top,left = $(that).offset().left;

        //输入框 这里可以自定义表单内容
        var input = '<input type="number" min="0" class="layui-input" id="'+field+'_input" data-field="'+field+'" style="width:'+width+'px;height:'+height+'px">';

        //弹出层
        layer.open({
            type: 1
            ,title:false
            ,page:true
            ,limit:1
            ,closeBtn:0
            ,area: [width+"px", height+"px"]
            ,shade: [0.01, '#fff']
            ,shadeClose:true
            ,content: input //这里content是一个普通的String
            ,offset:[top,left]
            ,success:function(){
                //使弹出层相对浮动
                $(".layui-layer-page").css("position","absolute")
                //设置输入框的值
                $("#"+field+"_input").val(value);
                $("#"+field+"_input").blur(function(){
                    //同步更新缓存对应的值
                    data[field] = $(this).val();
                    obj.update(data);
                })
            }
        });
    };
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值