Table表格

展示行列数据。

何时使用

• 当有大量结构化的数据需要展现时；

• 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

代码演示

基本

最简单的用法。

import {
  DataSet,
  Table,
  NumberField,
  DateTimePicker,
  SelectBox,
  Modal,
  Button,
  notification,
} from 'choerodon-ui/pro';
const { Column } = Table;
function sexIdRenderer({ record }) {
  return record.getField('sex').getLookupData().codeValueId;
}
function handleUserDSLoad({ dataSet }) {
  const first = dataSet.get(0);
  if (first) {
    first.selectable = false;
  }
}
function renderColumnFooter(dataset, name) {
  const max = Math.max(
    0,
    ...dataset.data.map(record => record.get(name)).filter(value => !isNaN(value)),
  );
  return `最大年龄：${NumberField.format(max)}`;
}
function renderColumnHeader(dataset, name) {
  const field = dataset.getField(name);
  return (
    <span>
      <i>-=</i>
      {field ? field.get('label') : ''}
      <i>=-</i>
    </span>
  );
}
const codeDynamicProps = {
  lovCode({ record }) {
    if (record) {
      return 'LOV_CODE';
    }
  },
};
const nameDynamicProps = {
  required({ record }) {
    return record.get('sex') === 'M';
  },
};
const codeCodeDynamicProps = {
  bind({ record }) {
    const field = record.getField('code');
    if (field) {
      const valueField = field.get('valueField');
      return `code.${valueField}`;
    }
  },
};
const codeDescriptionDynamicProps = {
  bind({ record }) {
    const field = record.getField('code');
    if (field) {
      const textField = field.get('textField');
      return `code.${textField}`;
    }
  },
};
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    transport: {
      read: {
        url: '/dataset/user/queries',
      },
      create: {
        url: '/dataset/user/mutations',
        method: 'put',
      },
      update: ({ data }) =>
        data.length
          ? {
              url: `/dataset/user/mutations/${data[0].userid}`,
              data: data[0],
            }
          : null,
      destroy: {
        url: '/dataset/user/mutations',
        method: 'delete',
      },
      tls({ name }) {
        console.log('fieldName', name);
        return {
          url: '/dataset/user/languages',
        };
      },
    },
    feedback: {
      loadSuccess() {
        notification.success({ message: 'query success!' });
      },
    },
    queryFields: [
      { name: 'name', type: 'string', label: '姓名', defaultValue: 'Hugh' },
      { name: 'age', type: 'number', label: '年龄' },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      { name: 'sex', type: 'string', label: '性别', lookupCode: 'HR.EMPLOYEE_GENDER' },
    ],
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
        unique: true,
        help: '主键，区分用户',
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
        dynamicProps: nameDynamicProps,
        ignore: 'clean',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        unique: 'uniqueGroup',
        max: 100,
        step: 1,
        help: '用户年龄，可以排序',
      },
      {
        name: 'numberMultiple',
        type: 'number',
        label: '数值多值',
        multiple: true,
        min: 10,
        max: 100,
        step: 0.5,
      },
      {
        name: 'code',
        type: 'object',
        label: '代码描述',
        dynamicProps: codeDynamicProps,
        transformRequest(value) {
          return { v: 2 };
        },
      },
      {
        name: 'code.v',
        type: 'number',
        dynamicProps: codeDynamicProps,
        transformRequest(value) {
          return 5;
        },
      },
      {
        name: 'code.d.v',
        type: 'number',
        dynamicProps: codeDynamicProps,
        transformRequest(value) {
          return 5;
        },
      },
      {
        name: 'code_code',
        type: 'string',
        label: '代码',
        maxLength: 20,
        required: true,
        dynamicProps: codeCodeDynamicProps,
      },
      {
        name: 'code_description',
        dynamicProps: codeDescriptionDynamicProps,
        type: 'string',
        label: '代码描述',
      },
      {
        name: 'code_select',
        type: 'string',
        label: '代码描述(下拉)',
        lovCode: 'LOV_CODE',
        required: true,
      },
      {
        name: 'codeMultiple',
        type: 'object',
        label: '代码描述（多值）',
        lovCode: 'LOV_CODE',
        multiple: true,
        required: true,
      },
      {
        name: 'codeMultiple_code',
        bind: 'codeMultiple.code',
        type: 'string',
        label: '代码（多值）',
        multiple: true,
      },
      {
        name: 'codeMultiple_description',
        bind: 'codeMultiple.description',
        type: 'string',
        label: '代码描述',
        multiple: ',',
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
      {
        name: 'accountMultiple',
        type: 'string',
        bind: 'account.multiple',
        label: '多值拼接',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: ',',
      },
      { name: 'account', type: 'object', ignore: 'always' },
      { name: 'enable', type: 'boolean', label: '是否开启', unique: 'uniqueGroup' },
      { name: 'frozen', type: 'boolean', label: '是否冻结', trueValue: 'Y', falseValue: 'N' },
      { name: 'date.startDate', type: 'date', label: '开始日期', defaultValue: new Date() },
      { name: 'date.endDate', type: 'dateTime', label: '结束日期' },
    ],
    events: {
      selectAll: ({ dataSet }) => console.log('select all', dataSet.selected),
      indexchange: ({ record }) => console.log('current user', record),
      submit: ({ data }) => console.log('submit data', data),
      load: handleUserDSLoad,
      query: ({ params, data }) => console.log('user query parameter', params, data),
      export: ({ params, data }) => console.log('user export parameter', params, data),
      remove: ({ records }) => console.log('removed records', records),
    },
  });
  copy = () => {
    const { userDs } = this;
    const { selected } = userDs;
    if (selected.length > 0) {
      userDs.unshift(...selected.map(record => record.clone()));
    } else {
      Modal.warning('请选择记录');
    }
  };
  insert = () => {
    const { userDs } = this;
    const { selected } = userDs;
    if (selected.length > 0) {
      userDs.splice(0, 1, ...selected);
    } else {
      Modal.warning('请选择记录');
    }
  };
  importData = () => {
    const { userDs } = this;
    console.log(userDs.toJSONData());
    console.log(userDs.toJSONData(true));
    console.log(userDs.toJSONData(false, true));
    userDs.create({ other: { enemy: [{}, {}] } });
  };
  removeAllData = () => {
    this.userDs.removeAll();
  };
  deleteAllData = () => {
    this.userDs.deleteAll();
  };
  copyButton = (
    <Button icon="baseline-file_copy" onClick={this.copy} key="copy">
      复制
    </Button>
  );
  insertButton = (
    <Button icon="merge_type" onClick={this.insert} key="insert">
      插入
    </Button>
  );
  importButton = (
    <Button icon="get_app" onClick={this.importData} key="import">
      导入
    </Button>
  );
  removeAllButton = (
    <Button icon="remove_circle" onClick={this.removeAllData} key="removeAll">
      全部移除
    </Button>
  );
  deleteAllButton = (
    <Button icon="delete" onClick={this.deleteAllData} key="deleteAll">
      全部删除
    </Button>
  );
  save = () => {
    console.log('submit result', 'after click');
  };
  render() {
    const buttons = [
      'add',
      ['save', { afterClick: this.save }],
      ['delete', { color: 'red' }],
      'remove',
      'reset',
      'export',
      this.importButton,
      this.copyButton,
      this.insertButton,
      this.removeAllButton,
      this.deleteAllButton,
    ];
    return (
      <Table
        key="user"
        buttons={buttons}
        dataSet={this.userDs}
        header="User"
        style={{ height: 200 }}
        pagination={{
          showQuickJumper: true,
        }}
      >
        <Column
          name="userid"
          header={renderColumnHeader}
          style={{ color: 'red' }}
          editor
          width={150}
          lock
          sortable
        />
        <Column name="age" editor width={150} sortable footer={renderColumnFooter} />
        <Column name="enable" editor width={50} minWidth={50} lock />
        <Column name="name" editor width={150} sortable tooltip="always" />
        <Column name="code" editor width={150} sortable />
        <Column name="code_code" editor width={150} tooltip="overflow" />
        <Column name="code_select" editor width={150} />
        <Column name="codeMultiple" editor width={150} />
        <Column name="codeMultiple_code" width={150} />
        <Column name="sex" editor={<SelectBox />} width={150} />
        <Column header="性别id" renderer={sexIdRenderer} />
        <Column name="sexMultiple" editor width={150} />
        <Column name="accountMultiple" editor width={150} />
        <Column name="date.startDate" editor width={150} />
        <Column name="date.endDate" editor width={150} />
        <Column header="时间" name="time" editor={<DateTimePicker />} width={150} />
        <Column name="numberMultiple" editor width={150} minWidth={50} />
        <Column name="frozen" editor width={50} minWidth={50} lock="right" />
      </Table>
    );
  }
}
ReactDOM.render(<App />, mountNode);

