关于react.js:GridManager-表格的使用场景总结

30次阅读

共计 6400 个字符，预计需要花费 16 分钟才能阅读完成。

GridManager 库地址：http://gridmanager.lovejavascript.com/index.html

本文旨在阐明 GridManager 的应用技巧，如果想理解其配置应用，详见文档阐明 https://gridmanager.lovejavascript.com/api/index.html

1. 根底应用—动态数据表格 

export default class App extends Component {resource = () =>
    fetch("https://www.lovejavascript.com/learnLinkManager/getLearnLinkList").then((res) => res.json());

  columnData = [
    {
      key: "name",
      text: "名称",
      align: "left"
    },
    {
      key: "info",
      text: "应用阐明"
    }
  ];

  render() {
    return (
      <div className="App">
        <Table
          gridManagerName="test"
          disableLine
          supportAjaxPage
          checkboxConfig={{useRowCheck: true}}
          supportDrag={false}
          supportCheckbox={false}
          ajaxData={this.resource}
          columnData={this.columnData}
        />
     </div>
    );
  }

残缺代码演示：https://codesandbox.io/s/optimistic-currying-1bxpj?file=/src/App.js

2. 静态数据表格（分页、排序、搜寻、下载）

应用场景：须要纯前端解决表格数据，这时候，咱们往往须要在前端实现分页、排序、搜寻和下载等函数的封装。

因为每次刷新表格的时候，都会调用 ajaxData 办法，这个办法会返回表格数据，因而，咱们只须要在 ajaxData 办法中调用上述封装好的函数即可达到咱们要的成果。

这种写法很像过滤器，每一个办法都是对原数据的一次过滤，最初返回过滤后的数据，上面是每个办法的实现：

原始数据 originData

—filter—> searchData(originData): searchedData

—filter—> sortingData(searchedData): sortedData

—filter—> paging(sortedData): pagedData

——> 解决后的数据

ajaxData 配置：
ajaxData = async (settting, params) => {const originData = this.store.fetchData();
    const searchedData = this.store.searchData(originData, this.state.keywords);
    const sortedData = this.store.sortingData(searchedData, params);
    this.csvData = sortedData.list;
    return await this.store.pagingData(
      sortedData,
      params.pageNum,
      params.pageSize
    );
  };
分页：
pagingData(data, pageNum, pageSize) {const { list} = data;
    return Promise.resolve({
      pageNum,
      pageSize,
      totals: list.length,
      list: list.slice((pageNum - 1) * pageSize, pageNum * pageSize)
    });
  }
排序：
sortingData(data, query) {
    let sortProps = "DESC";
    let sortOrder = "";
    Object.keys(query).forEach((key) => {if (query[key] === "ASC" || query[key] === "DESC") {sortProps = key.split("_")[1];
        sortOrder = query[key];
      }
    });
    const list = this.sort(data.list, sortProps, sortOrder);
    return {
      totals: list.length,
      list
    };
}
sort(list, sortProps, sortOrder) {if (sortOrder === "ASC") {return sortBy(list, sortProps);
    }
    if (sortOrder === "DESC") {return sortBy(list, sortProps).reverse();}
    return list;
}
搜寻关键字：
  searchData(data, keywords) {
    const list = data.list.filter((item) => item.name && item.name.indexOf(keywords) > -1
    );
    return {
      totals: list.length,
      list
    };
  }
下载：
download(list, fileName) {if (!fileName) return;

    const url = window.URL.createObjectURL(new window.Blob([`\ufeff${list.join("\r\n")}`])
    );
    const link = document.createElement("a");
    const evt = document.createEvent("MouseEvents");

    link.href = url;
    link.setAttribute("download", fileName);

    evt.initEvent("click");

    link.dispatchEvent(evt);
}

残缺代码演示: https://codesandbox.io/s/beautiful-faraday-jt3i3?file=/src/App.js

3. 多选表格（数据回显、设置行选中的惟一 key 值、禁用行选中、最大选中行的限度）

表格选中数据回显 
  getCheckedData() {return Table.getCheckedData(this.gridManagerName);
  }

  setCheckedData(checkedData) {Table.setCheckedData(this.gridManagerName, checkedData);
  }

  ajaxSuccess() {this.setCheckedData(this.state.selected);
  }
设置行选中的惟一 key 值：

表格办法 getCheckedData 返回的是残缺的已选数据，表格回显的前提是传入的数据和传出的数据格式一样，这在应用中会造成局限，比如说后端并不会存储残缺的数据，而是只存储每条数据的 id，这是很常见的场景，因而在 GridManager 前面的迭代中，在 checkboxConfig 中增加了 key 属性，只须要配置 key: ‘id’，在传入的已选数据中，每条数据只须要包含 id 即可，不须要残缺的数据结构也能够实现回显。

<Table
    checkboxConfig: {useRowCheck: true, key: 'id'},
/>
禁用行选中 
onGridRowRender(row) {const disabledId = [69, 68];
    if (disabledId.indexOf(row.id) > -1) {Object.assign(row, { gm_checkbox_disabled: true});
    }
    return row;
  }
最大选中行限度：

须要调用 checkedGridBefore 和 checkedGridAllBefore 这两个办法来实现此需要，因为触发 checkedAllBefore 之后也会触发 checkedBefore，因而这里须要非凡解决一下，防止出现两次 error 提醒，具体见上面的代码实现。

checkedGridBefore = (checkedList, isChecked) => {if (checkedList.length >= MAX_NUM && !isChecked) {Message.error("最多反对同时抉择 5 个");
      return false;
    }
    return true;
  };

