组件演示

[{"title":"基本表格","id":"components-table-demo-basic","tags":[],"filepath":"site/components/table/demo/basic.md","directory":"components/table/demo","filename":"basic","meta":{"title":"基本表格","description":"\n","order":"0","filepath":"site/components/table/demo/basic.md","filename":"basic","directory":"components/table/demo","id":"components-table-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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n var fetchUrl = '/components/table/demo/data.json';\n\n var renderProps = {\n height: 400,\n actionColumn: {\n edit: function edit() {},\n del: function del() {}\n },\n className: 'kuma-uxtable-split-line',\n fetchParams: {},\n showColumnPicker: false,\n fetchUrl: fetchUrl,\n jsxcolumns: columns\n };\n return React.createElement(_uxcore.Table, renderProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n ];\n\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'/components/table/demo/data.json'</span>;\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n actionColumn: {\n edit() {},\n del() {},\n },\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n fetchParams: {},\n showColumnPicker: <span class=\"hljs-literal\">false</span>,\n fetchUrl,\n jsxcolumns: columns,\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"风格","id":"components-table-demo-style","tags":[],"filepath":"site/components/table/demo/style.md","directory":"components/table/demo","filename":"style","meta":{"title":"风格","description":"\n<p>有三种风格可控选择:分割线、线框和斑马纹。<br>有两种尺寸可以选择:small &amp; middle</p>\n","order":"0","filepath":"site/components/table/demo/style.md","filename":"style","directory":"components/table/demo","id":"components-table-demo-style","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 RadioGroupFormField = _uxcore.Form.RadioGroupFormField;\nvar Item = RadioGroupFormField.Item;\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 value: {\n style: 'split',\n size: 'middle'\n }\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var classNameMap = {\n split: 'kuma-uxtable-split-line',\n border: 'kuma-uxtable-border-line'\n };\n\n var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n var fetchUrl = '/components/table/demo/data.json';\n\n var renderProps = {\n height: 400,\n size: this.state.value.size,\n className: classNameMap[this.state.value.style],\n showColumnPicker: false,\n fetchUrl: fetchUrl,\n jsxcolumns: columns\n };\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Form,\n { jsxvalues: this.state.value, jsxonChange: function jsxonChange(value) {\n _this2.setState({ value: value });\n } },\n React.createElement(\n RadioGroupFormField,\n { jsxlabel: '\\u98CE\\u683C', jsxname: 'style' },\n React.createElement(Item, { value: 'split', text: '\\u5206\\u5272\\u7EBF' }),\n React.createElement(Item, { value: 'border', text: '\\u7EBF\\u6846' }),\n React.createElement(Item, { value: 'zebra', text: '\\u7EBF\\u6591\\u9A6C\\u7EB9\\u6846' })\n ),\n React.createElement(\n RadioGroupFormField,\n { jsxlabel: '\\u5C3A\\u5BF8', jsxname: 'size' },\n React.createElement(Item, { value: 'small', text: '\\u5C0F\\u578B' }),\n React.createElement(Item, { value: 'middle', text: '\\u666E\\u901A' })\n )\n ),\n React.createElement(_uxcore.Table, renderProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-style'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Form } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> { RadioGroupFormField } = Form;\n<span class=\"hljs-keyword\">const</span> { Item } = RadioGroupFormField;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: {\n style: <span class=\"hljs-string\">'split'</span>,\n size: <span class=\"hljs-string\">'middle'</span>,\n },\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> classNameMap = {\n split: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n border: <span class=\"hljs-string\">'kuma-uxtable-border-line'</span>,\n };\n\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n ];\n\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'/components/table/demo/data.json'</span>;\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n size: <span class=\"hljs-keyword\">this</span>.state.value.size,\n className: classNameMap[<span class=\"hljs-keyword\">this</span>.state.value.style],\n showColumnPicker: <span class=\"hljs-literal\">false</span>,\n fetchUrl,\n jsxcolumns: columns,\n };\n\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Form</span> <span class=\"hljs-attribute\">jsxvalues</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">jsxonChange</span>=<span class=\"hljs-value\">{(value)</span> =&gt;</span> { this.setState({ value }); }}&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioGroupFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"风格\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"style\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"split\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"分割线\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"border\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"线框\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"zebra\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"线斑马纹框\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">RadioGroupFormField</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioGroupFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"尺寸\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"size\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"small\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"小型\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"middle\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"普通\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">RadioGroupFormField</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Form</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-style'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"百分比布局","id":"components-table-demo-percent","tags":[],"filepath":"site/components/table/demo/percent.md","directory":"components/table/demo","filename":"percent","meta":{"title":"百分比布局","description":"\n<p>表格的列按照百分比布局,同时支持和列固定的组合。拖动屏幕边缘,调整宽度试一试~</p>\n","order":"2","filepath":"site/components/table/demo/percent.md","filename":"percent","directory":"components/table/demo","id":"components-table-demo-percent","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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var columns = [{ dataKey: 'country', title: '国家', width: '30%', ordered: true }, { dataKey: 'city', title: '城市', width: '20%', ordered: true }, { dataKey: 'firstName', title: 'FristName', width: '15%' }, { dataKey: 'lastName', title: 'LastName', width: '20%' }, { dataKey: 'email', title: 'Email', width: '15%', ordered: true }];\n\n var fetchUrl = '/components/table/demo/data.json';\n\n var renderProps = {\n height: 400,\n actionColumn: {\n edit: function edit() {},\n del: function del() {}\n },\n className: 'kuma-uxtable-split-line',\n fetchParams: {},\n showColumnPicker: false,\n fetchUrl: fetchUrl,\n jsxcolumns: columns\n };\n return React.createElement(_uxcore.Table, renderProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-percent'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-string\">'30%'</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-string\">'20%'</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-string\">'15%'</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span>, width: <span class=\"hljs-string\">'20%'</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-string\">'15%'</span>, ordered: <span class=\"hljs-literal\">true</span> },\n ];\n\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'/components/table/demo/data.json'</span>;\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n actionColumn: {\n edit() {},\n del() {},\n },\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n fetchParams: {},\n showColumnPicker: <span class=\"hljs-literal\">false</span>,\n fetchUrl,\n jsxcolumns: columns,\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-percent'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"高级表格 (操作栏 + 自定义列 + 分页)","id":"components-table-demo-adv","tags":[],"filepath":"site/components/table/demo/adv.md","directory":"components/table/demo","filename":"adv","meta":{"title":"高级表格 (操作栏 + 自定义列 + 分页)","description":"\n","order":"2","filepath":"site/components/table/demo/adv.md","filename":"adv","directory":"components/table/demo","id":"components-table-demo-adv","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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n // 通过 rowSelection 对象表明需要行选择\n var rowSelection = {\n onSelect: function onSelect(record, selected, selectedRows) {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: function onSelectAll(selected, selectedRows) {\n console.log(selected, selectedRows);\n }\n };\n\n var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n var fetchUrl = '/components/table/demo/data.json';\n\n var renderProps = {\n height: 400,\n actionBar: [{\n title: '工具条',\n callback: function callback() {\n alert('工具条');\n }\n }],\n className: 'kuma-uxtable-split-line',\n showSearch: true,\n fetchParams: {},\n fetchUrl: fetchUrl,\n jsxcolumns: columns,\n rowSelection: rowSelection\n };\n return React.createElement(_uxcore.Table, renderProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-adv'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-comment\">// 通过 rowSelection 对象表明需要行选择</span>\n <span class=\"hljs-keyword\">const</span> rowSelection = {\n onSelect(record, selected, selectedRows) {\n <span class=\"hljs-built_in\">console</span>.log(record, selected, selectedRows);\n },\n onSelectAll(selected, selectedRows) {\n <span class=\"hljs-built_in\">console</span>.log(selected, selectedRows);\n },\n };\n\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n ];\n\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'/components/table/demo/data.json'</span>;\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n actionBar: [\n {\n title: <span class=\"hljs-string\">'工具条'</span>,\n callback: () =&gt; {\n alert(<span class=\"hljs-string\">'工具条'</span>);\n },\n }\n ],\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n showSearch: <span class=\"hljs-literal\">true</span>,\n fetchParams: {},\n fetchUrl,\n jsxcolumns: columns,\n rowSelection,\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-adv'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"Tree 表格","id":"components-table-demo-tree","tags":[],"filepath":"site/components/table/demo/tree.md","directory":"components/table/demo","filename":"tree","meta":{"title":"Tree 表格","description":"\n<p>树形表格,数据格式参考:http://uxco.re/components/table/demo/data.json</p>\n","order":"3","filepath":"site/components/table/demo/tree.md","filename":"tree","directory":"components/table/demo","id":"components-table-demo-tree","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n var columns = [{\n dataKey: 'country',\n title: '国家国家国家国家',\n width: 200\n }, {\n dataKey: 'city',\n title: '城市',\n width: 200\n }, {\n dataKey: 'firstName',\n title: 'FristName',\n width: 200\n\n }, {\n dataKey: 'lastName',\n title: 'LastName',\n width: 200\n\n }, {\n dataKey: 'email',\n title: 'Email',\n width: 200,\n ordered: true\n }];\n\n var renderProps = {\n height: 400,\n // width: 800,\n showSearch: true,\n fetchUrl: '/components/table/demo/data.json',\n jsxcolumns: columns,\n renderModel: 'tree',\n rowSelection: {\n onSelect: function onSelect(checked, selectedRow, selectedRows) {\n console.log('selectedRows:', selectedRows);\n },\n onSelectAll: function onSelectAll() {}\n }\n };\n return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: 'table' }));\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-tree'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">const</span> columns = [\n {\n dataKey: <span class=\"hljs-string\">'country'</span>,\n title: <span class=\"hljs-string\">'国家国家国家国家'</span>,\n width: <span class=\"hljs-number\">200</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'city'</span>,\n title: <span class=\"hljs-string\">'城市'</span>,\n width: <span class=\"hljs-number\">200</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'firstName'</span>,\n title: <span class=\"hljs-string\">'FristName'</span>,\n width: <span class=\"hljs-number\">200</span>,\n\n },\n {\n dataKey: <span class=\"hljs-string\">'lastName'</span>,\n title: <span class=\"hljs-string\">'LastName'</span>,\n width: <span class=\"hljs-number\">200</span>,\n\n },\n {\n dataKey: <span class=\"hljs-string\">'email'</span>,\n title: <span class=\"hljs-string\">'Email'</span>,\n width: <span class=\"hljs-number\">200</span>,\n ordered: <span class=\"hljs-literal\">true</span>,\n },\n ];\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n <span class=\"hljs-comment\">// width: 800,</span>\n showSearch: <span class=\"hljs-literal\">true</span>,\n fetchUrl: <span class=\"hljs-string\">'/components/table/demo/data.json'</span>,\n jsxcolumns: columns,\n renderModel: <span class=\"hljs-string\">'tree'</span>,\n rowSelection: {\n onSelect: (checked, selectedRow, selectedRows) =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'selectedRows:'</span>, selectedRows);\n },\n onSelectAll: () =&gt; {},\n },\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} <span class=\"hljs-attribute\">ref</span>=<span class=\"hljs-value\">\"table\"</span> /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-tree'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"列筛选","id":"components-table-demo-filter","tags":[],"filepath":"site/components/table/demo/filter.md","directory":"components/table/demo","filename":"filter","meta":{"title":"列筛选","description":"\n","order":"4","filepath":"site/components/table/demo/filter.md","filename":"filter","directory":"components/table/demo","id":"components-table-demo-filter","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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var columns = [{ dataKey: 'country', title: '国家', width: 200,\n filters: [{\n text: 'Joe',\n value: 'Joe'\n }, {\n text: 'Jim',\n value: 'Jim'\n }, {\n text: 'Submenu',\n value: 'Submenu',\n children: [{\n text: 'Green',\n value: 'Green'\n }, {\n text: 'Black',\n value: 'Black'\n }]\n }]\n }, { dataKey: 'city', title: '城市', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200 }];\n\n var fetchUrl = '/components/table/demo/data.json';\n\n var renderProps = {\n height: 400,\n className: 'kuma-uxtable-split-line',\n showColumnPicker: false,\n fetchUrl: fetchUrl,\n jsxcolumns: columns\n };\n return React.createElement(_uxcore.Table, renderProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-filter'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-number\">200</span>, \n filters: [{\n text: <span class=\"hljs-string\">'Joe'</span>,\n value: <span class=\"hljs-string\">'Joe'</span>,\n }, {\n text: <span class=\"hljs-string\">'Jim'</span>,\n value: <span class=\"hljs-string\">'Jim'</span>,\n }, {\n text: <span class=\"hljs-string\">'Submenu'</span>,\n value: <span class=\"hljs-string\">'Submenu'</span>,\n children: [{\n text: <span class=\"hljs-string\">'Green'</span>,\n value: <span class=\"hljs-string\">'Green'</span>,\n }, {\n text: <span class=\"hljs-string\">'Black'</span>,\n value: <span class=\"hljs-string\">'Black'</span>,\n }],\n }],\n },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-number\">200</span> },\n ];\n\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'/components/table/demo/data.json'</span>;\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n showColumnPicker: <span class=\"hljs-literal\">false</span>,\n fetchUrl,\n jsxcolumns: columns,\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-filter'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"行内编辑表格","id":"components-table-demo-edit","tags":[],"filepath":"site/components/table/demo/edit.md","directory":"components/table/demo","filename":"edit","meta":{"title":"行内编辑表格","description":"\n<p>行内编辑表格,除了内置的几种可编辑列之外,我们还提供了自定义可编辑列的方法,请点击相应 <a href=\"/scene/customTable/#code-box-scene-customtable-demo-custom-edit\">场景</a> 查看</p>\n","order":"4","filepath":"site/components/table/demo/edit.md","filename":"edit","directory":"components/table/demo","id":"components-table-demo-edit","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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 _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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\n;\nvar Option = _uxcore.Select.Option;\n\nvar RadioItem = _uxcore.RadioGroup.Item;\nvar Constants = _uxcore.Table.Constants;\n\nvar mockData = {\n data: [{\n email: 'xw@abc.com',\n nameId: 'xiaowang',\n name: '小王',\n cityId: 'bj',\n city: '北京'\n }, {\n email: 'xl@abc.com',\n nameId: 'xiaoli',\n name: '小李',\n cityId: 'hz',\n city: '杭州'\n }]\n};\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 data: mockData,\n showOtherColumn: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'getTableValues',\n value: function getTableValues() {\n console.log(this.table.getData());\n }\n }, {\n key: 'handleTableChange',\n value: function handleTableChange(data, dataKey, pass) {\n console.log(data.data);\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var columns = [{ dataKey: 'jsxid', title: 'jsxid', width: 80 }, { dataKey: 'city',\n editKey: 'cityId',\n title: '城市',\n width: 200,\n type: 'select',\n renderChildren: function renderChildren() {\n return [{ id: 'bj', name: '北京' }, { id: 'hz', name: '杭州' }].map(function (item) {\n return React.createElement(\n Option,\n { key: item.id },\n item.name\n );\n });\n },\n config: { filterOption: false } }, { dataKey: 'name',\n editKey: 'nameId',\n title: '姓名',\n width: 200,\n type: 'radio',\n renderChildren: function renderChildren() {\n return [{ id: 'xiaoli', name: '小李' }, { id: 'xiaowang', name: '小王' }].map(function (item) {\n return React.createElement(RadioItem, { key: item.id, text: item.name, value: item.id });\n });\n } }, {\n dataKey: 'email',\n title: 'Email',\n width: 200,\n type: 'text',\n required: true,\n rules: function rules(cellData) {\n if (cellData.length === 0) {\n return '不能为空';\n }\n if (!_uxcore.Validator.isEmail(cellData)) {\n return '必须是一个合法的邮件地址';\n }\n return true;\n }\n }, { dataKey: 'action1',\n title: '操作1',\n width: 200,\n type: 'action',\n actions: [{\n title: '编辑',\n callback: function callback(rowData) {\n me.table.editRow(rowData);\n },\n mode: Constants.MODE.VIEW\n }, {\n title: '保存',\n callback: function callback(rowData) {\n me.table.saveRow(rowData);\n },\n mode: Constants.MODE.EDIT\n }, {\n title: '删除',\n callback: function callback(rowData) {\n me.table.delRow(rowData);\n },\n mode: Constants.MODE.VIEW\n }, {\n title: '重置',\n callback: function callback(rowData) {\n me.table.resetRow(rowData);\n },\n mode: Constants.MODE.EDIT\n }]\n }];\n\n var renderProps = {\n showPager: false,\n fetchParams: {},\n jsxdata: me.state.data,\n className: 'kuma-uxtable-split-line',\n actionBar: {\n 新增行: function _() {\n me.table.addEmptyRow();\n }\n },\n jsxcolumns: columns,\n processData: function processData(data) {\n return data;\n },\n onChange: me.handleTableChange\n };\n\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {\n _this2.table = c;\n } })),\n React.createElement(\n _uxcore.Button,\n { onClick: me.getTableValues.bind(me), style: { marginTop: '12px' } },\n '\\u83B7\\u53D6 Table \\u7684\\u503C'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-edit'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n<span class=\"hljs-keyword\">import</span> { Validator } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { Option } = Select;\n<span class=\"hljs-keyword\">import</span> { RadioGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> RadioItem = RadioGroup.Item;\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { Constants } = Table;\n<span class=\"hljs-keyword\">const</span> mockData = {\n data: [\n {\n email: <span class=\"hljs-string\">'xw@abc.com'</span>,\n nameId: <span class=\"hljs-string\">'xiaowang'</span>,\n name: <span class=\"hljs-string\">'小王'</span>,\n cityId: <span class=\"hljs-string\">'bj'</span>,\n city: <span class=\"hljs-string\">'北京'</span>,\n },\n {\n email: <span class=\"hljs-string\">'xl@abc.com'</span>,\n nameId: <span class=\"hljs-string\">'xiaoli'</span>,\n name: <span class=\"hljs-string\">'小李'</span>,\n cityId: <span class=\"hljs-string\">'hz'</span>,\n city: <span class=\"hljs-string\">'杭州'</span>,\n },\n ],\n};\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n data: mockData,\n showOtherColumn: <span class=\"hljs-literal\">false</span>,\n };\n }\n\n\n getTableValues() {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-keyword\">this</span>.table.getData());\n }\n\n handleTableChange(data, dataKey, pass) {\n <span class=\"hljs-built_in\">console</span>.log(data.data);\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'jsxid'</span>, title: <span class=\"hljs-string\">'jsxid'</span>, width: <span class=\"hljs-number\">80</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>,\n editKey: <span class=\"hljs-string\">'cityId'</span>,\n title: <span class=\"hljs-string\">'城市'</span>,\n width: <span class=\"hljs-number\">200</span>,\n type: <span class=\"hljs-string\">'select'</span>,\n renderChildren: () =&gt; [{ id: <span class=\"hljs-string\">'bj'</span>, name: <span class=\"hljs-string\">'北京'</span> }, { id: <span class=\"hljs-string\">'hz'</span>, name: <span class=\"hljs-string\">'杭州'</span> }].map(item =&gt; <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{item.id}</span>&gt;</span>{item.name}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>,\n config: { filterOption: <span class=\"hljs-literal\">false</span> } },\n { dataKey: <span class=\"hljs-string\">'name'</span>,\n editKey: <span class=\"hljs-string\">'nameId'</span>,\n title: <span class=\"hljs-string\">'姓名'</span>,\n width: <span class=\"hljs-number\">200</span>,\n type: <span class=\"hljs-string\">'radio'</span>,\n renderChildren: () =&gt; [{ id: <span class=\"hljs-string\">'xiaoli'</span>, name: <span class=\"hljs-string\">'小李'</span> }, { id: <span class=\"hljs-string\">'xiaowang'</span>, name: <span class=\"hljs-string\">'小王'</span> }].map(item =&gt; <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioItem</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{item.id}</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">{item.name}</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{item.id}</span> /&gt;</span>)</span> },\n {\n dataKey: <span class=\"hljs-string\">'email'</span>,\n title: <span class=\"hljs-string\">'Email'</span>,\n width: <span class=\"hljs-number\">200</span>,\n type: <span class=\"hljs-string\">'text'</span>,\n required: <span class=\"hljs-literal\">true</span>,\n rules: (cellData) =&gt; {\n <span class=\"hljs-keyword\">if</span> (cellData.length === <span class=\"hljs-number\">0</span>) {\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">'不能为空'</span>;\n }\n <span class=\"hljs-keyword\">if</span> (!Validator.isEmail(cellData)) {\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">'必须是一个合法的邮件地址'</span>;\n }\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-literal\">true</span>;\n },\n },\n { dataKey: <span class=\"hljs-string\">'action1'</span>,\n title: <span class=\"hljs-string\">'操作1'</span>,\n width: <span class=\"hljs-number\">200</span>,\n type: <span class=\"hljs-string\">'action'</span>,\n actions: [\n {\n title: <span class=\"hljs-string\">'编辑'</span>,\n callback: (rowData) =&gt; {\n me.table.editRow(rowData);\n },\n mode: Constants.MODE.VIEW,\n },\n {\n title: <span class=\"hljs-string\">'保存'</span>,\n callback: (rowData) =&gt; {\n me.table.saveRow(rowData);\n },\n mode: Constants.MODE.EDIT,\n },\n {\n title: <span class=\"hljs-string\">'删除'</span>,\n callback: (rowData) =&gt; {\n me.table.delRow(rowData);\n },\n mode: Constants.MODE.VIEW,\n },\n {\n title: <span class=\"hljs-string\">'重置'</span>,\n callback: (rowData) =&gt; {\n me.table.resetRow(rowData);\n },\n mode: Constants.MODE.EDIT,\n },\n ],\n },\n ];\n\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n showPager: <span class=\"hljs-literal\">false</span>,\n fetchParams: {},\n jsxdata: me.state.data,\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n actionBar: {\n 新增行: () =&gt; {\n me.table.addEmptyRow();\n },\n },\n jsxcolumns: columns,\n processData: data =&gt; data,\n onChange: me.handleTableChange,\n };\n\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} <span class=\"hljs-attribute\">ref</span>=<span class=\"hljs-value\">{(c)</span> =&gt;</span> { this.table = c; }} /&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{me.getTableValues.bind(me)}</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> '<span class=\"hljs-attribute\">12px</span>' }}&gt;</span>获取 Table 的值<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-edit'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"列固定","id":"components-table-demo-fixed","tags":[],"filepath":"site/components/table/demo/fixed.md","directory":"components/table/demo","filename":"fixed","meta":{"title":"列固定","description":"\n<p>支持左侧或右侧列固定</p>\n","order":"5","filepath":"site/components/table/demo/fixed.md","filename":"fixed","directory":"components/table/demo","id":"components-table-demo-fixed","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true, fixed: true }, { dataKey: 'city', title: '城市', width: 150 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName' }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }, {\n dataKey: 'action1',\n title: '操作1',\n width: 150,\n type: 'action',\n rightFixed: true,\n actions: {\n 编辑: function _(rowData, actions) {\n console.log(actions.addEmptyRow);\n me.form.toggleSubComp(rowData);\n },\n 删除: function _(rowData) {\n me.form.delRow(rowData);\n }\n }\n }];\n\n var renderProps = {\n height: 300,\n fetchUrl: '/components/table/demo/data.json',\n jsxcolumns: columns,\n className: 'kuma-uxtable-split-line'\n };\n return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {\n _this2.form = c;\n } }));\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-fixed'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">const</span> columns = [\n { dataKey: <span class=\"hljs-string\">'country'</span>, title: <span class=\"hljs-string\">'国家'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span>, fixed: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'city'</span>, title: <span class=\"hljs-string\">'城市'</span>, width: <span class=\"hljs-number\">150</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'firstName'</span>, title: <span class=\"hljs-string\">'FristName'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'lastName'</span>, title: <span class=\"hljs-string\">'LastName'</span> },\n { dataKey: <span class=\"hljs-string\">'email'</span>, title: <span class=\"hljs-string\">'Email'</span>, width: <span class=\"hljs-number\">200</span>, ordered: <span class=\"hljs-literal\">true</span> },\n {\n dataKey: <span class=\"hljs-string\">'action1'</span>,\n title: <span class=\"hljs-string\">'操作1'</span>,\n width: <span class=\"hljs-number\">150</span>,\n type: <span class=\"hljs-string\">'action'</span>,\n rightFixed: <span class=\"hljs-literal\">true</span>,\n actions: {\n 编辑(rowData, actions) {\n <span class=\"hljs-built_in\">console</span>.log(actions.addEmptyRow);\n me.form.toggleSubComp(rowData);\n },\n 删除(rowData) {\n me.form.delRow(rowData);\n },\n },\n },\n ];\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">300</span>,\n fetchUrl: <span class=\"hljs-string\">'/components/table/demo/data.json'</span>,\n jsxcolumns: columns,\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n };\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} <span class=\"hljs-attribute\">ref</span>=<span class=\"hljs-value\">{(c)</span> =&gt;</span> { this.form = c; }} /&gt;)</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-fixed'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"大表头","id":"components-table-demo-group","tags":[],"filepath":"site/components/table/demo/group.md","directory":"components/table/demo","filename":"group","meta":{"title":"大表头","description":"\n<p>列分组</p>\n","order":"6","filepath":"site/components/table/demo/group.md","filename":"group","directory":"components/table/demo","id":"components-table-demo-group","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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\n// 第一列为radio的demo\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 data: props.data,\n text: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n // 通过 rowSelection 对象表明需要行选择\n var rowSelection = {\n onSelect: function onSelect(record, selected, selectedRows) {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: function onSelectAll(selected, selectedRows) {\n console.log(selected, selectedRows);\n }\n };\n var columns = [{\n dataKey: 'select',\n type: 'checkboxSelector'\n }, {\n group: '分组',\n columns: [{\n dataKey: 'id',\n title: 'ID',\n width: 50\n }, {\n dataKey: 'country',\n title: '国家',\n width: 200,\n ordered: true\n }]\n }, {\n dataKey: 'city',\n title: function title() {\n return '城市';\n },\n width: 150,\n ordered: true,\n message: '都是中国城市'\n }, {\n dataKey: 'firstName',\n title: 'FristName'\n }, {\n dataKey: 'lastName',\n title: 'LastName'\n }, {\n group: '分组5',\n columns: [{\n dataKey: 'id',\n title: 'ID',\n width: 50\n }, {\n dataKey: 'country',\n title: '国家',\n width: 200,\n ordered: true\n }]\n }, {\n dataKey: 'email',\n title: 'Email',\n width: 200,\n ordered: true\n }, {\n dataKey: 'action',\n title: '链接',\n width: 100,\n render: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'a',\n null,\n '111'\n )\n );\n }\n }];\n var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n var renderProps = {\n height: 400,\n pagerSizeOptions: [5, 10, 15, 20],\n actionBar: {\n Action: function Action() {\n me.setState({\n text: 2\n });\n }\n },\n showSearch: false,\n showColumnPicker: true,\n fetchUrl: fetchUrl,\n rowSelector: 'checkboxSelector',\n jsxcolumns: columns,\n rowSelection: rowSelection\n };\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Table, _extends({}, renderProps, { className: 'kuma-uxtable-border-line' }))\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-group'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-comment\">// 第一列为radio的demo</span>\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n data: props.data,\n text: <span class=\"hljs-number\">1</span>,\n };\n }\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-comment\">// 通过 rowSelection 对象表明需要行选择</span>\n <span class=\"hljs-keyword\">const</span> rowSelection = {\n onSelect(record, selected, selectedRows) {\n <span class=\"hljs-built_in\">console</span>.log(record, selected, selectedRows);\n },\n onSelectAll(selected, selectedRows) {\n <span class=\"hljs-built_in\">console</span>.log(selected, selectedRows);\n },\n };\n <span class=\"hljs-keyword\">const</span> columns = [\n {\n dataKey: <span class=\"hljs-string\">'select'</span>,\n type: <span class=\"hljs-string\">'checkboxSelector'</span>,\n },\n {\n group: <span class=\"hljs-string\">'分组'</span>,\n columns: [\n {\n dataKey: <span class=\"hljs-string\">'id'</span>,\n title: <span class=\"hljs-string\">'ID'</span>,\n width: <span class=\"hljs-number\">50</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'country'</span>,\n title: <span class=\"hljs-string\">'国家'</span>,\n width: <span class=\"hljs-number\">200</span>,\n ordered: <span class=\"hljs-literal\">true</span>,\n },\n ],\n },\n {\n dataKey: <span class=\"hljs-string\">'city'</span>,\n title: () =&gt; <span class=\"hljs-string\">'城市'</span>,\n width: <span class=\"hljs-number\">150</span>,\n ordered: <span class=\"hljs-literal\">true</span>,\n message: <span class=\"hljs-string\">'都是中国城市'</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'firstName'</span>,\n title: <span class=\"hljs-string\">'FristName'</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'lastName'</span>,\n title: <span class=\"hljs-string\">'LastName'</span>,\n },\n {\n group: <span class=\"hljs-string\">'分组5'</span>,\n columns: [\n {\n dataKey: <span class=\"hljs-string\">'id'</span>,\n title: <span class=\"hljs-string\">'ID'</span>,\n width: <span class=\"hljs-number\">50</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'country'</span>,\n title: <span class=\"hljs-string\">'国家'</span>,\n width: <span class=\"hljs-number\">200</span>,\n ordered: <span class=\"hljs-literal\">true</span>,\n },\n ],\n },\n {\n dataKey: <span class=\"hljs-string\">'email'</span>,\n title: <span class=\"hljs-string\">'Email'</span>,\n width: <span class=\"hljs-number\">200</span>,\n ordered: <span class=\"hljs-literal\">true</span>,\n }, {\n dataKey: <span class=\"hljs-string\">'action'</span>,\n title: <span class=\"hljs-string\">'链接'</span>,\n width: <span class=\"hljs-number\">100</span>,\n render() {\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span>&gt;</span>111<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>;</span>\n },\n },\n ];\n <span class=\"hljs-keyword\">const</span> fetchUrl = <span class=\"hljs-string\">'http://eternalsky.me:8122/file/getGridJson.jsonp'</span>;\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">400</span>,\n pagerSizeOptions: [<span class=\"hljs-number\">5</span>, <span class=\"hljs-number\">10</span>, <span class=\"hljs-number\">15</span>, <span class=\"hljs-number\">20</span>],\n actionBar: {\n Action() {\n me.setState({\n text: <span class=\"hljs-number\">2</span>,\n });\n },\n },\n showSearch: <span class=\"hljs-literal\">false</span>,\n showColumnPicker: <span class=\"hljs-literal\">true</span>,\n fetchUrl,\n rowSelector: <span class=\"hljs-string\">'checkboxSelector'</span>,\n jsxcolumns: columns,\n rowSelection,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-uxtable-border-line\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-group'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"行展开","id":"components-table-demo-subcomp","tags":[],"filepath":"site/components/table/demo/subcomp.md","directory":"components/table/demo","filename":"subcomp","meta":{"title":"行展开","description":"\n<p>Table 允许用户传入自定义行展开内容。</p>\n","order":"7","filepath":"site/components/table/demo/subcomp.md","filename":"subcomp","directory":"components/table/demo","id":"components-table-demo-subcomp","template":"demos","html":"<script>(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var me = this;\n // 通过 rowSelection 对象表明需要行选择\n var rowSelection = {\n onSelect: function onSelect(record, selected, selectedRows) {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: function onSelectAll(selected, selectedRows) {\n console.log(selected, selectedRows);\n }\n };\n var columns = [{\n dataKey: 'select',\n type: 'checkboxSelector'\n }, {\n dataKey: 'id',\n title: 'ID',\n width: 50,\n hidden: true\n }, {\n dataKey: 'country',\n title: '国家',\n width: 200,\n ordered: true\n }, {\n dataKey: 'city',\n title: '城市',\n width: 150,\n ordered: true,\n message: '都是中国城市'\n }, {\n dataKey: 'firstName',\n title: 'FristName'\n }, {\n dataKey: 'lastName',\n title: 'LastName'\n }, {\n dataKey: 'email',\n title: 'Email',\n width: 200,\n ordered: true\n }];\n var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n var renderProps = {\n height: 400,\n fetchUrl: fetchUrl,\n jsxcolumns: columns,\n rowSelection: rowSelection,\n className: 'kuma-uxtable-split-line',\n renderSubComp: function renderSubComp(rowData) {\n console.log(rowData);\n var subProps = {\n jsxcolumns: [{\n dataKey: 'id',\n title: '序号'\n }, {\n dataKey: 'class',\n title: '分类',\n width: 200\n }, {\n dataKey: 'dep',\n title: '部门',\n width: 200\n }, {\n dataKey: 'person',\n title: '采购员',\n width: 200\n }],\n jsxdata: {\n data: [{ id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' }]\n },\n className: 'kuma-uxtable-ghost'\n };\n return React.createElement(\n 'div',\n { style: { padding: '0 24px', background: 'rgba(31,56,88,0.04)' } },\n React.createElement(_uxcore.Table, subProps)\n );\n }\n };\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function saveRef(c) {\n me.table = c;\n } }))\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-subcomp'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Table } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n const me = this;\n // 通过 rowSelection 对象表明需要行选择\n const rowSelection = {\n onSelect(record, selected, selectedRows) {\n console.log(record, selected, selectedRows);\n },\n onSelectAll(selected, selectedRows) {\n console.log(selected, selectedRows);\n },\n };\n const columns = [\n {\n dataKey: 'select',\n type: 'checkboxSelector',\n },\n {\n dataKey: 'id',\n title: 'ID',\n width: 50,\n hidden: true,\n },\n {\n dataKey: 'country',\n title: '国家',\n width: 200,\n ordered: true,\n },\n {\n dataKey: 'city',\n title: '城市',\n width: 150,\n ordered: true,\n message: '都是中国城市',\n },\n {\n dataKey: 'firstName',\n title: 'FristName',\n },\n {\n dataKey: 'lastName',\n title: 'LastName',\n },\n {\n dataKey: 'email',\n title: 'Email',\n width: 200,\n ordered: true,\n },\n ];\n const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n const renderProps = {\n height: 400,\n fetchUrl,\n jsxcolumns: columns,\n rowSelection,\n className: 'kuma-uxtable-split-line',\n renderSubComp: (rowData) =&gt; {\n console.log(rowData);\n const subProps = {\n jsxcolumns: [\n {\n dataKey: 'id',\n title: '序号',\n },\n {\n dataKey: 'class',\n title: '分类',\n width: 200,\n },\n {\n dataKey: 'dep',\n title: '部门',\n width: 200,\n },\n {\n dataKey: 'person',\n title: '采购员',\n width: 200,\n },\n ],\n jsxdata: {\n data: [\n { id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n ],\n },\n className: 'kuma-uxtable-ghost',\n };\n return (\n &lt;div style={{ padding: '0 24px', background: 'rgba(31,56,88,0.04)' }}&gt;\n &lt;Table {...subProps} /&gt;\n &lt;/div&gt;\n );\n },\n };\n return (\n &lt;div&gt;\n &lt;Table {...renderProps} ref={function saveRef(c) { me.table = c; }} /&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(&lt;Demo /&gt;, document.getElementById('components-table-demo-subcomp'));</code></pre></div><style type=\"text/css\">.sub-box {\n border: 1px dashed yellowgreen;\n\n}\n.sub-box > div {\n display: inline-block;\n font-size: 16px;\n width: 200px;\n line-height: 40px;\n padding: 10px 20px;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.sub-box</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">border</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1px</span> dashed yellowgreen</span></span>;\n\n}</span>\n<span class=\"hljs-class\">.sub-box</span> &gt; <span class=\"hljs-tag\">div</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> inline-block</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">16px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">200px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">40px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">padding</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">10px</span> <span class=\"hljs-number\">20px</span></span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""},{"title":"行分组","id":"components-table-demo-row-group","tags":[],"filepath":"site/components/table/demo/row-group.md","directory":"components/table/demo","filename":"row-group","meta":{"title":"行分组","description":"\n<p>根据某列的值进行行分组</p>\n","order":"12","filepath":"site/components/table/demo/row-group.md","filename":"row-group","directory":"components/table/demo","id":"components-table-demo-row-group","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 _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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 commonData = {\n title: '一级标题',\n entity: '蚂蚁金服(中国)',\n institution: '招商银行丨杭州分行'\n};\n\nvar companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];\n\nvar personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];\n\nvar mixArray = function mixArray(arr1, arr2) {\n var twoArray = arr1.map(function (item) {\n return arr2.map(function (i) {\n return _extends({}, item, i);\n });\n });\n var result = [];\n twoArray.forEach(function (item) {\n item.forEach(function (i) {\n result.push(i);\n });\n });\n return result;\n};\n\n//* 第一列为radio的demo\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var tableProps = {\n jsxcolumns: [{ dataKey: 'company', title: '公司', width: 200 }, { dataKey: 'title', title: '标题', width: 200 }, { dataKey: 'entity', title: '支付实体', width: 200 }, { dataKey: 'institution', title: '金融机构', width: 200 }, { dataKey: 'person', title: '申请人', width: 200 }],\n jsxdata: {\n data: mixArray(personData, companyData).map(function (item) {\n return _extends({}, item, commonData);\n })\n },\n className: 'kuma-uxtable-split-line',\n rowGroupKey: 'company',\n showColumnPicker: true\n };\n return React.createElement(_uxcore.Table, tableProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-row-group'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> commonData = {\n title: <span class=\"hljs-string\">'一级标题'</span>,\n entity: <span class=\"hljs-string\">'蚂蚁金服(中国)'</span>,\n institution: <span class=\"hljs-string\">'招商银行丨杭州分行'</span>,\n};\n\n<span class=\"hljs-keyword\">const</span> companyData = [\n { company: <span class=\"hljs-string\">'阿里巴巴网络技术有限公司'</span> },\n { company: <span class=\"hljs-string\">'蚂蚁金服有限公司'</span> },\n {},\n];\n\n<span class=\"hljs-keyword\">const</span> personData = [\n { person: <span class=\"hljs-string\">'Vernon Norman'</span> },\n { person: <span class=\"hljs-string\">'David Hammond'</span> },\n];\n\n<span class=\"hljs-keyword\">const</span> mixArray = (arr1, arr2) =&gt; {\n <span class=\"hljs-keyword\">const</span> twoArray = arr1.map(item =&gt; arr2.map(i =&gt; ({ ...item, ...i })));\n <span class=\"hljs-keyword\">const</span> result = [];\n twoArray.forEach((item) =&gt; {\n item.forEach((i) =&gt; {\n result.push(i);\n });\n });\n <span class=\"hljs-keyword\">return</span> result;\n};\n\n<span class=\"hljs-comment\">//* 第一列为radio的demo</span>\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> tableProps = {\n jsxcolumns: [\n { dataKey: <span class=\"hljs-string\">'company'</span>, title: <span class=\"hljs-string\">'公司'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'title'</span>, title: <span class=\"hljs-string\">'标题'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'entity'</span>, title: <span class=\"hljs-string\">'支付实体'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'institution'</span>, title: <span class=\"hljs-string\">'金融机构'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'person'</span>, title: <span class=\"hljs-string\">'申请人'</span>, width: <span class=\"hljs-number\">200</span> },\n ],\n jsxdata: {\n data: mixArray(personData, companyData).map(item =&gt; ({ ...item, ...commonData })),\n },\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n rowGroupKey: <span class=\"hljs-string\">'company'</span>,\n showColumnPicker: <span class=\"hljs-literal\">true</span>,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...tableProps</span>} /&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-row-group'));</span></code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""},{"title":"页底","id":"components-table-demo-footer","tags":[],"filepath":"site/components/table/demo/footer.md","directory":"components/table/demo","filename":"footer","meta":{"title":"页底","description":"\n<p>提供一个空白行供自定义渲染,适用于 合计 等场景,同时支持行分组 Footer,可选择性关闭。</p>\n","order":"13","filepath":"site/components/table/demo/footer.md","filename":"footer","directory":"components/table/demo","id":"components-table-demo-footer","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 _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\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 commonData = {\n title: '一级标题',\n entity: '蚂蚁金服(中国)',\n institution: '招商银行丨杭州分行',\n money: '60000'\n};\n\nvar companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];\n\nvar personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];\n\nvar mixArray = function mixArray(arr1, arr2) {\n var twoArray = arr1.map(function (item) {\n return arr2.map(function (i) {\n return _extends({}, item, i);\n });\n });\n var result = [];\n twoArray.forEach(function (item) {\n item.forEach(function (i) {\n result.push(i);\n });\n });\n return result;\n};\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var tableProps = {\n jsxcolumns: [{ dataKey: 'company', title: '公司', width: '20%' }, { dataKey: 'title', title: '标题', width: '20%', fixed: true }, { dataKey: 'money', title: '金额', width: '20%', type: 'money' }, { dataKey: 'entity', title: '支付实体', width: '50%' }, { dataKey: 'institution', title: '金融机构', width: '20%' }, { dataKey: 'person', title: '申请人', width: '20%' }],\n jsxdata: {\n data: mixArray(personData, companyData).map(function (item) {\n return _extends({}, item, commonData);\n })\n },\n className: 'kuma-uxtable-split-line',\n rowGroupKey: 'company',\n footer: function footer(_ref) {\n var data = _ref.data,\n column = _ref.column,\n from = _ref.from,\n _ref$rowGroupData = _ref.rowGroupData,\n rowGroupData = _ref$rowGroupData === undefined ? [] : _ref$rowGroupData;\n\n if (column.dataKey === 'title') {\n return '合计';\n }\n if (column.dataKey === 'money') {\n var total = 0;\n if (from === 'rowGroup') {\n rowGroupData.forEach(function (rowData) {\n total += parseInt(rowData.money, 10);\n });\n } else {\n data.forEach(function (rowData) {\n total += parseInt(rowData.money, 10);\n });\n }\n\n return _uxcore.Formatter.money(total.toString(), ',');\n }\n return null;\n },\n // width: 600,\n size: 'small',\n showRowGroupFooter: true\n // height: 300,\n };\n return React.createElement(_uxcore.Table, tableProps);\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-footer'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Formatter } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> commonData = {\n title: <span class=\"hljs-string\">'一级标题'</span>,\n entity: <span class=\"hljs-string\">'蚂蚁金服(中国)'</span>,\n institution: <span class=\"hljs-string\">'招商银行丨杭州分行'</span>,\n money: <span class=\"hljs-string\">'60000'</span>,\n};\n\n<span class=\"hljs-keyword\">const</span> companyData = [\n { company: <span class=\"hljs-string\">'阿里巴巴网络技术有限公司'</span> },\n { company: <span class=\"hljs-string\">'蚂蚁金服有限公司'</span> },\n {},\n];\n\n<span class=\"hljs-keyword\">const</span> personData = [\n { person: <span class=\"hljs-string\">'Vernon Norman'</span> },\n { person: <span class=\"hljs-string\">'David Hammond'</span> },\n];\n\n<span class=\"hljs-keyword\">const</span> mixArray = (arr1, arr2) =&gt; {\n <span class=\"hljs-keyword\">const</span> twoArray = arr1.map(item =&gt; arr2.map(i =&gt; ({ ...item, ...i })));\n <span class=\"hljs-keyword\">const</span> result = [];\n twoArray.forEach((item) =&gt; {\n item.forEach((i) =&gt; {\n result.push(i);\n });\n });\n <span class=\"hljs-keyword\">return</span> result;\n};\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">const</span> tableProps = {\n jsxcolumns: [\n { dataKey: <span class=\"hljs-string\">'company'</span>, title: <span class=\"hljs-string\">'公司'</span>, width: <span class=\"hljs-string\">'20%'</span> },\n { dataKey: <span class=\"hljs-string\">'title'</span>, title: <span class=\"hljs-string\">'标题'</span>, width: <span class=\"hljs-string\">'20%'</span>, fixed: <span class=\"hljs-literal\">true</span> },\n { dataKey: <span class=\"hljs-string\">'money'</span>, title: <span class=\"hljs-string\">'金额'</span>, width: <span class=\"hljs-string\">'20%'</span>, type: <span class=\"hljs-string\">'money'</span> },\n { dataKey: <span class=\"hljs-string\">'entity'</span>, title: <span class=\"hljs-string\">'支付实体'</span>, width: <span class=\"hljs-string\">'50%'</span> },\n { dataKey: <span class=\"hljs-string\">'institution'</span>, title: <span class=\"hljs-string\">'金融机构'</span>, width: <span class=\"hljs-string\">'20%'</span> },\n { dataKey: <span class=\"hljs-string\">'person'</span>, title: <span class=\"hljs-string\">'申请人'</span>, width: <span class=\"hljs-string\">'20%'</span> },\n ],\n jsxdata: {\n data: mixArray(personData, companyData).map(item =&gt; ({ ...item, ...commonData })),\n },\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n rowGroupKey: <span class=\"hljs-string\">'company'</span>,\n footer: ({ data, column, from, rowGroupData = [] }) =&gt; {\n <span class=\"hljs-keyword\">if</span> (column.dataKey === <span class=\"hljs-string\">'title'</span>) {\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">'合计'</span>;\n }\n <span class=\"hljs-keyword\">if</span> (column.dataKey === <span class=\"hljs-string\">'money'</span>) {\n <span class=\"hljs-keyword\">let</span> total = <span class=\"hljs-number\">0</span>;\n <span class=\"hljs-keyword\">if</span> (from === <span class=\"hljs-string\">'rowGroup'</span>) {\n rowGroupData.forEach((rowData) =&gt; {\n total += <span class=\"hljs-built_in\">parseInt</span>(rowData.money, <span class=\"hljs-number\">10</span>);\n });\n } <span class=\"hljs-keyword\">else</span> {\n data.forEach((rowData) =&gt; {\n total += <span class=\"hljs-built_in\">parseInt</span>(rowData.money, <span class=\"hljs-number\">10</span>);\n });\n }\n\n <span class=\"hljs-keyword\">return</span> Formatter.money(total.toString(), <span class=\"hljs-string\">','</span>);\n }\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-literal\">null</span>;\n },\n <span class=\"hljs-comment\">// width: 600,</span>\n size: <span class=\"hljs-string\">'small'</span>,\n showRowGroupFooter: <span class=\"hljs-literal\">true</span>,\n <span class=\"hljs-comment\">// height: 300,</span>\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...tableProps</span>} /&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-footer'));</span></code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""},{"title":"操作列","id":"components-table-demo-actioncolumn","tags":[],"filepath":"site/components/table/demo/actioncolumn.md","directory":"components/table/demo","filename":"actioncolumn","meta":{"title":"操作列","description":"\n","filepath":"site/components/table/demo/actioncolumn.md","filename":"actioncolumn","directory":"components/table/demo","id":"components-table-demo-actioncolumn","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 InputFormField = _uxcore.Form.InputFormField,\n FormRow = _uxcore.Form.FormRow,\n RadioGroupFormField = _uxcore.Form.RadioGroupFormField;\nvar RadioItem = RadioGroupFormField.Item;\n\nvar mockData = {\n data: [{\n email: 'xw@abc.com',\n nameId: 'xiaowang',\n name: '小王',\n cityId: 'bj',\n city: '北京'\n }, {\n email: 'xl@abc.com',\n nameId: 'xiaoli',\n name: '小李',\n cityId: 'hz',\n city: '杭州'\n }],\n currentPage: 2,\n totalCount: 30\n};\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 data: mockData,\n showOtherColumn: false,\n value: {\n num: 1,\n action: 'link'\n }\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var columns = [{\n dataKey: 'jsxid',\n title: 'jsxid2',\n width: 80\n }, {\n dataKey: 'city',\n editKey: 'cityId',\n title: '城市',\n width: 200\n }, {\n dataKey: 'name',\n editKey: 'nameId',\n title: '姓名',\n width: 200\n }, {\n dataKey: 'email',\n title: 'Email',\n width: 200\n }, {\n dataKey: 'action1',\n title: '操作1',\n width: 280,\n type: 'action',\n actionType: this.state.value.action,\n collapseNum: this.state.value.num || 3, // 超过 3 个将开始折叠\n actions: [{\n title: '操作一',\n callback: function callback(rowData) {\n console.log(rowData);\n }\n }, {\n title: '操作二',\n callback: function callback(rowData) {\n console.log(rowData);\n }\n }, {\n title: '禁用',\n callback: function callback(rowData) {\n console.log(rowData);\n },\n isDisable: function isDisable() {\n return true;\n }\n }, {\n title: '操作四',\n callback: function callback(rowData) {\n console.log(rowData);\n }\n }, {\n title: '操作五',\n callback: function callback(rowData) {\n console.log(rowData);\n }\n }]\n }];\n\n var renderProps = {\n jsxdata: mockData,\n jsxcolumns: columns,\n showPager: false,\n className: 'kuma-uxtable-split-line'\n };\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Form,\n { jsxonChange: this.handleChange.bind(this), jsxvalues: this.state.value },\n React.createElement(\n FormRow,\n { totalFlex: 3 },\n React.createElement(InputFormField, { jsxname: 'num', jsxlabel: '\\u6298\\u53E0\\u7684\\u4E2A\\u6570' }),\n React.createElement(\n RadioGroupFormField,\n { jsxname: 'action', jsxlabel: '\\u6837\\u5F0F\\u98CE\\u683C' },\n React.createElement(RadioItem, { value: 'button', text: '\\u6309\\u94AE' }),\n React.createElement(RadioItem, { value: 'link', text: '\\u94FE\\u63A5' })\n )\n )\n ),\n React.createElement(_uxcore.Table, renderProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-actioncolumn'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { Table } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Form } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> {\n InputFormField,\n FormRow,\n RadioGroupFormField,\n} = Form;\n\n<span class=\"hljs-keyword\">const</span> { Item: RadioItem } = RadioGroupFormField;\n<span class=\"hljs-keyword\">const</span> mockData = {\n data: [\n {\n email: <span class=\"hljs-string\">'xw@abc.com'</span>,\n nameId: <span class=\"hljs-string\">'xiaowang'</span>,\n name: <span class=\"hljs-string\">'小王'</span>,\n cityId: <span class=\"hljs-string\">'bj'</span>,\n city: <span class=\"hljs-string\">'北京'</span>,\n },\n {\n email: <span class=\"hljs-string\">'xl@abc.com'</span>,\n nameId: <span class=\"hljs-string\">'xiaoli'</span>,\n name: <span class=\"hljs-string\">'小李'</span>,\n cityId: <span class=\"hljs-string\">'hz'</span>,\n city: <span class=\"hljs-string\">'杭州'</span>,\n },\n ],\n currentPage: <span class=\"hljs-number\">2</span>,\n totalCount: <span class=\"hljs-number\">30</span>,\n};\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n data: mockData,\n showOtherColumn: <span class=\"hljs-literal\">false</span>,\n value: {\n num: <span class=\"hljs-number\">1</span>,\n action: <span class=\"hljs-string\">'link'</span>,\n },\n };\n }\n\n handleChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> columns = [\n {\n dataKey: <span class=\"hljs-string\">'jsxid'</span>,\n title: <span class=\"hljs-string\">'jsxid2'</span>,\n width: <span class=\"hljs-number\">80</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'city'</span>,\n editKey: <span class=\"hljs-string\">'cityId'</span>,\n title: <span class=\"hljs-string\">'城市'</span>,\n width: <span class=\"hljs-number\">200</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'name'</span>,\n editKey: <span class=\"hljs-string\">'nameId'</span>,\n title: <span class=\"hljs-string\">'姓名'</span>,\n width: <span class=\"hljs-number\">200</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'email'</span>,\n title: <span class=\"hljs-string\">'Email'</span>,\n width: <span class=\"hljs-number\">200</span>,\n },\n {\n dataKey: <span class=\"hljs-string\">'action1'</span>,\n title: <span class=\"hljs-string\">'操作1'</span>,\n width: <span class=\"hljs-number\">280</span>,\n type: <span class=\"hljs-string\">'action'</span>,\n actionType: <span class=\"hljs-keyword\">this</span>.state.value.action,\n collapseNum: <span class=\"hljs-keyword\">this</span>.state.value.num || <span class=\"hljs-number\">3</span>, <span class=\"hljs-comment\">// 超过 3 个将开始折叠</span>\n actions: [\n {\n title: <span class=\"hljs-string\">'操作一'</span>,\n callback: (rowData) =&gt; { <span class=\"hljs-built_in\">console</span>.log(rowData); },\n },\n {\n title: <span class=\"hljs-string\">'操作二'</span>,\n callback: (rowData) =&gt; { <span class=\"hljs-built_in\">console</span>.log(rowData); },\n },\n {\n title: <span class=\"hljs-string\">'禁用'</span>,\n callback: (rowData) =&gt; { <span class=\"hljs-built_in\">console</span>.log(rowData); },\n isDisable: () =&gt; <span class=\"hljs-literal\">true</span>,\n },\n {\n title: <span class=\"hljs-string\">'操作四'</span>,\n callback: (rowData) =&gt; { <span class=\"hljs-built_in\">console</span>.log(rowData); },\n },\n {\n title: <span class=\"hljs-string\">'操作五'</span>,\n callback: (rowData) =&gt; { <span class=\"hljs-built_in\">console</span>.log(rowData); },\n },\n ],\n },\n ];\n\n <span class=\"hljs-keyword\">const</span> renderProps = {\n jsxdata: mockData,\n jsxcolumns: columns,\n showPager: <span class=\"hljs-literal\">false</span>,\n className: <span class=\"hljs-string\">'kuma-uxtable-split-line'</span>,\n };\n\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Form</span> <span class=\"hljs-attribute\">jsxonChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span> <span class=\"hljs-attribute\">jsxvalues</span>=<span class=\"hljs-value\">{this.state.value}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">FormRow</span> <span class=\"hljs-attribute\">totalFlex</span>=<span class=\"hljs-value\">{3}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">InputFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"num\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"折叠的个数\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioGroupFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"action\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"样式风格\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioItem</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"button\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"按钮\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioItem</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"link\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"链接\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">RadioGroupFormField</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">FormRow</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Form</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Table</span> {<span class=\"hljs-attribute\">...renderProps</span>} /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-actioncolumn'));</span></code></pre></div>"},"status":"public","toc":""}]

import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const columns = [
      { dataKey: 'country', title: '国家', width: 200, ordered: true },
      { dataKey: 'city', title: '城市', width: 200, ordered: true },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'lastName', title: 'LastName', width: 200 },
      { dataKey: 'email', title: 'Email', width: 200, ordered: true },
    ];

    const fetchUrl = '/components/table/demo/data.json';

    const renderProps = {
      height: 400,
      actionColumn: {
        edit() {},
        del() {},
      },
      className: 'kuma-uxtable-split-line',
      fetchParams: {},
      showColumnPicker: false,
      fetchUrl,
      jsxcolumns: columns,
    };
    return (<Table {...renderProps} />);
  }
}

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

有三种风格可控选择:分割线、线框和斑马纹。
有两种尺寸可以选择:small & middle


import { Table } from 'uxcore';
import { Form } from 'uxcore';

const { RadioGroupFormField } = Form;
const { Item } = RadioGroupFormField;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: {
        style: 'split',
        size: 'middle',
      },
    };
  }

  render() {
    const classNameMap = {
      split: 'kuma-uxtable-split-line',
      border: 'kuma-uxtable-border-line',
    };

    const columns = [
      { dataKey: 'country', title: '国家', width: 200, ordered: true },
      { dataKey: 'city', title: '城市', width: 200, ordered: true },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'lastName', title: 'LastName', width: 200 },
      { dataKey: 'email', title: 'Email', width: 200, ordered: true },
    ];

    const fetchUrl = '/components/table/demo/data.json';

    const renderProps = {
      height: 400,
      size: this.state.value.size,
      className: classNameMap[this.state.value.style],
      showColumnPicker: false,
      fetchUrl,
      jsxcolumns: columns,
    };

    return (
      <div>
        <Form jsxvalues={this.state.value} jsxonChange={(value) => { this.setState({ value }); }}>
          <RadioGroupFormField jsxlabel="风格" jsxname="style">
            <Item value="split" text="分割线" />
            <Item value="border" text="线框" />
            <Item value="zebra" text="线斑马纹框" />
          </RadioGroupFormField>
          <RadioGroupFormField jsxlabel="尺寸" jsxname="size">
            <Item value="small" text="小型" />
            <Item value="middle" text="普通" />
          </RadioGroupFormField>
        </Form>
        <Table {...renderProps} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-style'));

表格的列按照百分比布局,同时支持和列固定的组合。拖动屏幕边缘,调整宽度试一试~


import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const columns = [
      { dataKey: 'country', title: '国家', width: '30%', ordered: true },
      { dataKey: 'city', title: '城市', width: '20%', ordered: true },
      { dataKey: 'firstName', title: 'FristName', width: '15%' },
      { dataKey: 'lastName', title: 'LastName', width: '20%' },
      { dataKey: 'email', title: 'Email', width: '15%', ordered: true },
    ];

    const fetchUrl = '/components/table/demo/data.json';

    const renderProps = {
      height: 400,
      actionColumn: {
        edit() {},
        del() {},
      },
      className: 'kuma-uxtable-split-line',
      fetchParams: {},
      showColumnPicker: false,
      fetchUrl,
      jsxcolumns: columns,
    };
    return (<Table {...renderProps} />);
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-percent'));

import { Table } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };

    const columns = [
      { dataKey: 'country', title: '国家', width: 200, ordered: true },
      { dataKey: 'city', title: '城市', width: 200, ordered: true },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'lastName', title: 'LastName', width: 200 },
      { dataKey: 'email', title: 'Email', width: 200, ordered: true },
    ];

    const fetchUrl = '/components/table/demo/data.json';

    const renderProps = {
      height: 400,
      actionBar: [
        {
          title: '工具条',
          callback: () => {
            alert('工具条');
          },
        }
      ],
      className: 'kuma-uxtable-split-line',
      showSearch: true,
      fetchParams: {},
      fetchUrl,
      jsxcolumns: columns,
      rowSelection,
    };
    return (<Table {...renderProps} />);
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-adv'));