级联

级联。

import {
  DataSet,
  Table,
  TextField,
  DateTimePicker,
  Modal,
  Button,
  Lov,
  Tabs,
} from 'choerodon-ui/pro';
const { Column } = Table;
const { TabPane } = Tabs;
function editorRenderer(record) {
  return record.status === 'add' ? <TextField /> : null;
}
function maleFilter(record) {
  return record.get('sex') === 'M' || !record.get('sex');
}
function femaleFilter(record) {
  return record.get('sex') === 'F';
}
class App extends React.Component {
  friendsDs = new DataSet({
    dataToJSON: 'normal',
    queryUrl: '/dataset/user/queries',
    fields: [
      { name: 'name', type: 'string', label: '姓名', required: true },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
    ],
    events: {
      query: ({ params, data }) => console.log('friend query parameter', params, data),
    },
  });
  enemyFriendsDs = new DataSet({
    dataToJSON: 'normal',
    selection: 'single',
    fields: [
      { name: 'name', type: 'string', label: '姓名', required: true },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      { name: 'code_code', type: 'string', bind: 'code.code' },
      { name: 'code_description', type: 'string', bind: 'code.description' },
    ],
  });
  enemyDs = new DataSet({
    primaryKey: 'userid',
    autoQuery: false,
    autoCreate: true,
    fields: [
      { name: 'name', type: 'intl', label: '姓名', required: true },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
    ],
    children: {
      friends: this.enemyFriendsDs,
    },
    events: {
      indexChange: ({ record }) =>
        record && console.log('enemyRecord cascadeParent', record.cascadeParent),
    },
  });
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: false,
    autoCreate: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
    events: {
      submit: ({ data }) => console.log('submit data', data),
      load: ({ dataSet }) => console.log('header ds', dataSet.slice()),
    },
    children: {
      friends: this.friendsDs,
      'other.enemy': this.enemyDs,
    },
  });
  openModal = record => {
    let isCancel = false;
    Modal.open({
      drawer: true,
      width: 600,
      children: (
        <Tabs>
          <TabPane tab="Friends(M)">
            <Table
              buttons={['add', 'delete']}
              dataSet={this.friendsDs}
              rowHeight={40}
              filter={maleFilter}
            >
              <Column name="name" editor={editorRenderer} sortable />
              <Column name="age" editor sortable />
              <Column name="sex" editor width={150} />
            </Table>
          </TabPane>
          <TabPane tab="Friends(F)">
            <Table dataSet={this.friendsDs} rowHeight={40} filter={femaleFilter}>
              <Column name="name" editor={editorRenderer} sortable />
              <Column name="age" editor sortable />
              <Column name="sex" editor width={150} />
            </Table>
          </TabPane>
        </Tabs>
      ),
      onCancel: () => (isCancel = true),
      afterClose: () => record && isCancel && this.userDs.remove(record),
    });
  };
  createUser = () => {
    this.openModal(this.userDs.create({}, 0));
    this.friendsDs.create({});
  };
  editUser = () => {
    this.openModal();
  };
  toData = () => {
    console.log('toData', this.userDs.toData());
  };
  toJSONData = () => {
    console.log('toJSONData', this.userDs.toJSONData());
  };
  renderEdit = () => {
    return <Button funcType="flat" icon="mode_edit" onClick={this.editUser} size="small" />;
  };
  createButton = (
    <Button icon="playlist_add" onClick={this.createUser} key="add">
      新增
    </Button>
  );
  toDataButton = (
    <Button onClick={this.toData} key="toData">
      toData
    </Button>
  );
  toJSONDataButton = (
    <Button onClick={this.toJSONData} key="toJSONData">
      toJSONData
    </Button>
  );
  render() {
    const buttons = [
      this.createButton,
      'save',
      'delete',
      'query',
      this.toDataButton,
      this.toJSONDataButton,
    ];
    return [
      <Table key="user" buttons={buttons} dataSet={this.userDs} header="User">
        <Column name="userid" editor />
        <Column name="age" editor width={150} />
        <Column name="enable" editor width={50} />
        <Column name="name" editor width={150} />
        <Column header="编辑Friends" align="center" renderer={this.renderEdit} lock="right" />
      </Table>,
      <Table
        key="cascade1"
        header="Cascade Level 1"
        buttons={['add', 'delete']}
        dataSet={this.enemyDs}
        pagination={{ position: 'both' }}
      >
        <Column name="name" editor sortable />
        <Column name="age" editor sortable />
        <Column name="sex" editor width={150} />
      </Table>,
      <Table
        key="cascade2"
        header="Cascade Level 2"
        buttons={[
          'add',
          'delete',
          <Lov dataSet={this.enemyFriendsDs} name="code" mode="button" clearButton={false}>
            Lov
          </Lov>,
        ]}
        dataSet={this.enemyFriendsDs}
        pagination={{ position: 'top' }}
      >
        <Column name="name" editor={editorRenderer} sortable />
        <Column name="age" editor sortable />
        <Column name="code" editor width={150} />
        <Column name="sex" editor width={150} />
      </Table>,
    ];
  }
}
ReactDOM.render(<App />, mountNode);

