Layui-laytable简介

1 可编辑表格

css

.layui-table-body tbody tr td[data-edit] div {
    box-shadow: none !important;
}

.layui-table-edit {
    width: 100% !important;
    margin: -5px 0 0 -5px !important;
    padding: 0 !important;
}

js

function initTable() {
    layui.exTable.render({
        elem: '#dictCommonDetailTable',
        verifyCell: true,
        //textDiy: true,
        page: false,
        limit: 10000,
        onRow: function (obj) {
            trobj = obj;
        },
        cols: [[{},{}]],
        height: 'full-300'
    });
  
  //支持tab+enter 的切换
    $(document).on('keydown keyup', '.layui-input',
        function (event) {
            var td = $(this).parent('td'),
            index = td.index(),
            tr = td.parent('tr'),
            isShift = $(document).data('shift'),
            isKeydown = (event.type == "keydown");
            switch (event.key) {
                case "Shift":
                    $(document).data('shift', isKeydown);
                    break;
                case "Tab":
                    event.preventDefault();
                    isKeydown && td[isShift ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
                    break;
                case "Enter":
                    isKeydown && tr[isShift ? 'prev' : 'next']().children('td').eq(index).click();
                    break;
            }
    }
    );
  
  //方向键的切换
    $(document).on('keydown', '.layui-table-edit', function (e) {
        var td = $(this).parent('td'),
        tr = td.parent('tr'),
        trs = tr.parent().parent().find("tr")
        tr_index = tr.index(),
        td_index = td.index(),
        td_last_index = tr.find('[data-edit="text"]:last').index(),
        td_first_index = tr.find('[data-edit="text"]:first').index();

        switch (e.keyCode) {
            case 13:
            case 39://→
                td.nextAll('[data-edit="text"]:first').click();
                if (td_index == td_last_index) {
                    tr.next().find('td').eq(td_first_index).click();
                    if (tr_index == trs.length - 1) {
                        trs.eq(0).find('td').eq(td_first_index).click()
                    }
                }
                setTimeout(function () {
                    $('.last-table-edit').select()
                 }, 0)
                 break;
            case 37://←
                td.prevAll('[data-edit="text"]:first').click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
            case 38://↑
                tr.prev().find('td').eq(td_index).click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
            case 40://↓
                tr.next().find('td').eq(td_index).click();
                setTimeout(function () {
                    $('.last-table-edit').select()
                }, 0)
                break;
        }
    });
  
}

2 表格跨页数据选择

注：每次进入可选择表格页面时需清空这两个参数，否则之前选择的数据会一直被勾选。

ids.length = 0;

dataArr = 0;

//选中的数据
var ids = [];
//当前页面数据
var dataArr = [];
//一般为表格数据行主键
var id = 'id';
//初始化表格
function initTable() {
    let queryData = form.val("query-form-");
    layui.exTable.render({
        elem: '#selectComboItemTable',
        url: sight.compileUrl('${rc.contextPath}/*/*'), //数据接口
        defaultToolbar: [],
        where: queryData,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                        "code": res.errorCode, //解析接口状态
                        "msg": res.errorMsg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.rows //解析数据列表
                    };
        },
        page: true, //开启分页
        limit: 10,
        limits: [5, 10, 15, 20],
        cols: [[{},{},{}]],
        done: function (res, curr, count) {
            dataArr = res.data;
            set();
        },
        height: layui.$("#tableDiv").height() - 50
    });
}

