uxcore.js - React UI Component Set

组件演示

[{"title":"自定义列的渲染方式","id":"scene-customtable-demo-basic","tags":[],"filepath":"site/scene/customTable/demo/basic.md","directory":"scene/customTable/demo","filename":"basic","meta":{"title":"自定义列的渲染方式","description":"\n原本数据为小李、小王，在展示前，通过 column 的 render 函数来自定义列的渲染。\n","order":"0","filepath":"site/scene/customTable/demo/basic.md","filename":"basic","directory":"scene/customTable/demo","id":"scene-customtable-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var tableProps = {\n width: 700,\n jsxdata: {\n data: [{\n name: '小王',\n pinyin: 'xiaowang'\n }, {\n name: '小李',\n pinyin: 'xiaoli'\n }]\n },\n jsxcolumns: [{ dataKey: 'name',\n title: '姓名',\n width: 300,\n render: function render(cellData, rowData) {\n return React.createElement(\n 'span',\n null,\n cellData + '\\u540C\\u5B66'\n );\n } }, { dataKey: 'pinyin',\n title: '拼音',\n width: 300,\n render: function render(cellData, rowData) {\n return React.createElement(\n 'span',\n null,\n cellData + 'tongxue'\n );\n } }]\n };\n return React.createElement(\n 'div',\n { className: 'page-demo1' },\n React.createElement(_uxcore.Table, tableProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-customtable-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Table } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n\n render() {\n const tableProps = {\n width: 700,\n jsxdata: {\n data: [\n {\n name: '小王',\n pinyin: 'xiaowang',\n },\n {\n name: '小李',\n pinyin: 'xiaoli',\n },\n\n ],\n },\n jsxcolumns: [\n { dataKey: 'name',\n title: '姓名',\n width: 300,\n render: (cellData, rowData) => <span>{`${cellData}同学`}</span> },\n { dataKey: 'pinyin',\n title: '拼音',\n width: 300,\n render: (cellData, rowData) => <span>{`${cellData}tongxue`}</span> },\n ],\n };\n return (\n <div className=\"page-demo1\">\n <Table {...tableProps} />\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-customtable-demo-basic'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""},{"title":"自定义行的渲染方式","id":"scene-customtable-demo-row","tags":[],"filepath":"site/scene/customTable/demo/row.md","directory":"scene/customTable/demo","filename":"row","meta":{"title":"自定义行的渲染方式","description":"\n通过判断 rowData，可以给指定的行加上独特的 className\n","order":"1","filepath":"site/scene/customTable/demo/row.md","filename":"row","directory":"scene/customTable/demo","id":"scene-customtable-demo-row","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var tableProps = {\n width: 700,\n jsxdata: {\n data: [{\n name: '小王',\n pinyin: 'xiaowang'\n }, {\n name: '小李',\n pinyin: 'xiaoli'\n }]\n },\n jsxcolumns: [{ dataKey: 'name', title: '姓名', width: 300 }, { dataKey: 'pinyin', title: '拼音', width: 300 }],\n addRowClassName: function addRowClassName(rowData) {\n if (rowData.name == '小李') {\n return 'focus';\n }\n }\n };\n return React.createElement(\n 'div',\n { className: 'page-demo1' },\n React.createElement(_uxcore.Table, tableProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-customtable-demo-row'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Table } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n\n render() {\n const tableProps = {\n width: 700,\n jsxdata: {\n data: [\n {\n name: '小王',\n pinyin: 'xiaowang',\n },\n {\n name: '小李',\n pinyin: 'xiaoli',\n },\n\n ],\n },\n jsxcolumns: [\n { dataKey: 'name', title: '姓名', width: 300 },\n { dataKey: 'pinyin', title: '拼音', width: 300 },\n ],\n addRowClassName: (rowData) => {\n if (rowData.name == '小李') {\n return 'focus';\n }\n },\n };\n return (\n <div className=\"page-demo1\">\n <Table {...tableProps} />\n </div>\n );\n }\n\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-customtable-demo-row'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.kuma-uxtable-row.focus {\n background-color: lightblue;\n color: yellowgreen;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.kuma-uxtable-row.focus {\n background-color: lightblue;\n color: yellowgreen;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"定制编辑","id":"scene-customtable-demo-custom-edit","tags":[],"filepath":"site/scene/customTable/demo/custom-edit.md","directory":"scene/customTable/demo","filename":"custom-edit","meta":{"title":"定制编辑","description":"\n这个 Demo 展示了如何定制一个行内编辑 Cell，以应对各种各样的业务需求。\n","order":"3","filepath":"site/scene/customTable/demo/custom-edit.md","filename":"custom-edit","directory":"scene/customTable/demo","id":"scene-customtable-demo-custom-edit","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar options = {\n xw: '小王',\n xl: '小李'\n};\n\n// Table 里也可以导出 createCellField\nvar CustomCellField = _uxcore.Table.createCellField({\n component: React.createElement(\n _uxcore.Select,\n {\n style: { width: 150 },\n dropdownClassName: 'kuma-select2-selected-has-icon',\n optionLabelProp: 'children'\n },\n Object.keys(options).map(function (key) {\n return React.createElement(\n _uxcore.Select.Option,\n { key: key },\n options[key]\n );\n })\n ),\n // Select 默认返回的是选项的 value，但展示上我们需要展示对应的文案，所以可以通过 processText 进行一个处理\n processText: function processText(value) {\n return options[value];\n }\n});\n\n// component 传入的是一个有 value 和 onChange prop 的 React Component 实例。（比如一个 input）\n// createCellField 的 API 请参考里的 http://uxcore.coding.me/components/table/ 创建一个 CellField\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var tableProps = {\n ref: function ref(c) {\n _this2.table = c;\n },\n width: 700,\n jsxdata: {\n data: [{\n name: '小王',\n nameId: 'xw'\n }, {\n name: '小李',\n nameId: 'xl'\n }]\n },\n jsxcolumns: [{\n dataKey: 'name',\n // 对于复杂的编辑形式，通常需要两个 key，dataKey 用于展示（文本的部分），editKey 用于编辑（值的部分\n editKey: 'nameId',\n type: 'custom',\n title: '姓名',\n width: '50%',\n customField: CustomCellField\n }, {\n title: '操作列',\n type: 'action',\n width: 200,\n actions: [{\n title: '编辑',\n callback: function callback(rowData) {\n _this2.table.editRow(rowData);\n }\n }, {\n title: '保存',\n callback: function callback(rowData) {\n _this2.table.saveRow(rowData);\n }\n }]\n }]\n };\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Table, tableProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-customtable-demo-custom-edit'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Table, Select } from 'uxcore';\n\nconst options = {\n xw: '小王',\n xl: '小李',\n};\n\n// Table 里也可以导出 createCellField\nconst CustomCellField = Table.createCellField({\n component: (\n <Select\n style={{ width: 150 }}\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n optionLabelProp=\"children\"\n >\n {Object.keys(options).map((key) => {\n return (\n <Select.Option key={key}>{options[key]}</Select.Option>\n );\n })}\n </Select>\n ),\n // Select 默认返回的是选项的 value，但展示上我们需要展示对应的文案，所以可以通过 processText 进行一个处理\n processText: value => options[value],\n});\n\n// component 传入的是一个有 value 和 onChange prop 的 React Component 实例。（比如一个 input）\n// createCellField 的 API 请参考里的 http://uxcore.coding.me/components/table/ 创建一个 CellField\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n\n render() {\n const tableProps = {\n ref: (c) => { this.table = c; },\n width: 700,\n jsxdata: {\n data: [\n {\n name: '小王',\n nameId: 'xw',\n },\n {\n name: '小李',\n nameId: 'xl',\n },\n\n ],\n },\n jsxcolumns: [\n {\n dataKey: 'name',\n // 对于复杂的编辑形式，通常需要两个 key，dataKey 用于展示（文本的部分），editKey 用于编辑（值的部分\n editKey: 'nameId',\n type: 'custom',\n title: '姓名',\n width: '50%',\n customField: CustomCellField,\n },\n {\n title: '操作列',\n type: 'action',\n width: 200,\n actions: [\n {\n title: '编辑',\n callback: (rowData) => {\n this.table.editRow(rowData);\n },\n },\n {\n title: '保存',\n callback: (rowData) => {\n this.table.saveRow(rowData);\n },\n },\n ],\n },\n ],\n };\n return (\n <div>\n <Table {...tableProps} />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />, document.getElementById('scene-customtable-demo-custom-edit'));\n\n/* JS END CSS START*/</code></pre></div>"},"status":"public","toc":""}]

自定义列的渲染方式

原本数据为小李、小王，在展示前，通过 column 的 render 函数来自定义列的渲染。


import { Table } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    const tableProps = {
      width: 700,
      jsxdata: {
        data: [
          {
            name: '小王',
            pinyin: 'xiaowang',
          },
          {
            name: '小李',
            pinyin: 'xiaoli',
          },

        ],
      },
      jsxcolumns: [
        { dataKey: 'name',
          title: '姓名',
          width: 300,
          render: (cellData, rowData) => <span>{`${cellData}同学`}</span> },
        { dataKey: 'pinyin',
          title: '拼音',
          width: 300,
          render: (cellData, rowData) => <span>{`${cellData}tongxue`}</span> },
      ],
    };
    return (
      <div className="page-demo1">
        <Table {...tableProps} />
      </div>
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-customtable-demo-basic'));

/* JS END CSS START*/

自定义行的渲染方式

通过判断 rowData，可以给指定的行加上独特的 className


import { Table } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    const tableProps = {
      width: 700,
      jsxdata: {
        data: [
          {
            name: '小王',
            pinyin: 'xiaowang',
          },
          {
            name: '小李',
            pinyin: 'xiaoli',
          },

        ],
      },
      jsxcolumns: [
                { dataKey: 'name', title: '姓名', width: 300 },
                { dataKey: 'pinyin', title: '拼音', width: 300 },
      ],
      addRowClassName: (rowData) => {
        if (rowData.name == '小李') {
          return 'focus';
        }
      },
    };
    return (
      <div className="page-demo1">
        <Table {...tableProps} />
      </div>
    );
  }

}

ReactDOM.render(
  <Demo />
, document.getElementById('scene-customtable-demo-row'));

/* JS END CSS START*/

.kuma-uxtable-row.focus {
    background-color: lightblue;
    color: yellowgreen;
}

定制编辑

这个 Demo 展示了如何定制一个行内编辑 Cell，以应对各种各样的业务需求。


import { Table, Select } from 'uxcore';

const options = {
  xw: '小王',
  xl: '小李',
};

// Table 里也可以导出 createCellField
const CustomCellField = Table.createCellField({
  component: (
    <Select
      style={{ width: 150 }}
      dropdownClassName="kuma-select2-selected-has-icon"
      optionLabelProp="children"
    >
      {Object.keys(options).map((key) => {
        return (
          <Select.Option key={key}>{options[key]}</Select.Option>
        );
      })}
    </Select>
  ),
  // Select 默认返回的是选项的 value，但展示上我们需要展示对应的文案，所以可以通过 processText 进行一个处理
  processText: value => options[value],
});

// component 传入的是一个有 value 和 onChange prop 的 React Component 实例。（比如一个 input）
// createCellField 的 API 请参考里的 http://uxcore.coding.me/components/table/ 创建一个 CellField

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }


  render() {
    const tableProps = {
      ref: (c) => { this.table = c; },
      width: 700,
      jsxdata: {
        data: [
          {
            name: '小王',
            nameId: 'xw',
          },
          {
            name: '小李',
            nameId: 'xl',
          },

        ],
      },
      jsxcolumns: [
        {
          dataKey: 'name',
          // 对于复杂的编辑形式，通常需要两个 key，dataKey 用于展示（文本的部分），editKey 用于编辑（值的部分
          editKey: 'nameId',
          type: 'custom',
          title: '姓名',
          width: '50%',
          customField: CustomCellField,
        },
        {
          title: '操作列',
          type: 'action',
          width: 200,
          actions: [
            {
              title: '编辑',
              callback: (rowData) => {
                this.table.editRow(rowData);
              },
            },
            {
              title: '保存',
              callback: (rowData) => {
                this.table.saveRow(rowData);
              },
            },
          ],
        },
      ],
    };
    return (
      <div>
        <Table {...tableProps} />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />, document.getElementById('scene-customtable-demo-custom-edit'));

/* JS END CSS START*/