显示原始值

显示原始值。

import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
const { Column } = Table;
class EditButton extends React.Component {
  handleClick = e => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };
  render() {
    return <Button funcType="flat" icon="mode_edit" onClick={this.handleClick} size="small" />;
  }
}
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
    events: {
      submit: ({ data }) => console.log('submit data', data),
    },
  });
  openModal = (record, isNew) => {
    let isCancel = false;
    Modal.open({
      drawer: true,
      width: 600,
      children: (
        <Form record={record}>
          <TextField name="userid" />
          <TextField name="name" />
          <NumberField name="age" />
          <SelectBox name="sex" />
        </Form>
      ),
      onOk: () => this.userDs.submit(),
      onCancel: () => (isCancel = true),
      afterClose: () => isCancel && isNew && this.userDs.remove(record),
    });
  };
  editUser = record => {
    this.openModal(record);
  };
  renderEdit = ({ record }) => {
    return <EditButton onClick={this.editUser} record={record} />;
  };
  createUser = () => {
    this.openModal(this.userDs.create({}), true);
  };
  createButton = (
    <Button icon="playlist_add" onClick={this.createUser} key="add">
      新增
    </Button>
  );
  render() {
    const buttons = [this.createButton, 'save', 'delete', 'reset'];
    return (
      <Table key="user" buttons={buttons} dataSet={this.userDs} pristine>
        <Column name="userid" />
        <Column name="age" />
        <Column name="enable" />
        <Column name="name" />
        <Column header="操作" align="center" renderer={this.renderEdit} lock="right" />
      </Table>
    );
  }
}
ReactDOM.render(<App />, mountNode);

