layUI数据表格可编辑扩展日期框

  1. 字段定义模版: {field: 'layuiData', title: '日期框', templet: '#layuiDataGxmc'}
  2. 模版内容
<script type="text/html" id="layuiDataGxmc"> 
  <input type="text" class="layui-input takeDate" name="layuiData" style="margin-top: -4%" readonly="readonly">
</script>
  1. 在代码里执行步骤4:layui.use(['table', 'layer', 'element', 'jquery', 'form','laydate'], function(table, layer, element, $, form,laydate){});
  2. 渲染日期框

  /* 
多次对一个dom节点绑定laydate的原因,因为open之后都会对那个dom进行laydate.render,建议如果你open的的content还是要打开那个content的话可以给那个input加一个状态记录,初始化没有,open之后render之后就给他设置为true,每次open都检验是否已经render过,如果没有再做渲染。
  */
  /*
  //执行第一个laydate实例   //第一行的日期框不能同时渲染出来(不知道为啥)单独写了一个
  laydate.render({
    elem: '.takeDate' //指定元素
    ,done: function(value, date, endDate){
					$('.takeDate').change();
				    console.log(value); //得到日期生成的值,如:2017-08-18
				    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
				  
					var elem = $(this.elem[0]);
		            var trElem = elem.parents('tr');
		            var tableData = table.cache['grid'];
		            // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
		            tableData[trElem.data('index')][elem.attr('name')] = value;
				  }
  });*/
  
  //执行初一个外的其他laydate实例
  lay('.takeDate').each(function() {
			laydate.render({
				elem: this
				,done: function(value, date, endDate){
					$('.takeDate').change();
				    console.log(value); //得到日期生成的值,如:2017-08-18
				    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
				  
					var elem = $(this.elem);
		            var trElem = elem.parents('tr');
		            var tableData = table.cache['grid'];
		            // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
		            tableData[trElem.data('index')][elem.attr('name')] = value;
				  }
			});
	});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讓丄帝愛伱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值