Layui数据表格的Laydate的整列赋值

本文介绍了如何在layui数据表格中优化交货日期调整功能,通过CSS隐藏输入框,利用input模板和laydate插件实现选择后整列赋值,以及列名点击事件触发日期选择并更新对应数据。
摘要由CSDN通过智能技术生成

一、最近项目为一个layui数据表格的采购订单明细,在选择好产品后,交货日期根据具体需要进行调整。但也有所有产品是一个交货期的时候,如果逐个调整,用户体验感不好。
1、选择产品后需要逐个调整
选择产品后,需要逐个调整
2、期望整列调整
在这里插入图片描述
在下三角点击,弹出日期窗,选择后,整列赋值
在这里插入图片描述
3、之后,可以针对个别的产品进行调整
在这里插入图片描述
4、最后,获得值
在这里插入图片描述
二、具体做法:
1、CSS:

    .invisible {
        display: block;
        width: 0px;
        height: 0px;
    }

2、input模板

<!-- 日历面板 -->
<script type="text/html" id="delivery">
    <input class="layui-input delivery" placeholder="选择日期" value="{{= d.fieldname3 || '' }}">
</script>

3、数据表格字段

 {
  field: 'delivery',
  title: '交货日期<i class="layui-icon layui-icon-down" id="yt-date"  lay-event="yt-date"  style="margin-left: 5px; font-size: 10px;"></i><i id="date-input" class="layui-icon layui-icon-date invisible"></i>',
  templet: '#delivery',
  align: 'left',
  width: 120,
 },

4、表格渲染后的回调函数

 done: function (res, curr, count) {
	   var options = this;
       // 获取当前行数据
       table.getRowData = function (tableId, elem) {
           var index = $(elem).closest('tr').data('index');
           return table.cache[tableId][index] || {};
       };
       laydate.render({
       elem: '.delivery',
       done: function (value, date, endDate) {
         var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段,以作为数据修改的索引)
        // 更新数据中对应的字段
        data.delivery = value;
         }
     });
}

5、表格列名点击事件

//表格列名点击事件
table.on('colTool(paramTable)', function (obj) {
   switch (obj.event) {    // 获得自定义元素对应的 lay-event 属性值
        case 'yt-date':
              laydate.render({
                   elem: '#date-input',
                   eventElem: '#yt-date',//动作的点
                   done: function (value, date, endDate) {
                            var form = layui.form;
                            var table = layui.table;
                            var laytpl = layui.laytpl;
                            var $ = layui.jquery;
                            var tempCache = table.cache['paramTable'];
                            $.each(tempCache, function (idx, val) {
                                val.delivery = value;  //给表格字段赋值,提交时用
                            });
                            $(".delivery").empty();  //清空delivery的值
                            $('.delivery').val(value); //赋值
                        }
                    });
                    break;
            }
        });

至此完成了工作;

  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值