行内编辑

行内编辑。

import { DataSet, Table, Button } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    cacheSelection: true,
    queryFields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      { name: 'sex', type: 'string', label: '性别', lookupCode: 'HR.EMPLOYEE_GENDER' },
      { name: 'date.startDate', type: 'date', label: '开始日期' },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
    ],
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
        unique: true,
        help: '主键，区分用户',
      },
      { name: 'name', type: 'intl', label: '姓名' },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        unique: 'uniqueGroup',
        max: 100,
        step: 1,
        help: '用户年龄，可以排序',
      },
      {
        name: 'numberMultiple',
        type: 'number',
        label: '数值多值',
        multiple: true,
        min: 10,
        max: 100,
        step: 0.5,
      },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      {
        name: 'code_code',
        bind: 'code.code',
        type: 'string',
        label: '代码',
        maxLength: 11,
        required: true,
      },
      { name: 'code_description', bind: 'code.description', type: 'string', label: '代码描述' },
      {
        name: 'code_select',
        type: 'string',
        label: '代码描述(下拉)',
        lovCode: 'LOV_CODE',
        required: true,
      },
      {
        name: 'codeMultiple',
        type: 'object',
        label: '代码描述（多值）',
        lovCode: 'LOV_CODE',
        multiple: true,
        required: true,
      },
      {
        name: 'codeMultiple_code',
        bind: 'codeMultiple.code',
        type: 'string',
        label: '代码（多值）',
        multiple: true,
      },
      {
        name: 'codeMultiple_description',
        bind: 'codeMultiple.description',
        type: 'string',
        label: '代码描述',
        multiple: ',',
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
      {
        name: 'accountMultiple',
        type: 'string',
        bind: 'account.multiple',
        label: '多值拼接',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: ',',
      },
      { name: 'account', type: 'object' },
      { name: 'enable', type: 'boolean', label: '是否开启', unique: 'uniqueGroup' },
      { name: 'frozen', type: 'boolean', label: '是否冻结', trueValue: 'Y', falseValue: 'N' },
      { name: 'date.startDate', type: 'date', label: '开始日期', defaultValue: new Date() },
      { name: 'date.endDate', type: 'dateTime', label: '结束日期' },
    ],
  });
  buttons = [
    'add',
    <Button key="create" funcType="flat" icon="add" onClick={() => this.ds.create()}>
      自定义新增
    </Button>,
  ];
  commands = ({ record }) => [
    'edit',
    ['delete', { color: 'red' }],
    <Button key="add" icon="add" onClick={() => console.log(this.ds.current.toData())} />,
  ];
  render() {
    return (
      <Table dataSet={this.ds} buttons={this.buttons} editMode="inline">
        <Column name="userid" style={{ color: 'red' }} editor width={150} lock sortable />
        <Column name="age" editor width={150} sortable />
        <Column name="enable" editor width={50} minWidth={50} lock />
        <Column name="name" editor width={150} sortable />
        <Column name="code" editor width={150} sortable />
        <Column name="code_code" editor width={150} />
        <Column name="code_select" editor width={150} />
        <Column name="codeMultiple" editor width={150} />
        <Column name="codeMultiple_code" width={150} />
        <Column name="sex" editor width={150} />
        <Column name="sexMultiple" editor width={150} />
        <Column name="accountMultiple" editor width={150} />
        <Column name="date.startDate" editor width={150} />
        <Column name="date.endDate" editor width={150} />
        <Column name="numberMultiple" editor width={150} minWidth={50} />
        <Column name="frozen" editor width={50} minWidth={50} lock="right" />
        <Column header="操作" width={150} command={this.commands} lock="right" />
      </Table>
    );
  }
}
ReactDOM.render(<App />, mountNode);