树形表格,数据格式参考:http://uxco.re/components/table/demo/data.json


import classnames from 'classnames';;
import { Table } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    const columns = [
      {
        dataKey: 'country',
        title: '国家国家国家国家',
        width: 200,
      },
      {
        dataKey: 'city',
        title: '城市',
        width: 200,
      },
      {
        dataKey: 'firstName',
        title: 'FristName',
        width: 200,

      },
      {
        dataKey: 'lastName',
        title: 'LastName',
        width: 200,

      },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true,
      },
    ];

    const renderProps = {
      height: 400,
      // width: 800,
      showSearch: true,
      fetchUrl: '/components/table/demo/data.json',
      jsxcolumns: columns,
      renderModel: 'tree',
      rowSelection: {
        onSelect: (checked, selectedRow, selectedRows) => {
          console.log('selectedRows:', selectedRows);
        },
        onSelectAll: () => {},
      },
    };
    return (<Table {...renderProps} ref="table" />);
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-tree'));

import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const columns = [
      { dataKey: 'country', title: '国家', width: 200, 
        filters: [{
          text: 'Joe',
          value: 'Joe',
        }, {
          text: 'Jim',
          value: 'Jim',
        }, {
          text: 'Submenu',
          value: 'Submenu',
          children: [{
            text: 'Green',
            value: 'Green',
          }, {
            text: 'Black',
            value: 'Black',
          }],
        }],
      },
      { dataKey: 'city', title: '城市', width: 200 },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'lastName', title: 'LastName', width: 200 },
      { dataKey: 'email', title: 'Email', width: 200 },
    ];

    const fetchUrl = '/components/table/demo/data.json';

    const renderProps = {
      height: 400,
      className: 'kuma-uxtable-split-line',
      showColumnPicker: false,
      fetchUrl,
      jsxcolumns: columns,
    };
    return (<Table {...renderProps} />);
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-filter'));

