组件演示

[{"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', title: \"金融机构\", width: 200, 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 } }, { 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 React.createElement(\n FormRow,\n { className: classnames({\n \"f-dn\": !me.state.showAdSearch\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 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 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 React.createElement(SelectFormField, { className: 'select3',\n jsxshowSearch: false,\n jsxdata: {\n \"tm\": \"天猫\",\n \"tb\": \"淘宝\",\n \"xx\": \"信息平台\"\n },\n jsxlabel: 'OU',\n jsxname: 'select3' }),\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 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\">var</span> classnames = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">\"classnames\"</span>);\n<span class=\"hljs-keyword\">var</span> Form = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-form'</span>);\n<span class=\"hljs-keyword\">var</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</span>);\n<span class=\"hljs-keyword\">var</span> Table = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-table'</span>);\n<span class=\"hljs-keyword\">var</span> {\n InputFormField,\n FormRow,\n OtherFormField,\n DateFormField,\n CascadeSelectFormField,\n SelectFormField,\n CheckboxGroupFormField\n} = Form;\n\n<span class=\"hljs-keyword\">var</span> Item = CheckboxGroupFormField.Item;\n\n\n<span class=\"hljs-keyword\">var</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\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\">var</span> me = <span class=\"hljs-keyword\">this</span>;\n $(<span class=\"hljs-string\">\".J_enter\"</span>).on(<span class=\"hljs-string\">\"keydown\"</span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\">e</span>) </span>{\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\">var</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\">var</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\">var</span> me = <span class=\"hljs-keyword\">this</span>;\n me.refs.form.resetValues();\n }\n\n render() {\n <span class=\"hljs-keyword\">var</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">var</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>, title: <span class=\"hljs-string\">\"金融机构\"</span>, width: <span class=\"hljs-number\">200</span>, render: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\">cellData, rowData</span>) </span>{\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>\n }}, \n { dataKey: 'person', title: \"申请人\", width: 100},\n { dataKey: 'date',title: \"日期\", width: 150}\n ];\n var renderProps = {\n height:300,\n pageSize: 5,\n fetchUrl:\"http://eternalsky.me:8122/file/getDemo.jsonp\",\n jsxcolumns: columns,\n };\n return (\n <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 })}&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">i</span>&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 })}&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 }}/&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 })}&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>=<span class=\"hljs-value\">{true}</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 let data = {};\n obj.result.forEach((item, index) =&gt; {\n data[item[1]] = item[0];\n });\n console.log(data);\n return data;\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>\"<span class=\"hljs-attribute\">:</span> \"天猫\",\n \"<span class=\"hljs-attribute\">tb</span>\"<span class=\"hljs-attribute\">:</span> \"淘宝\",\n \"<span class=\"hljs-attribute\">xx</span>\"<span class=\"hljs-attribute\">:</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>/&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 })}&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":""}]
var classnames = require("classnames");
var Form = require('uxcore-form');
var Button = require('uxcore-button');
var Table = require('uxcore-table');
var {
    InputFormField,
    FormRow,
    OtherFormField,
    DateFormField,
    CascadeSelectFormField,
    SelectFormField,
    CheckboxGroupFormField
} = Form;

var Item = CheckboxGroupFormField.Item;


var 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() {
        var me = this;
        $(".J_enter").on("keydown", function(e) {
            if (e.which == 13) {
                console.log(me.refs.form.getValues());
            }
        })
    }

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

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

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

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

    render() {
        var me = this;
        var columns = [
            { dataKey: 'title', title: '标题', width: 200},
            { dataKey: 'money', title: '金额', width: 200, type: 'money', delimiter: ","},
            { dataKey: 'agent', title: "金融机构", width: 200, render: function(cellData, rowData) {
                return <div><a href="javascript:;">{rowData.agent}</a></div>
            }},  
            { dataKey: 'person', title: "申请人", width: 100},
            { dataKey: 'date',title: "日期", width: 150}
        ];
        var 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
                                })}></i>
                            </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={true}
                                         jsxname="select2"
                                         jsxlabel="名称"
                                         afterFetch={(obj) => {
                                            let 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;
}

详细使用说明点此