树形数据

树形数据。

import { DataSet, Table, Button, Icon } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
const { Column } = Table;
function iconRenderer({ record, text }) {
  return [<Icon key="icon" type={record.get('icon')} />, <span key="text">{text}</span>];
}
function expandedRowRenderer({ record }) {
  return (
    <p>
      功能代码：{record.get('functionCode')} 入口页面：{record.get('url')}
    </p>
  );
}
@observer
class AddChildButton extends React.Component {
  render() {
    const { dataSet, ...otherProps } = this.props;
    const { current } = dataSet;
    return <Button {...otherProps} disabled={!current || !current.get('id')} />;
  }
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    submitUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    idField: 'id',
    expandField: 'expand',
    checkField: 'ischecked',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'text', type: 'string', label: '功能名称' },
      { name: 'url', type: 'string', label: '入口页面' },
      { name: 'expand', type: 'boolean', label: '是否展开' },
      { name: 'ischecked', type: 'boolean', label: '是否开启' },
      { name: 'score', type: 'number', order: 'asc' },
      { name: 'parentId', type: 'number', parentFieldName: 'id' },
    ],
    events: {
      indexchange: ({ current }) => console.log('current user', current),
      submit: ({ data }) => console.log('submit tree data', data),
    },
  });
  state = {
    expandIconColumnIndex: 0,
    border: true,
    mode: 'tree',
    expandedRender: false,
  };
  handleCreateChild = () => {
    this.ds.create({ parentId: this.ds.current.get('id') });
  };
  handleChangeExpandRender = () => this.setState({ expandedRender: !this.state.expandedRender });
  handleChangeExpandIconIndex = () =>
    this.setState({
      expandIconColumnIndex:
        this.state.expandIconColumnIndex > 2 ? 0 : this.state.expandIconColumnIndex + 1,
    });
  handleChangeBorder = () => this.setState({ border: !this.state.border });
  handleChangeMode = () => this.setState({ mode: this.state.mode === 'tree' ? 'list' : 'tree' });
  buttons = [
    'add',
    'save',
    'delete',
    'remove',
    'query',
    'expandAll',
    'collapseAll',
    <AddChildButton key="add-child" dataSet={this.ds} onClick={this.handleCreateChild}>
      添加子节点
    </AddChildButton>,
    <Button key="change-expand-type" onClick={this.handleChangeExpandIconIndex}>
      切换展开图标索引
    </Button>,
    <Button key="change-border" onClick={this.handleChangeBorder}>
      切换边框
    </Button>,
    <Button key="change-mode" onClick={this.handleChangeMode}>
      切换树模式
    </Button>,
    <Button key="change-expand-render" onClick={this.handleChangeExpandRender}>
      切换展开行渲染
    </Button>,
  ];
  render() {
    const { mode, expandIconColumnIndex, border, expandedRender } = this.state;
    return (
      <Table
        mode={mode}
        buttons={this.buttons}
        dataSet={this.ds}
        expandIconColumnIndex={expandIconColumnIndex}
        border={border}
        expandedRowRenderer={expandedRender && expandedRowRenderer}
      >
        <Column name="text" editor renderer={iconRenderer} width={450} />
        <Column name="url" editor />
        <Column name="ischecked" editor />
        <Column name="expand" editor />
        <Column header="权限设置" width={150} align="center" />
      </Table>
    );
  }
}
ReactDOM.render(<App />, mountNode);