行内编辑表格,除了内置的几种可编辑列之外,我们还提供了自定义可编辑列的方法,请点击相应 场景 查看


import classnames from 'classnames';;
import { Validator } from 'uxcore';
import { Button } from 'uxcore';
import { Select } from 'uxcore';
const { Option } = Select;
import { RadioGroup } from 'uxcore';
const RadioItem = RadioGroup.Item;
import { Table } from 'uxcore';
const { Constants } = Table;
const mockData = {
  data: [
    {
      email: 'xw@abc.com',
      nameId: 'xiaowang',
      name: '小王',
      cityId: 'bj',
      city: '北京',
    },
    {
      email: 'xl@abc.com',
      nameId: 'xiaoli',
      name: '小李',
      cityId: 'hz',
      city: '杭州',
    },
  ],
};

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: mockData,
      showOtherColumn: false,
    };
  }


  getTableValues() {
    console.log(this.table.getData());
  }

  handleTableChange(data, dataKey, pass) {
    console.log(data.data);
  }

  render() {
    const me = this;
    const columns = [
            { dataKey: 'jsxid', title: 'jsxid', width: 80 },
      { dataKey: 'city',
        editKey: 'cityId',
        title: '城市',
        width: 200,
        type: 'select',
        renderChildren: () => [{ id: 'bj', name: '北京' }, { id: 'hz', name: '杭州' }].map(item => <Option key={item.id}>{item.name}</Option>),
        config: { filterOption: false } },
      { dataKey: 'name',
        editKey: 'nameId',
        title: '姓名',
        width: 200,
        type: 'radio',
        renderChildren: () => [{ id: 'xiaoli', name: '小李' }, { id: 'xiaowang', name: '小王' }].map(item => <RadioItem key={item.id} text={item.name} value={item.id} />) },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        type: 'text',
        required: true,
        rules: (cellData) => {
          if (cellData.length === 0) {
            return '不能为空';
          }
          if (!Validator.isEmail(cellData)) {
            return '必须是一个合法的邮件地址';
          }
          return true;
        },
      },
      { dataKey: 'action1',
        title: '操作1',
        width: 200,
        type: 'action',
        actions: [
          {
            title: '编辑',
            callback: (rowData) => {
              me.table.editRow(rowData);
            },
            mode: Constants.MODE.VIEW,
          },
          {
            title: '保存',
            callback: (rowData) => {
              me.table.saveRow(rowData);
            },
            mode: Constants.MODE.EDIT,
          },
          {
            title: '删除',
            callback: (rowData) => {
              me.table.delRow(rowData);
            },
            mode: Constants.MODE.VIEW,
          },
          {
            title: '重置',
            callback: (rowData) => {
              me.table.resetRow(rowData);
            },
            mode: Constants.MODE.EDIT,
          },
        ],
      },
    ];


    const renderProps = {
      showPager: false,
      fetchParams: {},
      jsxdata: me.state.data,
      className: 'kuma-uxtable-split-line',
      actionBar: {
        新增行: () => {
          me.table.addEmptyRow();
        },
      },
      jsxcolumns: columns,
      processData: data => data,
      onChange: me.handleTableChange,
    };

    return (
      <div>
        <Table {...renderProps} ref={(c) => { this.table = c; }} />
        <Button onClick={me.getTableValues.bind(me)} style={{ marginTop: '12px' }}>获取 Table 的值</Button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-edit'));

支持左侧或右侧列固定

import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const me = this;
    const columns = [
      { dataKey: 'country', title: '国家', width: 200, ordered: true, fixed: true },
      { dataKey: 'city', title: '城市', width: 150 },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'firstName', title: 'FristName', width: 200 },
      { dataKey: 'lastName', title: 'LastName' },
      { dataKey: 'email', title: 'Email', width: 200, ordered: true },
      {
        dataKey: 'action1',
        title: '操作1',
        width: 150,
        type: 'action',
        rightFixed: true,
        actions: {
          编辑(rowData, actions) {
            console.log(actions.addEmptyRow);
            me.form.toggleSubComp(rowData);
          },
          删除(rowData) {
            me.form.delRow(rowData);
          },
        },
      },
    ];

    const renderProps = {
      height: 300,
      fetchUrl: '/components/table/demo/data.json',
      jsxcolumns: columns,
      className: 'kuma-uxtable-split-line',
    };
    return (<Table {...renderProps} ref={(c) => { this.form = c; }} />);
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-fixed'));

