组件演示

[{"title":"列表页","id":"scene-list-demo-basic","tags":[],"filepath":"site/scene/list/demo/basic.md","directory":"scene/list/demo","filename":"basic","meta":{"title":"列表页","description":"\n","order":"0","filepath":"site/scene/list/demo/basic.md","filename":"basic","directory":"scene/list/demo","id":"scene-list-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\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 classnames = require('classnames');\nvar Form = require('uxcore-form');\nvar Button = require('uxcore-button');\nvar Table = require('uxcore-table');\nvar InputFormField = Form.InputFormField,\n FormRow = Form.FormRow,\n OtherFormField = Form.OtherFormField,\n DateFormField = Form.DateFormField,\n CascadeSelectFormField = Form.CascadeSelectFormField,\n SelectFormField = Form.SelectFormField,\n CheckboxGroupFormField = Form.CheckboxGroupFormField;\n\n\nvar Item = CheckboxGroupFormField.Item;\n\nvar casData = {\n length: 2,\n contents: [{\n value: 'a',\n text: 'A',\n contents: [{\n value: 'ab',\n text: 'AB'\n }, {\n value: 'ac',\n text: 'AC'\n }]\n }, {\n value: 'b',\n text: 'B',\n contents: [{\n value: 'ba',\n text: 'BA'\n }, {\n value: 'bc',\n text: 'BC'\n }]\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 showAdSearch: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'componentDidMount',\n value: function componentDidMount() {\n var me = this;\n $('.J_enter').on('keydown', function (e) {\n if (e.which == 13) {\n console.log(me.refs.form.getValues());\n }\n });\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n $('.J_enter').off('keydown');\n }\n }, {\n key: 'handleSearchClick',\n value: function handleSearchClick() {\n var me = this;\n me.setState({\n showAdSearch: !me.state.showAdSearch\n });\n }\n }, {\n key: 'handleSubmitClick',\n value: function handleSubmitClick() {\n var me = this;\n console.log(me.refs.form.getValues());\n }\n }, {\n key: 'handleResetClick',\n value: function handleResetClick() {\n var me = this;\n me.refs.form.resetValues();\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var columns = [{ dataKey: 'title', title: '标题', width: 200 }, { dataKey: 'money', title: '金额', width: 200, type: 'money', delimiter: ',' }, { dataKey: 'agent',\n title: '金融机构',\n width: 200,\n render: function render(cellData, rowData) {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'a',\n { href: 'javascript:;' },\n rowData.agent\n )\n );\n }\n }, { dataKey: 'person', title: '申请人', width: 100 }, { dataKey: 'date', title: '日期', width: 150 }];\n var renderProps = {\n height: 300,\n pageSize: 5,\n fetchUrl: 'http://eternalsky.me:8122/file/getDemo.jsonp',\n jsxcolumns: columns\n };\n return React.createElement(\n 'div',\n { className: 'pageDemo' },\n React.createElement(\n Form,\n { ref: 'form' },\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { className: 'J_enter', jsxplaceholder: '\\u8F93\\u5165 xxxx \\u8FDB\\u884C\\u67E5\\u8BE2', jsxshowLabel: false, jsxname: 'search' }),\n React.createElement(\n OtherFormField,\n { jsxflex: 2 },\n React.createElement(\n 'div',\n { className: 'demo-updown', onClick: me.handleSearchClick.bind(me) },\n React.createElement(\n 'a',\n { href: 'javascript:;' },\n '\\u9AD8\\u7EA7\\u67E5\\u8BE2'\n ),\n React.createElement('i', { className: classnames({\n 'kuma-icon': true,\n 'kuma-icon-title-up': me.state.showAdSearch,\n 'kuma-icon-title-down': !me.state.showAdSearch\n })\n })\n )\n )\n ),\n React.createElement(\n FormRow,\n { className: classnames({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(InputFormField, { jsxlabel: '\\u540D\\u79F0', jsxname: 'input1', className: 'input1' }),\n React.createElement(DateFormField, { jsxlabel: '\\u540D\\u79F0', jsxname: 'date1', jsxtype: 'cascade', style: {\n width: 100\n }\n }),\n React.createElement(CascadeSelectFormField, { className: 'select1', jsxlabel: '\\u540D\\u79F0', jsxname: 'select1', jsxdata: casData })\n ),\n React.createElement(\n FormRow,\n { className: classnames({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(SelectFormField, { className: 'select2',\n jsxfetchUrl: 'http://suggest.taobao.com/sug',\n dataType: 'jsonp',\n jsxmultiple: true,\n jsxname: 'select2',\n jsxlabel: '\\u540D\\u79F0',\n afterFetch: function afterFetch(obj) {\n var data = {};\n obj.result.forEach(function (item, index) {\n data[item[1]] = item[0];\n });\n console.log(data);\n return data;\n }\n }),\n React.createElement(SelectFormField, { className: 'select3',\n jsxshowSearch: false,\n jsxdata: {\n tm: '天猫',\n tb: '淘宝',\n xx: '信息平台'\n },\n jsxlabel: 'OU',\n jsxname: 'select3'\n }),\n React.createElement(\n CheckboxGroupFormField,\n { jsxlabel: '\\u540D\\u79F0', jsxname: 'check1' },\n React.createElement(Item, { value: '1', text: '\\u540D\\u79F0' }),\n React.createElement(Item, { value: '2', text: '\\u540D\\u79F0' }),\n React.createElement(Item, { value: '3', text: '\\u540D\\u79F0' })\n )\n ),\n React.createElement(\n FormRow,\n { className: classnames({\n 'f-dn': !me.state.showAdSearch\n })\n },\n React.createElement(\n OtherFormField,\n { className: 'button1' },\n React.createElement(\n Button,\n { type: 'primary', onClick: me.handleSubmitClick.bind(me) },\n '\\u63D0\\u4EA4'\n ),\n React.createElement(\n Button,\n { type: 'secondary', onClick: me.handleResetClick.bind(me) },\n '\\u91CD\\u7F6E'\n )\n )\n )\n ),\n React.createElement(Table, renderProps)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-list-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">const</span> classnames = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'classnames'</span>);\n<span class=\"hljs-keyword\">const</span> Form = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-form'</span>);\n<span class=\"hljs-keyword\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</span>);\n<span class=\"hljs-keyword\">const</span> Table = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-table'</span>);\n<span class=\"hljs-keyword\">const</span> {\n InputFormField,\n FormRow,\n OtherFormField,\n DateFormField,\n CascadeSelectFormField,\n SelectFormField,\n CheckboxGroupFormField,\n} = Form;\n\n<span class=\"hljs-keyword\">const</span> Item = CheckboxGroupFormField.Item;\n\n\n<span class=\"hljs-keyword\">const</span> casData = {\n length: <span class=\"hljs-number\">2</span>,\n contents: [\n {\n value: <span class=\"hljs-string\">'a'</span>,\n text: <span class=\"hljs-string\">'A'</span>,\n contents: [\n {\n value: <span class=\"hljs-string\">'ab'</span>,\n text: <span class=\"hljs-string\">'AB'</span>,\n },\n {\n value: <span class=\"hljs-string\">'ac'</span>,\n text: <span class=\"hljs-string\">'AC'</span>,\n },\n ],\n },\n {\n value: <span class=\"hljs-string\">'b'</span>,\n text: <span class=\"hljs-string\">'B'</span>,\n contents: [\n {\n value: <span class=\"hljs-string\">'ba'</span>,\n text: <span class=\"hljs-string\">'BA'</span>,\n },\n {\n value: <span class=\"hljs-string\">'bc'</span>,\n text: <span class=\"hljs-string\">'BC'</span>,\n },\n ],\n },\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 constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n showAdSearch: <span class=\"hljs-literal\">false</span>,\n };\n }\n\n componentDidMount() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n $(<span class=\"hljs-string\">'.J_enter'</span>).on(<span class=\"hljs-string\">'keydown'</span>, (e) =&gt; {\n <span class=\"hljs-keyword\">if</span> (e.which == <span class=\"hljs-number\">13</span>) {\n <span class=\"hljs-built_in\">console</span>.log(me.refs.form.getValues());\n }\n });\n }\n\n componentWillUnmount() {\n $(<span class=\"hljs-string\">'.J_enter'</span>).off(<span class=\"hljs-string\">'keydown'</span>);\n }\n\n handleSearchClick() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n me.setState({\n showAdSearch: !me.state.showAdSearch,\n });\n }\n\n handleSubmitClick() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-built_in\">console</span>.log(me.refs.form.getValues());\n }\n\n handleResetClick() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n me.refs.form.resetValues();\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\">'title'</span>, title: <span class=\"hljs-string\">'标题'</span>, width: <span class=\"hljs-number\">200</span> },\n { dataKey: <span class=\"hljs-string\">'money'</span>, title: <span class=\"hljs-string\">'金额'</span>, width: <span class=\"hljs-number\">200</span>, type: <span class=\"hljs-string\">'money'</span>, delimiter: <span class=\"hljs-string\">','</span> },\n { dataKey: <span class=\"hljs-string\">'agent'</span>,\n title: <span class=\"hljs-string\">'金融机构'</span>,\n width: <span class=\"hljs-number\">200</span>,\n render(cellData, rowData) {\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> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"javascript:;\"</span>&gt;</span>{rowData.agent}<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 { dataKey: <span class=\"hljs-string\">'person'</span>, title: <span class=\"hljs-string\">'申请人'</span>, width: <span class=\"hljs-number\">100</span> },\n { dataKey: <span class=\"hljs-string\">'date'</span>, title: <span class=\"hljs-string\">'日期'</span>, width: <span class=\"hljs-number\">150</span> },\n ];\n <span class=\"hljs-keyword\">const</span> renderProps = {\n height: <span class=\"hljs-number\">300</span>,\n pageSize: <span class=\"hljs-number\">5</span>,\n fetchUrl: <span class=\"hljs-string\">'http://eternalsky.me:8122/file/getDemo.jsonp'</span>,\n jsxcolumns: columns,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"pageDemo\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Form</span> <span class=\"hljs-attribute\">ref</span>=<span class=\"hljs-value\">\"form\"</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\">InputFormField</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"J_enter\"</span> <span class=\"hljs-attribute\">jsxplaceholder</span>=<span class=\"hljs-value\">\"输入 xxxx 进行查询\"</span> <span class=\"hljs-attribute\">jsxshowLabel</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"search\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">OtherFormField</span> <span class=\"hljs-attribute\">jsxflex</span>=<span class=\"hljs-value\">{2}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-updown\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{me.handleSearchClick.bind(me)}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"javascript:;\"</span>&gt;</span>高级查询<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">i</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{classnames({</span>\n '<span class=\"hljs-attribute\">kuma-icon</span>'<span class=\"hljs-attribute\">:</span> <span class=\"hljs-attribute\">true</span>,\n '<span class=\"hljs-attribute\">kuma-icon-title-up</span>'<span class=\"hljs-attribute\">:</span> <span class=\"hljs-attribute\">me.state.showAdSearch</span>,\n '<span class=\"hljs-attribute\">kuma-icon-title-down</span>'<span class=\"hljs-attribute\">:</span> !<span class=\"hljs-attribute\">me.state.showAdSearch</span>,\n })}\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">OtherFormField</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\">FormRow</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{classnames({</span>\n '<span class=\"hljs-attribute\">f-dn</span>'<span class=\"hljs-attribute\">:</span> !<span class=\"hljs-attribute\">me.state.showAdSearch</span>,\n })}\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">InputFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"名称\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"input1\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"input1\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">DateFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"名称\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"date1\"</span> <span class=\"hljs-attribute\">jsxtype</span>=<span class=\"hljs-value\">\"cascade\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">100</span>,\n }}\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CascadeSelectFormField</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"select1\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"名称\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"select1\"</span> <span class=\"hljs-attribute\">jsxdata</span>=<span class=\"hljs-value\">{casData}</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\">FormRow</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{classnames({</span>\n '<span class=\"hljs-attribute\">f-dn</span>'<span class=\"hljs-attribute\">:</span> !<span class=\"hljs-attribute\">me.state.showAdSearch</span>,\n })}\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SelectFormField</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"select2\"</span>\n <span class=\"hljs-attribute\">jsxfetchUrl</span>=<span class=\"hljs-value\">\"http://suggest.taobao.com/sug\"</span>\n <span class=\"hljs-attribute\">dataType</span>=<span class=\"hljs-value\">\"jsonp\"</span>\n <span class=\"hljs-attribute\">jsxmultiple</span>\n <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"select2\"</span>\n <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"名称\"</span>\n <span class=\"hljs-attribute\">afterFetch</span>=<span class=\"hljs-value\">{(obj)</span> =&gt;</span> {\n const data = {};\n obj.result.forEach((item, index) =&gt; {\n data[item[1]] = item[0];\n });\n console.log(data);\n return data;\n }}\n /&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SelectFormField</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"select3\"</span>\n <span class=\"hljs-attribute\">jsxshowSearch</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">jsxdata</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">tm:</span> '天猫',\n <span class=\"hljs-attribute\">tb:</span> '淘宝',\n <span class=\"hljs-attribute\">xx:</span> '信息平台',\n }}\n <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"OU\"</span>\n <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"select3\"</span>\n /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CheckboxGroupFormField</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"名称\"</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"check1\"</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\">\"1\"</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\">\"2\"</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\">\"3\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"名称\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">CheckboxGroupFormField</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\">FormRow</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{classnames({</span>\n '<span class=\"hljs-attribute\">f-dn</span>'<span class=\"hljs-attribute\">:</span> !<span class=\"hljs-attribute\">me.state.showAdSearch</span>,\n })}\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">OtherFormField</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"button1\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{me.handleSubmitClick.bind(me)}</span>&gt;</span>提交<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{me.handleResetClick.bind(me)}</span>&gt;</span>重置<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">OtherFormField</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(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('scene-list-demo-basic'));\n\n/* JS END CSS START*/</span></code></pre></div><style type=\"text/css\">.f-dn {\n display: none;\n}\n.pageDemo {\n width: 1000px;\n margin: 0 auto;\n background: white;\n min-height: 600px;\n}\n.pageDemo .demo-updown {\n margin: 12px 0 0 15px;\n}\n.pageDemo .select1 .kuma-select2 {\n width: 120px;\n}\n.pageDemo .button1 {\n padding-left: 44px;\n}\n.pageDemo .button1 .kuma-button {\n margin-right: 10px;\n}\n.pageDemo .kuma-uxform-row .kuma-uxform-field.kuma-cascade-date-uxform-field .kuma-calendar-picker-input {\n width: 120px;\n}\n\n.pageDemo .kuma-label {\n width: 60px;\n}\n\n.pageDemo .input1 .kuma-label,\n.pageDemo .select2 .kuma-label {\n width: 46px;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.f-dn</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> none</span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1000px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0</span> auto</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">background</span>:<span class=\"hljs-value\"> white</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">min-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">600px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.demo-updown</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">12px</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-number\">15px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.select1</span> <span class=\"hljs-class\">.kuma-select2</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">120px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.button1</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">padding-left</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">44px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.button1</span> <span class=\"hljs-class\">.kuma-button</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-right</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">10px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.kuma-uxform-row</span> <span class=\"hljs-class\">.kuma-uxform-field</span><span class=\"hljs-class\">.kuma-cascade-date-uxform-field</span> <span class=\"hljs-class\">.kuma-calendar-picker-input</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">120px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.kuma-label</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">60px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.input1</span> <span class=\"hljs-class\">.kuma-label</span>,\n<span class=\"hljs-class\">.pageDemo</span> <span class=\"hljs-class\">.select2</span> <span class=\"hljs-class\">.kuma-label</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">46px</span></span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""}]
const classnames = require('classnames');
const Form = require('uxcore-form');
const Button = require('uxcore-button');
const Table = require('uxcore-table');
const {
    InputFormField,
    FormRow,
    OtherFormField,
    DateFormField,
    CascadeSelectFormField,
    SelectFormField,
    CheckboxGroupFormField,
} = Form;

const Item = CheckboxGroupFormField.Item;


const casData = {
  length: 2,
  contents: [
    {
      value: 'a',
      text: 'A',
      contents: [
        {
          value: 'ab',
          text: 'AB',
        },
        {
          value: 'ac',
          text: 'AC',
        },
      ],
    },
    {
      value: 'b',
      text: 'B',
      contents: [
        {
          value: 'ba',
          text: 'BA',
        },
        {
          value: 'bc',
          text: 'BC',
        },
      ],
    },
  ],
};


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

  componentDidMount() {
    const me = this;
    $('.J_enter').on('keydown', (e) => {
      if (e.which == 13) {
        console.log(me.refs.form.getValues());
      }
    });
  }

  componentWillUnmount() {
    $('.J_enter').off('keydown');
  }

  handleSearchClick() {
    const me = this;
    me.setState({
      showAdSearch: !me.state.showAdSearch,
    });
  }

  handleSubmitClick() {
    const me = this;
    console.log(me.refs.form.getValues());
  }

  handleResetClick() {
    const me = this;
    me.refs.form.resetValues();
  }

  render() {
    const me = this;
    const columns = [
            { dataKey: 'title', title: '标题', width: 200 },
            { dataKey: 'money', title: '金额', width: 200, type: 'money', delimiter: ',' },
      { dataKey: 'agent',
        title: '金融机构',
        width: 200,
        render(cellData, rowData) {
          return <div><a href="javascript:;">{rowData.agent}</a></div>;
        } },
            { dataKey: 'person', title: '申请人', width: 100 },
            { dataKey: 'date', title: '日期', width: 150 },
    ];
    const renderProps = {
      height: 300,
      pageSize: 5,
      fetchUrl: 'http://eternalsky.me:8122/file/getDemo.jsonp',
      jsxcolumns: columns,
    };
    return (
      <div className="pageDemo">
        <Form ref="form">
          <FormRow>
            <InputFormField className="J_enter" jsxplaceholder="输入 xxxx 进行查询" jsxshowLabel={false} jsxname="search" />
            <OtherFormField jsxflex={2}>
              <div className="demo-updown" onClick={me.handleSearchClick.bind(me)}>
                <a href="javascript:;">高级查询</a><i className={classnames({
                  'kuma-icon': true,
                  'kuma-icon-title-up': me.state.showAdSearch,
                  'kuma-icon-title-down': !me.state.showAdSearch,
                })}
                 />
              </div>
            </OtherFormField>
          </FormRow>
          <FormRow className={classnames({
            'f-dn': !me.state.showAdSearch,
          })}
          >
            <InputFormField jsxlabel="名称" jsxname="input1" className="input1" />
            <DateFormField jsxlabel="名称" jsxname="date1" jsxtype="cascade" style={{
              width: 100,
            }}
            />
            <CascadeSelectFormField className="select1" jsxlabel="名称" jsxname="select1" jsxdata={casData} />
          </FormRow>
          <FormRow className={classnames({
            'f-dn': !me.state.showAdSearch,
          })}
          >
            <SelectFormField className="select2"
              jsxfetchUrl="http://suggest.taobao.com/sug"
              dataType="jsonp"
              jsxmultiple
              jsxname="select2"
              jsxlabel="名称"
              afterFetch={(obj) => {
                const data = {};
                obj.result.forEach((item, index) => {
                  data[item[1]] = item[0];
                });
                console.log(data);
                return data;
              }}
            />
            <SelectFormField className="select3"
              jsxshowSearch={false}
              jsxdata={{
                tm: '天猫',
                tb: '淘宝',
                xx: '信息平台',
              }}
              jsxlabel="OU"
              jsxname="select3"
            />
            <CheckboxGroupFormField jsxlabel="名称" jsxname="check1">
              <Item value="1" text="名称" />
              <Item value="2" text="名称" />
              <Item value="3" text="名称" />
            </CheckboxGroupFormField>
          </FormRow>
          <FormRow className={classnames({
            'f-dn': !me.state.showAdSearch,
          })}
          >
            <OtherFormField className="button1">
              <Button type="primary" onClick={me.handleSubmitClick.bind(me)}>提交</Button>
              <Button type="secondary" onClick={me.handleResetClick.bind(me)}>重置</Button>
            </OtherFormField>
          </FormRow>
        </Form>
        <Table {...renderProps} />
      </div>
    );
  }
}

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

/* JS END CSS START*/
.f-dn {
  display: none;
}
.pageDemo {
  width: 1000px;
  margin: 0 auto;
  background: white;
  min-height: 600px;
}
.pageDemo .demo-updown {
  margin: 12px 0 0 15px;
}
.pageDemo .select1 .kuma-select2 {
  width: 120px;
}
.pageDemo .button1 {
  padding-left: 44px;
}
.pageDemo .button1 .kuma-button {
  margin-right: 10px;
}
.pageDemo .kuma-uxform-row .kuma-uxform-field.kuma-cascade-date-uxform-field .kuma-calendar-picker-input {
  width: 120px;
}

.pageDemo .kuma-label {
    width: 60px;
}

.pageDemo .input1 .kuma-label,
.pageDemo .select2 .kuma-label {
    width: 46px;
}

详细使用说明点此