ZUI 1 数据表格最佳实践和踩坑系列

描述 (Description)

这段时间玩了下ZUI，我本身是用Vue的，但是有一个小项目只有4个页面，而且都是CURD，去用Vue反而显得麻烦了，不如JQ方便，所以用了下ZUI，但是目前发现坑还是有一些的，以下是一些踩坑处理办法，很多问题不能解决，但是可以规避。

我在这里采取了一些方式规避，如果已有老项目要改造，可以参考。后面等待ZUI 3稳定后会使用ZUI3+React的组合，ZUI 3似乎对这些点有了很好的改进，点赞。

1.不支持跨页全选，有BUG如何规避跨页全选如第一页选中10、11个，然后第二页选中第4、5个，正常应该绑定是24、25、10、11四个row，但是发现selections内绑定的是4、5、10、11，导致从第二页返回第一页时候，发现选择的是4个。目前不对ZUI进行修改（重写checkRow）的解决方式是暂时规避掉跨页选择。跨页时对页面选择项进行重置。

        $("#ManageGridManageGrid").on("onPageChange", function (e, state, oldState) {
          if (state.page !== oldState.page) {
            // 页码变更,重置选择项目
            dg = $("#ManageGrid").data("zui.datagrid");
            Object.values(dg.states.selections).forEach((k) => {
              console.log(k.rowId)
              if(k.rowId === 'R0'){
                // 关闭表头全选
                dg.checkRow(0, false);
                return null
              }
              dg.checkRow(k.rowId, false);
            });
          }
        })

注意R0表头的多选框，对应的下标是0，直接使用R0会导致换页时所有表头变为null。

2.固定列展示的边框太丑，想换成阴影。

目前固定列展示的边框是一个类似于border的shadow，可以采取如下样式覆盖为大扩散，变成阴影：

      .datagrid-borderless .datagrid-fixed-edge-left {
        transition: box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1),
          background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
        box-shadow: 2px 0px 8px rgb(0 0 0 / 18%);
        clip-path: inset(0px -16px 0px 0px);
      }
      .datagrid-borderless .datagrid-fixed-edge-right {
        transition: box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1),
          background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
        box-shadow: -2px 0px 8px rgb(0 0 0 / 18%);
        clip-path: inset(0px 0px 0px -16px);
      }

注意点：用clip-path把无关的阴影部分切掉，同时transition需要和zui的一致，否则我发现会导致有的cell背景颜色展示不及时。。

3.如何获取当前实际的所有选择项？

虽然提供了getCheckItems但是我是这么用的。

      function getAllSelected() {
        let dg = $("#ManageGrid").data("zui.datagrid");
        let selectedApps = [];
        console.log(dg.states.selections);
        let selectedAppIds = new Set(
          Object.values(dg.states.selections)
            .filter((selection) => selection.rowId !== "R0") // 去除表头checkbox保留有效数据
            .map((selection) => selection.data.appid)
        );
        return selectedAppIds;
      }

4.渲染的按钮、标签、开关等，在调整窗口大小、选择行，切换页面等失效了怎么办？

原因是触发了重渲染。

其实这个已经有过答案了，建议委托事件到datagrid去避免重渲染冲掉listener，然后自己根据标签类型过滤，也是比较好的设计还有一种方式是，在onRender属性中增加重新绑定。同时onSelectedRow也需要增加下重新绑定

5.如何重新刷新数据源展示？比如说执行了什么操作后想要从服务器重新刷新表格数据？


      function refreshDatasource() {
        let myDataGrid = $("#appManageGrid").data("zui.datagrid");
        // 清除数据缓存
        myDataGrid.dataSource.data = null;
        // 重设数据源
        myDataGrid.setDataSource({});
        myDataGrid.render();
      }

重新设置数据源（原样设置即可），就可以触发刷新了。也可以初次构建grid时不指定数据源，创建后调用这个方法手动拉取一次，就不需要配置两次数据源了。

同理，如果涉及到数据的持久化修改，我都是建议重新加载一次，因为缓存机制可能会导致展示的问题。

6.如何监听分页变化？

目前发现分页变化监听直接写在datagrid的pager的属性里面是没效果的，可能是没实现吧，使用jq直接监听datagrid事件委托即可。

答案参考1.

7.如何渲染操作列，如数据的增删改按钮等？

cols采取以下格式配置

            {
              name: "operation",
              label: "操作",
              width: 240,
              html: true, // 需要允许HTML渲染
              valueOperator: {
                getter: function (dataValue, cell, dataGrid) {
                  return renderOperation(
                    cell.config.data.XXX,
                    cell.config.data.XXX,
                    cell.config.data.XXX
                  );
                },
              },
            }

获取数据源中的数据，通过cell.config.data获取。

8.renderLoading输入文本后不展示怎么办？没找到好的办法，暂时不展示了。

期望 (Expectation)

无

结果 (Result)

无

软件版本 (Software version)

1.10

easysoft / zui