[{"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-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":"百分比布局 + 可调整列宽","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<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 columnResizeable: true,\n className: 'kuma-uxtable-border-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 columnResizeable: <span class=\"hljs-literal\">true</span>,\n className: <span class=\"hljs-string\">'kuma-uxtable-border-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":"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 _this2 = this;\n\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 order: true\n }, {\n title: '操作',\n type: 'action',\n rightFixed: true,\n width: '300px',\n collapseNum: 5,\n actions: [{\n title: '新增子行',\n callback: function callback(rowData) {\n _this2.table.addSubRowFromTop({\n \"country\": '\\u4E2D\\u56FD',\n \"city\": \"杭州\",\n \"firstName\": 'FirstName_' + setTimeout(0),\n \"lastName\": \"LastName\"\n }, rowData, function () {\n console.log(_this2.table.getData());\n });\n }\n }, {\n title: '删除',\n callback: function callback(rowData) {\n _this2.table.delRow(rowData);\n }\n }]\n }];\n\n var renderProps = {\n height: 400,\n // width: 800,\n showSearch: true,\n expandIconType: 'adderSubtractor',\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: function ref(c) {\n _this2.table = c;\n } }));\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 order: <span class=\"hljs-literal\">true</span>,\n },\n {\n title: <span class=\"hljs-string\">'操作'</span>,\n type: <span class=\"hljs-string\">'action'</span>,\n rightFixed: <span class=\"hljs-literal\">true</span>,\n width: <span class=\"hljs-string\">'300px'</span>,\n collapseNum: <span class=\"hljs-number\">5</span>,\n actions: [\n {\n title: <span class=\"hljs-string\">'新增子行'</span>,\n callback: (rowData) =&gt; {\n <span class=\"hljs-keyword\">this</span>.table.addSubRowFromTop({\n <span class=\"hljs-string\">\"country\"</span>: <span class=\"hljs-string\">`中国`</span>,\n <span class=\"hljs-string\">\"city\"</span>: <span class=\"hljs-string\">\"杭州\"</span>,\n <span class=\"hljs-string\">\"firstName\"</span>: <span class=\"hljs-string\">`FirstName_<span class=\"hljs-subst\">${setTimeout(0)}</span>`</span>,\n <span class=\"hljs-string\">\"lastName\"</span>: <span class=\"hljs-string\">\"LastName\"</span>,\n }, rowData, () =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-keyword\">this</span>.table.getData())\n })\n }\n },\n {\n title: <span class=\"hljs-string\">'删除'</span>,\n callback: (rowData) =&gt; {\n <span class=\"hljs-keyword\">this</span>.table.delRow(rowData);\n },\n }\n ],\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 expandIconType: <span class=\"hljs-string\">'adderSubtractor'</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\">{(c)</span> =&gt;</span> {this.table = 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-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 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 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 defaultRowGroupActiveKeys: 2,\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 defaultRowGroupActiveKeys: <span class=\"hljs-number\">2</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.items && rowGroupData.items.length && rowGroupData.items.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.items &amp;&amp; rowGroupData.items.length &amp;&amp; rowGroupData.items.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-actionbar","tags":[],"filepath":"site/components/table/demo/actionbar.md","directory":"components/table/demo","filename":"actionbar","meta":{"title":"顶部操作栏","description":"\n<p>顶部操作栏</p>\n","order":"14","filepath":"site/components/table/demo/actionbar.md","filename":"actionbar","directory":"components/table/demo","id":"components-table-demo-actionbar","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(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 columns: [{\n dataKey: 'firstName',\n title: React.createElement(\n 'span',\n null,\n '\\u81EA\\u5B9A\\u4E49\\u5217\\u5934'\n ),\n // fixed: true,\n // width: '15%',\n filters: [{\n text: 'Joe',\n value: 'Joe'\n }, {\n text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',\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 message: '这是一个提示',\n ordered: true\n }, {\n dataKey: 'lastName',\n title: 'LastName',\n message: 'nihao',\n isDisable: function isDisable() {\n return true;\n }\n // fixed: true,\n // rightFixed: true\n // width: '55%',\n }, {\n dataKey: 'email',\n title: 'Email',\n // width: '30%',\n ordered: true,\n message: 'sadfsdf\\nnsafdasdfasdf'\n }, {\n title: '操作1',\n width: '200px',\n type: 'action',\n // fixed: false,\n actions: [{\n title: 'click',\n callback: function callback() {},\n mode: 'edit'\n }, {\n title: '删除',\n callback: function callback() {},\n mode: 'view'\n }, {\n title: 'view',\n callback: function callback() {},\n mode: 'edit'\n }, {\n title: 'view',\n callback: function callback() {}\n }]\n }]\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var me = this;\n var columns = this.state.columns;\n // 通过 rowSelection 对象表明需要行选择\n\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 fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n var renderProps = {\n height: 400,\n pagerSizeOptions: [5, 10, 15, 20],\n useListActionBar: true,\n actionBar: {\n className: 'my-list-action-bar',\n // 是否显示全选\n showSelectAll: true,\n // 按钮配置\n buttons: [{\n title: 'Action Button',\n render: function render() {\n return React.createElement(\n _uxcore.Button,\n null,\n 'Button1'\n );\n },\n\n keepActiveInCustomView: false,\n callback: function callback() {\n console.log(me.table.getData());\n }\n }, {\n title: '按钮',\n keepActiveInCustomView: false,\n // size: 'large',\n type: 'primary',\n // className: 'xxxxx',\n callback: function callback() {\n me.table.selectAll(true);\n }\n }],\n // 文案提示\n actionBarTip: '已找到记录123条',\n // 自定义内容\n customBarItem: {\n render: function render() {\n return React.createElement(\n 'p',\n { style: { color: 'red' }, onClick: function onClick(e) {\n console.log(e);\n } },\n '\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9'\n );\n }\n },\n // 行排序\n rowOrder: {\n iconName: 'paixu-jiangxu',\n // keepActiveInCustomView: true,\n defaultValue: {\n text: '排序方式一',\n value: '123'\n },\n items: [{\n text: '排序方式一',\n value: '123'\n }, {\n text: '排序方式二',\n value: '456'\n }],\n onChange: function onChange(data) {\n console.log(data);\n }\n },\n // 列排序\n columnsOrder: {\n iconName: 'huxiangguanzhu',\n // keepActiveInCustomView: true,\n title: '列排序',\n includeActionColumn: false, // 优先级低于fixed和rightFixed\n onChange: function onChange(dragInfo, data) {\n console.log(data);\n }\n },\n // 列选择\n columnsPicker: {\n iconName: 'zidingyilie',\n title: '自定义列',\n keepActiveInCustomView: false,\n setPickerGroups: function setPickerGroups(columns) {\n return [{\n title: '分组1',\n columns: columns.filter(function (item, index) {\n return index >= 1;\n })\n }, {\n title: '分组2',\n columns: columns.filter(function (item, index) {\n return index <= 0;\n })\n }];\n },\n onChange: function onChange(data) {\n console.log(data);\n }\n },\n // 自定义视图，支持返回promise和component\n // customView: {\n // render(data, currentPage) {\n // console.log(data, currentPage);\n // // return (\n // // <Test name={'自定义的View'}/>\n // // )\n // return new Promise(function(resolve) {\n // setTimeout(() => {\n // resolve(<Test name={'自定义的View'}/>)\n // })\n // })\n // }\n // },\n // 是否显示翻页器\n showMiniPager: true,\n search: {\n // placeholder: '请输入搜索关键字',\n onSearch: function onSearch() {\n console.log(234234);\n }\n },\n // 在自定义视图下移出翻页器\n removePagerInCustomView: true,\n linkBar: [{\n title: '修改columns',\n callback: function callback() {\n _this2.setState({\n columns: _this2.state.columns.filter(function (item) {\n return item.title === 'LastName' || item.title === 'Email' || item.title === '操作1';\n })\n });\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({ ref: function ref(c) {\n _this2.table = c;\n } }, 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-actionbar'));})()</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-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 columns: [\n {\n dataKey: <span class=\"hljs-string\">'firstName'</span>,\n title: <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>自定义列头<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>,\n // fixed: true,\n // width: '15%',\n filters: [{\n text: 'Joe',\n value: 'Joe',\n }, {\n text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',\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 message: '这是一个提示',\n ordered: true,\n },\n\n {\n dataKey: 'lastName',\n title: 'LastName',\n message: 'nihao',\n isDisable: function() {\n return true\n },\n // fixed: true,\n // rightFixed: true\n // width: '55%',\n },\n {\n dataKey: 'email',\n title: 'Email',\n // width: '30%',\n ordered: true,\n message: `sadfsdf\\nnsafdasdfasdf`\n },\n {\n title: '操作1',\n width: '200px',\n type: 'action',\n // fixed: false,\n actions: [{\n title: 'click',\n callback: () =&gt; {\n },\n mode: 'edit',\n }, {\n title: '删除',\n callback: () =&gt; {\n },\n mode: 'view',\n }, {\n title: 'view',\n callback: () =&gt; { },\n mode: 'edit',\n }, {\n title: 'view',\n callback: () =&gt; { },\n }],\n },\n ]\n };\n }\n render() {\n const me = this;\n const { columns } = this.state\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 fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n const renderProps = {\n height: 400,\n pagerSizeOptions: [5, 10, 15, 20],\n useListActionBar: true,\n actionBar: {\n className: 'my-list-action-bar',\n // 是否显示全选\n showSelectAll: true,\n // 按钮配置\n buttons: [\n {\n title: 'Action Button',\n render() {\n return (\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>Button1<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n )</span>\n },\n keepActiveInCustomView: <span class=\"hljs-literal\">false</span>,\n callback: () =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(me.table.getData());\n },\n },\n {\n title: <span class=\"hljs-string\">'按钮'</span>,\n keepActiveInCustomView: <span class=\"hljs-literal\">false</span>,\n <span class=\"hljs-comment\">// size: 'large',</span>\n type: <span class=\"hljs-string\">'primary'</span>,\n <span class=\"hljs-comment\">// className: 'xxxxx',</span>\n callback: () =&gt; {\n me.table.selectAll(<span class=\"hljs-literal\">true</span>);\n }\n }\n ],\n <span class=\"hljs-comment\">// 文案提示</span>\n actionBarTip: <span class=\"hljs-string\">'已找到记录123条'</span>,\n <span class=\"hljs-comment\">// 自定义内容</span>\n customBarItem: {\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{color:</span> '<span class=\"hljs-attribute\">red</span>'}} <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{(e)</span> =&gt;</span> {console.log(e)}}&gt;自定义内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n )</span>\n }\n },\n <span class=\"hljs-comment\">// 行排序</span>\n rowOrder: {\n iconName: <span class=\"hljs-string\">'paixu-jiangxu'</span>,\n <span class=\"hljs-comment\">// keepActiveInCustomView: true,</span>\n defaultValue: {\n text: <span class=\"hljs-string\">'排序方式一'</span>,\n value: <span class=\"hljs-string\">'123'</span>\n },\n items: [\n {\n text: <span class=\"hljs-string\">'排序方式一'</span>,\n value: <span class=\"hljs-string\">'123'</span>\n },\n {\n text: <span class=\"hljs-string\">'排序方式二'</span>,\n value: <span class=\"hljs-string\">'456'</span>\n }\n ],\n onChange(data) {\n <span class=\"hljs-built_in\">console</span>.log(data)\n }\n },\n <span class=\"hljs-comment\">// 列排序</span>\n columnsOrder: {\n iconName: <span class=\"hljs-string\">'huxiangguanzhu'</span>,\n <span class=\"hljs-comment\">// keepActiveInCustomView: true,</span>\n title: <span class=\"hljs-string\">'列排序'</span>,\n includeActionColumn: <span class=\"hljs-literal\">false</span>, <span class=\"hljs-comment\">// 优先级低于fixed和rightFixed</span>\n onChange(dragInfo, data) {\n <span class=\"hljs-built_in\">console</span>.log(data)\n }\n },\n <span class=\"hljs-comment\">// 列选择</span>\n columnsPicker: {\n iconName: <span class=\"hljs-string\">'zidingyilie'</span>,\n title: <span class=\"hljs-string\">'自定义列'</span>,\n keepActiveInCustomView: <span class=\"hljs-literal\">false</span>,\n setPickerGroups(columns) {\n <span class=\"hljs-keyword\">return</span> [\n {\n title: <span class=\"hljs-string\">'分组1'</span>,\n columns: columns.filter((item, index) =&gt; {<span class=\"hljs-keyword\">return</span> index &gt;= <span class=\"hljs-number\">1</span>})\n },\n {\n title: <span class=\"hljs-string\">'分组2'</span>,\n columns: columns.filter((item, index) =&gt; {<span class=\"hljs-keyword\">return</span> index &lt;= <span class=\"hljs-number\">0</span>})\n }\n ]\n },\n onChange(data) {\n <span class=\"hljs-built_in\">console</span>.log(data)\n }\n },\n <span class=\"hljs-comment\">// 自定义视图，支持返回promise和component</span>\n <span class=\"hljs-comment\">// customView: {</span>\n <span class=\"hljs-comment\">// render(data, currentPage) {</span>\n <span class=\"hljs-comment\">// console.log(data, currentPage);</span>\n <span class=\"hljs-comment\">// // return (</span>\n <span class=\"hljs-comment\">// // &lt;Test name={'自定义的View'}/&gt;</span>\n <span class=\"hljs-comment\">// // )</span>\n <span class=\"hljs-comment\">// return new Promise(function(resolve) {</span>\n <span class=\"hljs-comment\">// setTimeout(() =&gt; {</span>\n <span class=\"hljs-comment\">// resolve(&lt;Test name={'自定义的View'}/&gt;)</span>\n <span class=\"hljs-comment\">// })</span>\n <span class=\"hljs-comment\">// })</span>\n <span class=\"hljs-comment\">// }</span>\n <span class=\"hljs-comment\">// },</span>\n <span class=\"hljs-comment\">// 是否显示翻页器</span>\n showMiniPager: <span class=\"hljs-literal\">true</span>,\n search: {\n <span class=\"hljs-comment\">// placeholder: '请输入搜索关键字',</span>\n onSearch() {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-number\">234234</span>)\n }\n },\n <span class=\"hljs-comment\">// 在自定义视图下移出翻页器</span>\n removePagerInCustomView: <span class=\"hljs-literal\">true</span>,\n linkBar: [\n {\n title: <span class=\"hljs-string\">'修改columns'</span>,\n callback: () =&gt; {\n <span class=\"hljs-keyword\">this</span>.setState({\n columns: <span class=\"hljs-keyword\">this</span>.state.columns.filter(item =&gt; {\n <span class=\"hljs-keyword\">return</span> item.title === <span class=\"hljs-string\">'LastName'</span>\n || item.title === <span class=\"hljs-string\">'Email'</span>\n || item.title === <span class=\"hljs-string\">'操作1'</span>\n })\n })\n },\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\">ref</span>=<span class=\"hljs-value\">{c</span> =&gt;</span> {this.table = c}} {...renderProps} className=\"kuma-uxtable-border-line\" /&gt;\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-actionbar'));</span></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'));

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 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'));

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() {},
      },
      columnResizeable: true,
      className: 'kuma-uxtable-border-line',
      fetchParams: {},
      showColumnPicker: false,
      fetchUrl,
      jsxcolumns: columns,
    };
    return (<Table {...renderProps} />);
  }
}

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

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,
        order: true,
      },
      {
        title: '操作',
        type: 'action',
        rightFixed: true,
        width: '300px',
        collapseNum: 5,
        actions: [
          {
            title: '新增子行',
            callback: (rowData) => {
              this.table.addSubRowFromTop({
                "country": `中国`,
                "city": "杭州",
                "firstName": `FirstName_${setTimeout(0)}`,
                "lastName": "LastName",
              }, rowData, () => {
                console.log(this.table.getData())
              })
            }
          },
          {
            title: '删除',
            callback: (rowData) => {
              this.table.delRow(rowData);
            },
          }
        ],
      },
    ];

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

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'));

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) => {
        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',
      defaultRowGroupActiveKeys: 2,
      showColumnPicker: true,
    };
    return (
      <Table {...tableProps} />
    );
  }
}

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

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

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

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;
};

