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

ylens

于 2024-04-13 15:49:11 发布

阅读量668

点赞数 10

文章标签： layui javascript ecmascript

本文链接：https://blog.csdn.net/ylens/article/details/137716720

版权

本文介绍了如何在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;
            }
        });

至此完成了工作；