  checkedGridAllBefore(checkedList, isChecked) {
    const unChecked = this.dataList
      .map((item) => !checkedList.find((item1) => item.id === item1.id))
      .filter(Boolean);

    if (unChecked.length + checkedList.length > MAX_NUM && !isChecked) {
      // 触发 checkedAllBefore 之后也会触发 checkedBefore，这里须要非凡解决一下，防止出现两次 error 提醒
      if (checkedList.length < MAX_NUM) {Message.error("最多反对同时抉择 5 个");
      }
      return false;
    }
    return true;
  }

残缺代码演示：https://codesandbox.io/s/dazzling-albattani-o7dtn?file=/src/App.js

4. 树状表格

在表格根本配置的根底上，增加 supportTreeData = true 以及 treeConfig 即可实现一个树表格的展现。

 ...
 supportTreeData
 treeConfig={{treeKey: "children"}}
 ...

残缺代码演示：https://codesandbox.io/s/shy-smoke-7ltz2?file=/src/App.js

5. 罕用的一些应用优化（firstLoading，isIconFollowText，拖拽、暗藏列）

firstLoading：

设置 firstLoading = false，能够让表格先渲染进去，而后再加载数据。

应用场景：表格数据的申请返回较慢，这时，设置 firstLoading = false，表格就会先渲染，交互上会更加敌对。

注意事项：须要配合 callback 函数应用，在 callback 函数中调用刷新表格的办法。

reloadGrid(gotoPage) {Table.setQuery(this.gridManagerName, this.queryParams, gotoPage);
  }

  gridInit = () => {this.reloadGrid(1);
  };

  render() {
    return (
      <div className="App">
        <Table
          gridManagerName={this.gridManagerName}
          disableLine
          supportAjaxPage
          ajaxData={this.ajaxData}
          columnData={this.columnData}
          supportCheckbox={false}
          firstLoading={false}
          callback={this.gridInit}
        />
      </div>
    );
  }

残缺代码演示：https://codesandbox.io/s/quirky-https-k06m9?file=/src/App.js

isIconFollowText：

能够设置表头的 icon 图标是否追随文本，默认图标是在左侧，设置后会跟在文本右侧 

columnData = [
    {
      key: "name",
      text: "名称",
      align: "left",
      sorting: "",
      // 表头 tooltip 配置
      remind: {
        text: "字段阐明字段阐明字段阐明字段阐明字段阐明字段阐明",
        style: {"text-align": "left"}
      }
    }
  ];

  render() {
    return (
      <div className="App">
        <Table
          gridManagerName={this.gridManagerName}
          disableLine
          supportAjaxPage
          ajaxData={this.ajaxData}
          columnData={this.columnData}
          supportCheckbox={false}
          isIconFollowText
        />
      </div>
    );
  }

残缺代码演示：https://codesandbox.io/s/interesting-dust-wwe85?file=/src/App.js:574-1194

拖拽：

在拖拽的场景中，如果波及到表格的新增和删除，不要间接对 ajaxData 进行操作，操作原数据，ajaxData 由原数据包装而来，从而保障繁多职责（具体栗子请看残缺代码）。

  ajaxData = async (settting, params) => {
    return Promise.resolve({
      data: this.state.dataList, // dataList：原数据
      totals: this.state.dataList.length
    });
  };

    onAdd() {const { dataList} = this.state; // dataList：原数据
    dataList.push({id: new Date().getTime(),
      name: "浏览器的工作原理"
    });
    this.setState({dataList});
    this.reloadGrid();}

  render() {
    const moveRowConfig = {
      key: "priority",
      handler: (list, tableData) => {console.log(tableData);
      },
      useSingleMode: true // 第一列显示拖拽图标
    };

    return (
      <div className="App">
        <Button onClick={() => this.onAdd()}> 新增 </Button>
        <Table
          gridManagerName={this.gridManagerName}
          disableLine
          supportAjaxPage={false}
          ajaxData={this.ajaxData}
          columnData={this.columnData}
          supportCheckbox={false}
          supportMoveRow
          moveRowConfig={moveRowConfig}
        />
      </div>
    );
  }

残缺代码演示：https://codesandbox.io/s/jovial-water-8y4if?file=/src/App.js

暗藏列

应用场景：须要展现的列比拟多或者有暗藏列的需要。

应用：在 columnData 数组新增一项配置即可 

    {
      key: "operate",
      disableCustomize: true,
      text: (
        <Icon
          type="config"
          style={{cursor: "pointer", fontWeight: "bold"}}
          onClick={() => this.onSetUpGridFiled()}
        />
      ),
      template: () => "",
      width: "30px"
    }
    
  onSetUpGridFiled() {Table.setConfigVisible(this.gridManagerName, true);
  }

残缺代码演示：https://codesandbox.io/s/sharp-perlman-1elht?file=/src/App.js:1094-1174

正文完
react.js
发表至： react.js
2020-08-31
 0
关于react.js:react源码解析12状态更新流程
关于react.js:React2认识JSX语法格式
关于react.js:react源码解析3react源码架构
关于react.js:react源码解析8render阶段