class Demo extends React.Component {
  render() {
    const tableProps = {
      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%' },
      ],
      jsxdata: {
        data: mixArray(personData, companyData).map(item => ({ ...item, ...commonData })),
      },
      className: 'kuma-uxtable-split-line',
      rowGroupKey: 'company',
      footer: ({ data, column, from, rowGroupData = {} }) => {
        if (column.dataKey === 'title') {
          return '合计';
        }
        if (column.dataKey === 'money') {
          let total = 0;
          if (from === 'rowGroup') {
            rowGroupData.items && rowGroupData.items.length && rowGroupData.items.forEach((rowData) => {
              total += parseInt(rowData.money, 10);
            });
          } else {
            data.forEach((rowData) => {
              total += parseInt(rowData.money, 10);
            });
          }

          return Formatter.money(total.toString(), ',');
        }
        return null;
      },
      // width: 600,
      size: 'small',
      showRowGroupFooter: true,
      // height: 300,
    };
    return (
      <Table {...tableProps} />
    );
  }
}

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

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

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      text: 1,
      columns: [
        {
         dataKey: 'firstName',
         title: <span>自定义列头</span>,
         // fixed: true,
         // width: '15%',
         filters: [{
           text: 'Joe',
           value: 'Joe',
         }, {
           text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
           value: 'Jim',
         }, {
           text: 'Submenu',
           value: 'Submenu',
           children: [{
             text: 'Green',
             value: 'Green',
           }, {
             text: 'Black',
             value: 'Black',
           }],
         }],
         message: '这是一个提示',
         ordered: true,
        },

        {
         dataKey: 'lastName',
         title: 'LastName',
         message: 'nihao',
         isDisable: function() {
           return true
         },
         // fixed: true,
         // rightFixed: true
         // width: '55%',
        },
        {
         dataKey: 'email',
         title: 'Email',
         // width: '30%',
         ordered: true,
         message: `sadfsdf\nnsafdasdfasdf`
        },
        {
         title: '操作1',
         width: '200px',
         type: 'action',
         // fixed: false,
         actions: [{
           title: 'click',
           callback: () => {
           },
           mode: 'edit',
         }, {
           title: '删除',
           callback: () => {
           },
           mode: 'view',
         }, {
           title: 'view',
           callback: () => { },
           mode: 'edit',
         }, {
           title: 'view',
           callback: () => { },
         }],
        },
      ]
    };
  }
  render() {
    const me = this;
    const { columns } = this.state
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };
    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
    const renderProps = {
      height: 400,
      pagerSizeOptions: [5, 10, 15, 20],
      useListActionBar: true,
    actionBar: {
      className: 'my-list-action-bar',
      // 是否显示全选
      showSelectAll: true,
      // 按钮配置
      buttons: [
        {
          title: 'Action Button',
          render() {
            return (
              <Button>Button1</Button>
            )
          },
          keepActiveInCustomView: false,
          callback: () => {
            console.log(me.table.getData());
          },
        },
        {
          title: '按钮',
          keepActiveInCustomView: false,
          // size: 'large',
          type: 'primary',
          // className: 'xxxxx',
          callback: () => {
            me.table.selectAll(true);
          }
        }
      ],
      // 文案提示
      actionBarTip: '已找到记录123条',
      // 自定义内容
      customBarItem: {
        render() {
          return (
            <p style={{color: 'red'}} onClick={(e) => {console.log(e)}}>自定义内容</p>
          )
        }
      },
      // 行排序
      rowOrder: {
        iconName: 'paixu-jiangxu',
        // keepActiveInCustomView: true,
        defaultValue: {
          text: '排序方式一',
          value: '123'
        },
        items: [
          {
            text: '排序方式一',
            value: '123'
          },
          {
            text: '排序方式二',
            value: '456'
          }
        ],
        onChange(data) {
          console.log(data)
        }
      },
      // 列排序
      columnsOrder: {
        iconName: 'huxiangguanzhu',
        // keepActiveInCustomView: true,
        title: '列排序',
        includeActionColumn: false,  // 优先级低于fixed和rightFixed
        onChange(dragInfo, data) {
          console.log(data)
        }
      },
      // 列选择
      columnsPicker: {
        iconName: 'zidingyilie',
        title: '自定义列',
        keepActiveInCustomView: false,
        setPickerGroups(columns) {
          return [
            {
              title: '分组1',
              columns: columns.filter((item, index) => {return index >= 1})
            },
            {
              title: '分组2',
              columns: columns.filter((item, index) => {return index <= 0})
            }
          ]
        },
        onChange(data) {
          console.log(data)
        }
      },
      // 自定义视图，支持返回promise和component
      // customView: {
      //   render(data, currentPage) {
      //     console.log(data, currentPage);
      //     // return (
      //     //   <Test name={'自定义的View'}/>
      //     // )
      //     return new Promise(function(resolve) {
      //       setTimeout(() => {
      //         resolve(<Test name={'自定义的View'}/>)
      //       })
      //     })
      //   }
      // },
      // 是否显示翻页器
      showMiniPager: true,
      search: {
        // placeholder: '请输入搜索关键字',
        onSearch() {
          console.log(234234)
        }
      },
      // 在自定义视图下移出翻页器
      removePagerInCustomView: true,
      linkBar: [
        {
          title: '修改columns',
          callback: () => {
            this.setState({
              columns: this.state.columns.filter(item => {
                return item.title === 'LastName'
                  || item.title === 'Email'
                  || item.title === '操作1'
              })
            })
          },
        }
      ],
    },
      showSearch: false,
      showColumnPicker: true,
      fetchUrl,
      rowSelector: 'checkboxSelector',
      jsxcolumns: columns,
      rowSelection,
    };
    return (
      <div>
        <Table ref={c => {this.table = c}} {...renderProps} className="kuma-uxtable-border-line" />
      </div>
    );
  }
}

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

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'));

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>;
    } },
];

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 },
    ],
  },
];

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": ""
    }

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

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