//设置选中的类型
function set() {
    //当前页面数据长度
    var len = dataArr.length;
    //记录当前页选中的数据行数
    var chooseNum = 0;
    for (var i = 0; i < dataArr.length; i++) {
        for (var j = 0; j < ids.length; j++) {
            if (dataArr[i].item_code === ids[j].item_code) {
                dataArr[i]["LAY_CHECKED"] = 'true';
                let index = dataArr[i]['LAY_TABLE_INDEX'];
                $('.layui-table-body  tr[data-index="' + index + '"] input[type="checkbox"]').prop('checked', true);
                $('.layui-table-body  tr[data-index="' + index + '"] input[type="checkbox"]').next().addClass('layui-form-checked');
                chooseNum++;
            }
        }
    }
    //表示该页全选  --  全选按钮样式回显
    if (!len === 0 && chooseNum === len) {
        $(' .layui-table-header tr  input[lay-filter="layTableAllChoose"]').prop('checked', true);
        $(' .layui-table-header tr  input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
    }
}

//监听全选单选，
table.on('checkbox(selectComboItemTable)', function (obj) {
    let checked = obj.checked; //当前选择的状态，是否选中
    let allids = [];  //存放所有页面选中数据的id
    if (checked) {
        if (obj.type === 'one') {
            //选中，直接向ids push当前选中的数据
            ids.push(obj.data);
            ids.forEach(row => {
                allids.push(row[id])
            })
        } else {
            ids.forEach(row => {
                allids.push(row[id])
      })
            for (var i = 0; i < dataArr.length; i++) {
                if (allids.indexOf(dataArr[i][id]) < 0) {
                    allids.push(dataArr[i][id])
                    ids.push(dataArr[i])
                }
            }
        }
    } else {
        if (obj.type === 'one') {
            //取消选择，循环判断是否相等，相等就删除
            ids.map((item, index) => {
                if (obj.data.item_code === item.item_code) {
                    ids.splice(index, 1);
                }
            })
        } else {
            dataArr.forEach(row => {
                for (let i = 0; i < ids.length; i++) {
                    if (ids[i][id] === row[id]) {
                        ids.splice(i, 1);
                    }
                }
            })
        }
    }
});

3 合并单元格

实现的效果图：

 

 1）行合并

//调用实例
layui.exTable.render({
  elem:'',
  ...
  done: function (res, curr, count){
        let columnsName = ['cr_name', 'item_name_doctor', 'previewBtn'];
        //需要合并的列索引值
        let columnsIndex = [0, 1, 6];
        let mergeCondition = ['cr_code', 'item_code', 'preview_btn'];
        mergeRow('resultPreviewTable', res, columnsName, columnsIndex, mergeCondition);
  }
})

//合并单元格函数--行数据相同即合并
function mergeRow(tableDivId, res, columnsName, columnsIndex, mergeCondition) {
  //tableDivId table的id
  //res table的对象
    //columnsName 需要合并的列名称（field）
    //columnsIndex 需要合并的列索引值
  //mergeCondition 和columnsName雷同
    let data = res.data;
    //定位需要添加合并属性的行数
    let mergeIndex = 0;
    //这里涉及到简单的运算，mark是计算每次需要合并的格子数
    let mark = 1;

    //这里循环所有要合并的列
    for (let k = 0; k < columnsName.length; k++) {
        //所有行
        let trArr = $("[lay-id=" + tableDivId + "] .layui-table-body>.layui-table").find("tr"); //所有行，有多个表格存在时，必须指定lay-id
        $("[lay-id=" + tableDivId + "] .layui-table-body .layui-table td").css("border-right", "1px solid #dbe0e5");
        //这里循环表格当前的数据
        for (let i = 1; i < data.length; i++) {

            if (data[i][mergeCondition[k]] === data[i - 1][mergeCondition[k]]) {
                //获取当前行的当前列
                let tdCurArr = trArr.eq(i).find("td").eq(columnsIndex[k]);
                let tdPreArr = trArr.eq(mergeIndex).find("td").eq(columnsIndex[k]);
                //后一行的值与前一行的值做比较，相同就需要合并
                mark += 1;
                //相同列的第一列增加rowspan属性
                //获取相同列的第一列
                tdPreArr.each(function () {
                    $(this).attr("rowspan", mark);
                });
                tdCurArr.each(function () {
                    $(this).css("display", "none");
                });
            } else {
                mergeIndex = i;
                //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                mark = 1;
            }
        }
        mergeIndex = 0;
        mark = 1;
    }
}

2）列合并

//合并单元格杉树--列数据相同即合并
function mergeColumns(tableDivId, data, mergeCondition, columnsIndex, rowFeatureName, rowFeatureValue, colspanValue) {
    //tableDivId 表格id
    //res
    //mergeCondition 需要合并列的列名称（条件）
    //columnsIndex 需要合并列的列索引
    //rowFeatureName 需要合并的行特性
    //rowFeatureValue 需要合并的行特性值
    //colspanValue 需要合并的列长度
    let width = 0;
    //这里循环所有要合并的列
    for (let k = 0; k < mergeCondition.length; k++) {
        //所有行
        //有多个表格存在时，必须指定lay-id
        let trArr = $("[lay-id=" + tableDivId + "] .layui-table-body>.layui-table").find("tr");
        //这里循环表格当前的数据
        for (let i = 0; i < data.length; i++) {
            if (data[i][rowFeatureName[k]] === rowFeatureValue[k]) {

                for (let d = 1; d < colspanValue[k]; d++) {
                    let tdLaterArr = trArr.eq(i).find("td").eq(columnsIndex[k] + d);
                    tdLaterArr.each(function () {
                        let temp = $(".laytable-cell-" + $(this).attr("data-key")).css('width');
                        if (temp.length > 2) {
                            width += (temp.substring(0, temp.length - 2)) * 1;
                        }

                        $(this).css("display", "none");
                    });
                }
                //获取当前行的当前列
                let tdCurArr = trArr.eq(i).find("td").eq(columnsIndex[k]);
                tdCurArr.each(function () {
                    $(this).attr("colspan", colspanValue[k]);
                    //修改宽度
                    let widthSelf = $(".laytable-cell-" + $(this).attr("data-key")).css('width');
                    if (widthSelf.length > 2) {
                        width += (widthSelf.substring(0, widthSelf.length - 2)) * 1;
                    }
                    $(this).find("div").css('width', width + 'px');
                });

                width = 0;
            }
        }
    }
}

3）单元格背景/字体变色

//调用实例
layui.exTable.render({
  elem:'',
  ...
  done: function (res, curr, count){
      let that = this.elem.next();
      res.data.forEach((item, index) => {
          if ('0' === item.flag) { 
              let tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
              
              //修改单元格字体颜色
              tr.find("td[data-field=result]").css("color", "#d2162b");
              
              //修改异常结果背景色
              tr.find("td[data-field=detail_name]").css("background-color", "#f9d8dc");
              tr.find("td[data-field=result]").css("background-color", "#f9d8dc");
              tr.find("td[data-field=detail_unit]").css("background-color", "#f9d8dc");
              tr.find("td[data-field=range]").css("background-color", "#f9d8dc");
          }
      })
  }
})

4）不展示表格的列标题

//调用实例
layui.exTable.render({
  elem:'',
  ...
  done: function (res, curr, count){
      //不展示表格的列标题
      $(this.elem).next().find(".layui-table-header").attr('class', "layui-hide layui-table-header");
      
      //修改某列单元格的内边距
      let that = this.elem.next();
      res.data.forEach((item, index) => {
          let tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
          let height = tr.find("td[data-field=writeBtn]").height();
          tr.find("td[data-field=writeBtn]").css('padding-bottom', height - 20);
          layui.$("[lay-id='conclusionTemplateTable'] .layui-table-body .layui-table td").css("padding-top", "10px");
      })
  }
})

 5）注意设置表格高度的格式

//正确版本
height:'full-150'
//错误版本
height:'full - 150'

 

参考博文：https://www.cnblogs.com/Kingram/p/9781682.html