列分组


import { Table } from 'uxcore';
import { Button } from 'uxcore';

// 第一列为radio的demo
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      text: 1,
    };
  }
  render() {
    const me = this;
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };
    const columns = [
      {
        dataKey: 'select',
        type: 'checkboxSelector',
      },
      {
        group: '分组',
        columns: [
          {
            dataKey: 'id',
            title: 'ID',
            width: 50,
          },
          {
            dataKey: 'country',
            title: '国家',
            width: 200,
            ordered: true,
          },
        ],
      },
      {
        dataKey: 'city',
        title: () => '城市',
        width: 150,
        ordered: true,
        message: '都是中国城市',
      },
      {
        dataKey: 'firstName',
        title: 'FristName',
      },
      {
        dataKey: 'lastName',
        title: 'LastName',
      },
      {
        group: '分组5',
        columns: [
          {
            dataKey: 'id',
            title: 'ID',
            width: 50,
          },
          {
            dataKey: 'country',
            title: '国家',
            width: 200,
            ordered: true,
          },
        ],
      },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true,
      }, {
        dataKey: 'action',
        title: '链接',
        width: 100,
        render() {
          return <div><a>111</a></div>;
        },
      },
    ];
    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
    const renderProps = {
      height: 400,
      pagerSizeOptions: [5, 10, 15, 20],
      actionBar: {
        Action() {
          me.setState({
            text: 2,
          });
        },
      },
      showSearch: false,
      showColumnPicker: true,
      fetchUrl,
      rowSelector: 'checkboxSelector',
      jsxcolumns: columns,
      rowSelection,
    };
    return (
      <div>
        <Table {...renderProps} className="kuma-uxtable-border-line" />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-group'));

Table 允许用户传入自定义行展开内容。

import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const me = this;
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };
    const columns = [
      {
        dataKey: 'select',
        type: 'checkboxSelector',
      },
      {
        dataKey: 'id',
        title: 'ID',
        width: 50,
        hidden: true,
      },
      {
        dataKey: 'country',
        title: '国家',
        width: 200,
        ordered: true,
      },
      {
        dataKey: 'city',
        title: '城市',
        width: 150,
        ordered: true,
        message: '都是中国城市',
      },
      {
        dataKey: 'firstName',
        title: 'FristName',
      },
      {
        dataKey: 'lastName',
        title: 'LastName',
      },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true,
      },
    ];
    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
    const renderProps = {
      height: 400,
      fetchUrl,
      jsxcolumns: columns,
      rowSelection,
      className: 'kuma-uxtable-split-line',
      renderSubComp: (rowData) => {
        console.log(rowData);
        const subProps = {
          jsxcolumns: [
            {
              dataKey: 'id',
              title: '序号',
            },
            {
              dataKey: 'class',
              title: '分类',
              width: 200,
            },
            {
              dataKey: 'dep',
              title: '部门',
              width: 200,
            },
            {
              dataKey: 'person',
              title: '采购员',
              width: 200,
            },
          ],
          jsxdata: {
            data: [
              { id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
            ],
          },
          className: 'kuma-uxtable-ghost',
        };
        return (
          <div style={{ padding: '0 24px', background: 'rgba(31,56,88,0.04)' }}>
            <Table {...subProps} />
          </div>
        );
      },
    };
    return (
      <div>
        <Table {...renderProps} ref={function saveRef(c) { me.table = c; }} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-subcomp'));
.sub-box {
    border: 1px dashed yellowgreen;

}
.sub-box > div {
    display: inline-block;
    font-size: 16px;
    width: 200px;
    line-height: 40px;
    padding: 10px 20px;
}

根据某列的值进行行分组


import { Table } from 'uxcore';

const commonData = {
  title: '一级标题',
  entity: '蚂蚁金服(中国)',
  institution: '招商银行丨杭州分行',
};

const companyData = [
  { company: '阿里巴巴网络技术有限公司' },
  { company: '蚂蚁金服有限公司' },
  {},
];

const personData = [
  { person: 'Vernon Norman' },
  { person: 'David Hammond' },
];

const mixArray = (arr1, arr2) => {
  const twoArray = arr1.map(item => arr2.map(i => ({ ...item, ...i })));
  const result = [];
  twoArray.forEach((item) => {
    item.forEach((i) => {
      result.push(i);
    });
  });
  return result;
};

//* 第一列为radio的demo
class Demo extends React.Component {
  render() {
    const tableProps = {
      jsxcolumns: [
        { dataKey: 'company', title: '公司', width: 200 },
        { dataKey: 'title', title: '标题', width: 200 },
        { dataKey: 'entity', title: '支付实体', width: 200 },
        { dataKey: 'institution', title: '金融机构', width: 200 },
        { dataKey: 'person', title: '申请人', width: 200 },
      ],
      jsxdata: {
        data: mixArray(personData, companyData).map(item => ({ ...item, ...commonData })),
      },
      className: 'kuma-uxtable-split-line',
      rowGroupKey: 'company',
      showColumnPicker: true,
    };
    return (
      <Table {...tableProps} />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-row-group'));

import { Table } from 'uxcore';
import { Form } from 'uxcore';

const {
  InputFormField,
  FormRow,
  RadioGroupFormField,
} = Form;

const { Item: RadioItem } = RadioGroupFormField;
const mockData = {
  data: [
    {
      email: 'xw@abc.com',
      nameId: 'xiaowang',
      name: '小王',
      cityId: 'bj',
      city: '北京',
    },
    {
      email: 'xl@abc.com',
      nameId: 'xiaoli',
      name: '小李',
      cityId: 'hz',
      city: '杭州',
    },
  ],
  currentPage: 2,
  totalCount: 30,
};

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: mockData,
      showOtherColumn: false,
      value: {
        num: 1,
        action: 'link',
      },
    };
  }

  handleChange(value) {
    this.setState({
      value,
    });
  }

  render() {
    const columns = [
      {
        dataKey: 'jsxid',
        title: 'jsxid2',
        width: 80,
      },
      {
        dataKey: 'city',
        editKey: 'cityId',
        title: '城市',
        width: 200,
      },
      {
        dataKey: 'name',
        editKey: 'nameId',
        title: '姓名',
        width: 200,
      },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
      },
      {
        dataKey: 'action1',
        title: '操作1',
        width: 280,
        type: 'action',
        actionType: this.state.value.action,
        collapseNum: this.state.value.num || 3, // 超过 3 个将开始折叠
        actions: [
          {
            title: '操作一',
            callback: (rowData) => { console.log(rowData); },
          },
          {
            title: '操作二',
            callback: (rowData) => { console.log(rowData); },
          },
          {
            title: '禁用',
            callback: (rowData) => { console.log(rowData); },
            isDisable: () => true,
          },
          {
            title: '操作四',
            callback: (rowData) => { console.log(rowData); },
          },
          {
            title: '操作五',
            callback: (rowData) => { console.log(rowData); },
          },
        ],
      },
    ];

    const renderProps = {
      jsxdata: mockData,
      jsxcolumns: columns,
      showPager: false,
      className: 'kuma-uxtable-split-line',
    };

    return (
      <div>
        <Form jsxonChange={this.handleChange.bind(this)} jsxvalues={this.state.value}>
          <FormRow totalFlex={3}>
            <InputFormField jsxname="num" jsxlabel="折叠的个数" />
            <RadioGroupFormField jsxname="action" jsxlabel="样式风格">
              <RadioItem value="button" text="按钮" />
              <RadioItem value="link" text="链接" />
            </RadioGroupFormField>
          </FormRow>
        </Form>
        <Table {...renderProps} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-table-demo-actioncolumn'));

API

行内编辑用

  • getData(): 返回表格的数据,并作校验。
  • addEmptyRow(): 添加一个空的新行。
  • addRow(rowData): 以指定数据添加一个新行。
  • delRow(rowData): 删除一个新行。
  • editRow(rowData): 使指定的行切换到编辑模式。
  • editAllRow(): 使所有行切换到编辑模式。
  • viewRow(rowData): 使指定的行切换到查看模式。
  • viewAllRow(): 使所有行切换到查看模式。
  • saveRow(rowData): 保存行的数据(同时切换至查看模式)。
  • saveAllRow(): 保存所有行的数据(同时切换至查看模式)。
  • resetRow(rowData): 重置行到数据(若保存过,则为保存过后的数据)。
  • resetAllRow(): 重置所有行的数据(若保存过,则为保存过后的数据)。
  • resetAndViewAllRow(): 重置所有行数据(若保存过,则为保存过后的数据)并切换至查看模式。

获取数据

  • fetchData(from): 使表格重新请求一次数据。
    • @param from {string} {optional}: 这个参数会传入到 beforeFetch 的回调中。

创建一个 CellField

  • createCellField(options)
Name Type Require Default Since Ver. Note
options.component React Element yes input 1.12.8 被包裹的组件,需要提供 value 和 onChange,或相同功能的 API
options.valuePropName string No value 1.12.8 与 value 对应的 prop 名字
options.changePropName string No onChange 1.12.8 与 onChange 对应的 prop 名字
options.processValue func No - 1.12.8 针对 value(editKey 对应字段)的处理函数
options.processText func No - 1.12.8 针对 text (dataKey 对应字段) 的处理函数

其他

  • toggleSubComp(rowData): 使指定的行显示或隐藏二级组件(subComp)。
  • moveRowUp(rowData): 使指定的行向上移动一行
  • moveRowDown(rowData): 使指定的行向下移动一行

Props

Name Type Require Default Since Ver. Note
jsxcolumns array required null - 表格列配置项,具体见这里
width number optional 1000 - 表格的宽度
height number optional 100% - 表格的高度
showColumnPicker boolean optional true - 是否显示列筛选按钮
showPager boolean optional true - 是否显示分页
showPagerTotal boolean optional false 1.3.17 是否显示分页的总数部分
showPagerSizeChanger boolean optional true 1.6.9 是否可以改变分页的pageSize
isMiniPager boolean optional false 1.6.9 分页是否是mini的
showHeader boolean optional true - 是否显示表格头部
showHeaderBorder boolean optional false 1.3.6 是否显示头部列之间的分割线
showMask boolean optional true - 是否在 loading 的时候显示蒙层
showSearch boolean optional false - 是否显示内置的搜索栏
doubleClickToEdit boolean optional true - 是否开启双击编辑
fetchDataOnMount boolean optional true 1.3.18 是否在组件 Mount 时立刻获取一次数据
rowSelector string optional 复选 1.3.20 行选择是复选还是单选,支持 checkboxSelector 和 radioSelector
locale string optional zh-cn 1.3.17 国家化,目前支持 zh-cn/en-us
emptyText string or element optional "暂无数据" - 当没有数据时 Table 展示的文案
searchBarPlaceholder string optional "搜索表格内容" 1.3.0 searchBar 的占位符
loadingText string optional "loading" 1.4.4 加载数据时的文案
headerHeight number optional 40 - 表格头部的高度
pageSize number optional 10 - 每页显示多少条数据
pagerSizeOptions array optional [10,20,30,40] - 显示的可选 pageSize
queryKeys array optional [] - 有哪些数据会传递给 subComp
jsxdata object optional - - 在远端数据还没有返回时用作默认数据
fetchUrl string optional "" - 表格的数据源
fetchParams object optional - - 表格在请求数据时,会额外附带的参数,具有最高的优先级
actionBar object/array optional null - 表格内置的操作条配置,详细见此
beforeFetch function(data, from) optional noop - 两个参数,data 表示表格请求数据时即将发送的参数,from 表示这次请求数据的行为从哪里产生,内置的有 search(搜索栏),order(排序) & pagination(分页),该函数需要返回值,返回值为真正请求所携带的参数。
processData function(data) optional noop - 有时源返回的数据格式,并不符合 Table 的要求,可以通过此函数进行调整,参数 data 是返回数据中 content 字段的 value,该函数需要返回值,返回值为符合 content 字段 value 的数据结构。
onFetchError function(result) optional noop 1.3.7 在返回数据中 success 不是 true 的情况下触发,返回所有请求得到的数据
onSearch function(searchTxt) optional noop 1.6.1 未配置 fetchUrl 的情况下触发,传回搜索的关键词
onOrder function(column, orderType) optional noop 1.6.1 未配置 fetchUrl 的情况下触发,传回排序的列和排序方式
onPagerChange function(current, pageSize) optional noop 1.6.1 未配置 fetchUrl 的情况下触发,传回要到达的分页和每页条数
addRowClassName function(rowData) optional noop - 用于为特定的某几行添加特殊的 class,用于样式定制
rowSelection object optional noop - 选中复选框时触发的回调,rowSelection 是由回调函数组成的对象,包括 onSelect 和 onSelectAll,例子见此

折叠展开专用

Name Type Require Since Ver. Default Note
SubComp React Element optional - - 传入二级组件,已废弃,请使用 renderSubComp, 自 1.7.0 版本后不再保证此部分功能的完整性。
renderSubComp function(rowData) optional 1.3.15 - 传入二级组件,该函数需要返回值,返回 false,表示不渲染二级,返回 jsx,则渲染该 jsx

Tree 模式专用

Name Type Require Since Ver. Default Note
renderModel string optional - '' 使用 tree 模式时,此项为 'tree'
levels number optional - 0 tree 模式默认展开的级数

行内编辑表格专用

Name Type Require Since Ver. Default Note
onChange function(data) optional - noop 有表格编辑行为触发,参数的数据格式为 {data: 表格的所有数据, changedData: 变动行的数据, dataKey: xxx, editKey: xxx, pass: 正在编辑的域是否通过校验}
getSavedData boolean optional - true onChange 中的数据是否是保存之后的数据(通过了 saveRow() 的数据)

列配置项(jsxcolumns)

Key Name Type Since Ver. Require Note
dataKey string - required 表格的数据中用于查看模式展示的字段
editKey string - optional 表格的数据中用于编辑模式的字段,如对于 select 来说,此项应为选项里的 key
align string - optional 文字居中方式,默认 'left'
title string/func - required 列头标题,可以是个函数,根据返回值进行渲染
width number - required 列宽
hidden boolean - optional 是否隐藏,默认为 false
ordered boolean - optional 是否显示内置的排序,默认为 false
type string - optional 包含 'money', 'card', 'cnmobile', 'checkboxSelector', 'action', 'radio', 'text', 'select' 和 'custom'
actions array - optional 当 type 是 action 的时候会用到,用于定义具体有哪些操作,格式见下方说明
collapseNum number 1.9.4 optional 当 type 是 action 的时候会用到,默认 3,指定超过多少个 action 时折叠
actionType string 1.9.4 optional 当 type 是 action 的时候会用到,默认 link,枚举值:link/button
customField React Element - optional 当 type 是 custom 的时候会用到,用于传入自定义的 Field,用于行内编辑
render function - optional 在查看模式下,用户定制渲染的方式,返回一个 jsx 格式
fixed boolean - optional 是否固定在左侧,固定列不可以和折叠展开面板混合使用
rightFixed boolean 1.14.0 optional 是否固定在右侧,固定列不可以和折叠展开面板混合使用
delimiter string - optional 在 type 是 'money', 'card', 'cnmobile' 的时候会用到,用于传入格式化的分隔符
disable boolean - optional 在 type 为 checkboxSelector 时使用,是否禁用 checkbox,优先级高于 isDisable
isDisable function(rowData) 1.3.1 optional 在 tpye 为 checkboxSelector 时使用,为一个回调函数,用于根据 rowData 去判断是否禁用该行的 checkbox
canEdit function(rowData) 1.3.3 optional 在 type 为可编辑表格的类别时使用,为一个回调函数,用于根据 rowData 去判断该行该列是否可以编辑
config object 1.5.0 optional 在 type 为 text/select/radio 时使用,传入对应的配置项,配置项与对应的组件(uxcore-selelct2)相同
renderChildren function 1.5.0 - 在 type 为 select/radio 时使用,通过返回 jsx 传入选项。

列配置项的例子


const columns = [
        { dataKey: 'check', type: 'checkbox', isDisable(rowData) { return /city/.test(rowData.city); } }, // 定制 checkbox 列,dataKey 对应的应是一个 bool 值,表明是否被选中。
        { dataKey: 'country', title: '国家', width: 200, ordered: true },
  { dataKey: 'action1',
    title: '操作1',
    width: 100,
    type: 'action',
    actions: [
      {
        title: '编辑',
        callback: (rowData) => {
          me.refs.grid.editRow(rowData);
        },
        mode: Constants.MODE.VIEW,
      },
      {
        title: '保存',
        callback: (rowData) => {
          me.refs.grid.saveRow(rowData);
        },
        mode: Constants.MODE.EDIT,
      },
    ] },
  { dataKey: 'action',
    title: '链接',
    width: 100,
    render(cellData, rowData) {
      return <div><a href="#">{rowData.email}</a></div>;
    } },
];

列配置项的例子2(带列群组, since ver. 1.3.0)


const columns = [
        { dataKey: 'check', type: 'checkbox', disable: false }, // custom checkbox column, dataKey can be anyone, true means checked.
  {
    group: '国家',
    columns: [
                { dataKey: 'country', title: '国家', width: 200, ordered: true },
                { dataKey: 'country2', title: '国家2', width: 200, ordered: true },
    ],
  },
];

rowSelection 的例子


const rowSelection = {
  onSelect(record, selected, selectedRows) {
    console.log(record, selected, selectedRows);
  },
  onSelectAll(record, data) {
    console.log(record, data);
  },
  isDisabled(rowData) {
    return false;
  },
};

返回的数据格式

   {
    "content":{
        "data":[
            {    
                "id":'1'
                "grade":"grade1",
                "email":"email1",
                "firstName":"firstName1",
                "lastName":"lastName1",
                "birthDate":"birthDate1",
                "country":"country1",
                "city":"city1"
            }
            ...

        ],
        "currentPage":1,
        "totalCount":30
    },
    "success": true,
    "errorCode": "",
    "errorMsg": ""
    }

上面的数据格式是 ajax 返回的数据格式要求,如果你通过 jsxdata 传值,只需要 content 里面的内容。

{
    "data":[
        {   
            "id":'1'
            "grade":"grade1",
            "email":"email1",
            "firstName":"firstName1",
            "lastName":"lastName1",
            "birthDate":"birthDate1",
            "country":"country1",
            "city":"city1"
        }
        ...

    ],
    "currentPage":1,
    "totalCount":30
}

ActionBar 配置的例子


// actionBar 支持传入一个对象
actionBar: {
    "新增行": () => { // 点击回调
        me.refs.grid.addEmptyRow();
    },
    "编辑所有行": () => {
        me.refs.grid.editAllRow();
    }
}

// 或者定制能力更加强大的数组
actionBar: [
    {
        title: '新增行', // 显示名称
        callback: () => { // 点击回调
            me.refs.grid.addEmptyRow();
        },
        render: (title) => { // 定制渲染
            return <Button>{title}</Button>
        }
    },
    {
        title: "编辑所有行",
        callback: () => {
            me.refs.grid.editAllRow();
        }
    },
    {
        title: "保存所有行",
        callback: () => {
            me.refs.grid.saveAllRow();
        }
    }

]

actions 配置的例子

[
  {
    title: '编辑', // 操作名称
    callback: (rowData) => { // 操作回调
      me.refs.grid.editRow(rowData);
    },
    mode: Constants.MODE.VIEW, // 非必要参数,只在何种模式下显示
  },
  {
    title: '保存',
    callback: (rowData) => {
      me.refs.grid.saveRow(rowData);
    },
    mode: Constants.MODE.EDIT,
    render: (title, rowData) =>  // 定制渲染
             `${title}1`,
  },
];

对于多行的支持

正常情况下,Table 中每个单元格按照一行缩略的方式展示,根据业务需要,有时可能需要展示多行,对此,Table 通过 prop addRowClassName 配合专属类名 multiline 来实现。示例如下:

addRowClassName: function(rowData) {
    return 'multiline';
}

需要注意:当配置为 multiline 时,用户需自己处理上下间距的问题,处理的方式应为在 multiline 或其他专属类名作用域下进行设置,避免影响其他非 multiline 设置的行。