// 当启用useListActionBar时，actionBar上的所有功能将在`actionBar`内配置完成
actionBar: {
    className: 'my-list-action-bar',
    // 是否显示行全选
    showSelectAll: true,
    // 按钮配置
    buttons: [
      {
        title: 'Action Button',
        render() {
          return (
            <Button type={'primary'}>切换子表格状态</Button>
          )
        },
        keepActiveInCustomView: false,
        callback: () => {
          this.forceUpdate();
          console.log(me.table.getData());
          me.table.toggleSubComp(me.table.getData().data.datas);
        },
      },
      {
        title: '按钮',
        keepActiveInCustomView: false,
        // size: 'large',
        type: 'primary',
        // className: 'xxxxx',
        callback: () => {
          me.table.selectAll(true);
        }
      }
    ],
    // 文案提示，支持function
    actionBarTip: '已经为您找到记录123条',
    // 自定义内容
    customBarItem: {
      render() {
        return (
          <p style={{color: 'red'}} onClick={(e) => {console.log(e)}}>自定义内容</p>
        )
      }
    },
    // 行排序
    rowOrder: {
      iconName: 'paixu-jiangxu',
      // keepActiveInCustomView: true,
      defaultValue: {
        text: '排序方式一',
        value: '123'
      },
      items: [
        {
          text: '排序方式一',
          value: '123'
        },
        {
          text: '排序方式二',
          value: '456'
        }
      ],
      onChange(data) {
        console.log(data)
      }
    },
    // 列排序
    columnsOrder: {
      iconName: 'huxiangguanzhu',
      // keepActiveInCustomView: true,
      title: '列排序',
      includeActionColumn: false,  // 优先级低于fixed和rightFixed
      onChange(dragInfo, data) {
        console.log(data)
      }
    },
    // 列选择
    columnsPicker: {
      iconName: 'zidingyilie',
      title: '自定义列',
      keepActiveInCustomView: true,
      onChange(data) {
        console.log(data)
      }
    },
    // 自定义视图，支持返回promise和component
    customView: {
      render(data, currentPage) {
        console.log(data, currentPage);
        // return (
        //   <Test name={'自定义的View'}/>
        // )
        return new Promise(function(resolve) {
          setTimeout(() => {
            resolve(<Test name={'自定义的View'}/>)
          })
        })
      }
    },
    // 是否显示迷你翻页器
    showMiniPager: true,
    // 搜索框
    search: {
      // placeholder: '请输入搜索关键字',
      onSearch() {
        console.log(234234)
      }
    },
    // 在自定义视图下移出翻页器
    removePagerInCustomView: true,
    // 超链接
    linkBar: [
      {
        title: '修改columns',
        callback: () => {
          this.setState({
            columns: this.state.columns.filter(item => {
              return item.title === 'LastName'
                || item.title === 'Email'
                || item.title === '操作1'
            })
          })
        },
      },
      {
        title: '操作外链二',
        callback: () => {
          alert(2);
        },
      },
    ],
}

----------以下为10.5.0之前的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();
        }
    }

]

[
  {
    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`,
  },
];

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