layui 可编辑表格 中编辑列改为日期控件,自定义表单

3 篇文章 0 订阅

添加layui-table单元格编辑时间控件或者自定义表单
样式如下:
在这里插入图片描述

实例代码如下
1.定义表格

<table id="viewTable" lay-filter="viewTable"></table>

2.定义表头

  {field: 'solveTime', title: '预计解决时间',edit: 'text',style:'background-color: rgba(60,141,188,0.1)', event: 'date' },// 事件, 对应下面 },
  {"field":"key","title":"自定义表单","event":"cellClick"}//这个是表单添加

3.定义点击事件

 table.on('tool(viewTable)', function (obj) {
    var data = obj.data,layEvent = obj.event;
    let newdata={}
     switch (layEvent) {
       case "date":
            var field = $(this).data('field');
            laydate.render({
                elem: this.firstChild // 固定写
                , show: true //直接显示
                , closeStop: this
                , type: 'date'
                , format: "yyyy-MM-dd"
                , done: function (value, date) {
                    newdata[field] = value;
                    obj.update(newdata);
                    //下面是写好的编辑ajax,可以进行编辑
                    
                }
            });
            break;
        case 'cellClick':
	   	  CellClick(this,obj);
	   	  break;
        }
    });
 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" 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、付费专栏及课程。

余额充值