layui v2.9 实现表格跨页选中

实现思路

1. 将选中的内容存到全局变量
2. 每次切换分页触发render时匹配存的数据并进行选中
3. 额外： 将数据弹框展示到右上角

存储选中内容

// 定义全局变量
let checkedData = [];
// 复选框事件
table.on("checkbox(datagrid_filter)", (obj) => {
  // 此处的obj为勾选时获取到的row对象以及选中状态等
  if (obj.checked) {
    // 根据ID 判断checkedData中是否有该数据 此步是为了防止出现多次添加
    let index = checkedData.findIndex((item) => item.ID === obj.data.ID);
    if (index === -1) {
      checkedData.push(obj.data);
    }
  } else {
    // 移除checkedData中的该数据
    checkedData = checkedData.filter((item) => item.ID !== obj.data.ID);
  }

在渲染图表后进行匹配以及勾选

let dtDatas; //这个是表格数据
const setCheck = (ID) => {
  // 根据checkedData数组获取data中的下标,如果是-1不添加
  let indexArr = [];
  // 如果穿了id那就直接根据id删除，如果没有id那就循环去取下标
  if (!ID) {
    indexArr = checkedData
      .map((item) => dtDatas.findIndex((e) => e.ID === item.ID))
      .filter((item) => item !== -1);
  } else {
    indexArr = dtDatas.findIndex((e) => e.ID === ID);
  }
  // 这个是已有的接口，根据下标来进行选中
  layui.table.setRowChecked("datagrid", { index: indexArr });
};

弹框以及数据展示

html内添加div元素，并设置为隐藏显示。

<!-- 选中表格相关内容 -->
    <div
      style="display: none"
      id="selectedTable"
      lay-filter="selectedTable_filter"
    ></div>
    <script type="text/html" id="selectedBar">
      <div class="layui-clear-space">
        <button
          type="button"
          class="layui-btn layui-bg-red layui-btn-sm"
          lay-event="deleteRow"
        >
          删除
        </button>
      </div>
    </script>

js中打开弹框

  if (checkedData.length === 0) {
    layer.closeAll();
    return;
  }

  layer.open({
    type: 1,
    offset: "rt",
    title: "已选数据",
    id: "ID-demo-layer-offset-rt",
    content: $("#selectedTable"),
    area: "440px",
    btnAlign: "c",
    shade: 0,
  });

js中渲染元素

layui.table.render({
    elem: "#selectedTable",
    id: "selectedTable",
    data: checkedData,
    cols: [
      [
        { field: "f1", title: "品种1" },
        { field: "f2", title: "品种2" },
        {
          title: "操作",
          toolbar: "#selectedBar",
          width: 100,
        },
      ],
    ],
  });

  // 行操作按钮点击事件
  layui.table.on("tool(selectedTable_filter)", function (e) {
    switch (e.event) {
      case "deleteRow":
        let index = checkedData.findIndex((item) => item.ID === e.data.ID);
        checkedData.splice(index, 1);
        layui.table.reload("selectedTable", {
          data: checkedData,
        });
        if (checkedData.length === 0) {
          layer.closeAll();
        }
        break;
    }
    setCheck(e.data.ID);
  });

完整代码

html部分，包含一个展示表格以及弹框表格

    <div id="datagrid" lay-filter="datagrid_filter"></div>
    <div id="datagrid_page"></div>
    <!-- 选中表格相关内容 -->
    <div
      style="display: none"
      id="selectedTable"
      lay-filter="selectedTable_filter"
    ></div>
    <script type="text/html" id="selectedBar">
      <div class="layui-clear-space">
        <button
          type="button"
          class="layui-btn layui-bg-red layui-btn-sm"
          lay-event="deleteRow"
        >
          删除
        </button>
      </div>
    </script>

js部分，省略了数据表格的渲染方法。

let dtDatas;
const setCheck = (ID) => {
  // 根据checkedData数组获取data中的下标,如果是-1不添加
  let indexArr = [];
  if (!ID) {
    indexArr = checkedData
      .map((item) => dtDatas.findIndex((e) => e.ID === item.ID))
      .filter((item) => item !== -1);
  } else {
    indexArr = dtDatas.findIndex((e) => e.ID === ID);
  }
  layui.table.setRowChecked("datagrid", { index: indexArr });
};

let checkedData = [];
// 复选框事件
table.on("checkbox(datagrid_filter)", (obj) => {
  if (obj.checked) {
    // 根据ID 判断checkedData中是否有该数据
    let index = checkedData.findIndex((item) => item.ID === obj.data.ID);
    if (index === -1) {
      checkedData.push(obj.data);
    }
  } else {
    // 移除checkedData中的该数据
    checkedData = checkedData.filter((item) => item.ID !== obj.data.ID);
  }

  var layer = layui.layer;
  // 如果长度为0，return
  if (checkedData.length === 0) {
    layer.closeAll();
    return;
  }

  layer.open({
    type: 1,
    offset: "rt",
    title: "已选数据",
    id: "ID-demo-layer-offset-rt",
    content: $("#selectedTable"),
    area: "440px",
    btnAlign: "c",
    shade: 0,
  });

  layui.table.render({
    elem: "#selectedTable",
    id: "selectedTable",
    data: checkedData,
    cols: [
      [
        { field: "f1", title: "品种1" },
        { field: "f2", title: "品种2" },
        {
          title: "操作",
          toolbar: "#selectedBar",
          width: 100,
        },
      ],
    ],
  });

  // 行操作按钮点击事件
  layui.table.on("tool(selectedTable_filter)", function (e) {
    switch (e.event) {
      case "deleteRow":
        let index = checkedData.findIndex((item) => item.ID === e.data.ID);
        checkedData.splice(index, 1);
        layui.table.reload("selectedTable", {
          data: checkedData,
        });
        if (checkedData.length === 0) {
          layer.closeAll();
        }
        break;
    }
    setCheck(e.data.ID);
  });
});