uxcore.js - React UI Component Set

组件演示

[{"title":"增删改查","id":"scene-crud-demo-basic","tags":[],"filepath":"site/scene/crud/demo/basic.md","directory":"scene/crud/demo","filename":"basic","meta":{"title":"增删改查","description":"\n","order":"0","filepath":"site/scene/crud/demo/basic.md","filename":"basic","directory":"scene/crud/demo","id":"scene-crud-demo-basic","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\nvar _objectAssign = require('object-assign');\n\nvar _objectAssign2 = _interopRequireDefault(_objectAssign);\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 * Uxcore 的文档站点为：http://uxco.re/\n * 这里包括了所有通用组件的使用说明。\n */\n\n\n/*\n * 讲解：从 Form 中取出 Form 的零件用以配置生成一个完整的 Form。\n * Form 的使用文档见：http://uxco.re/components/form/\n */\nvar FormRow = _uxcore.Form.FormRow,\n InputFormField = _uxcore.Form.InputFormField,\n OtherFormField = _uxcore.Form.OtherFormField,\n Validators = _uxcore.Form.Validators,\n ButtonGroupFormField = _uxcore.Form.ButtonGroupFormField,\n TableFormField = _uxcore.Form.TableFormField;\n\n/*\n * 讲解：object-assign 是一个非常实用的用于对象拷贝和扩展的函数\n * 详细说明见 https://www.npmjs.com/package/object-assign\n */\n\n;\n\n/*\n * 讲解：下面是 react 的生成一个类的方式，同样是使用了 ES6 语法\n * 他改变了原有的 JS 蹩脚的声明和继承类的方法，提供一种更加面向对象的声明方式\n * 详细说明见：http://es6.ruanyifeng.com/#docs/class\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 fetchParams: {},\n editShow: false,\n newShow: false,\n editValues: null\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleSearch',\n value: function handleSearch() {\n var me = this;\n var data = me.refs.searchForm.getValues();\n me.setState({\n fetchParams: data.values\n }, function () {\n me.refs.table.fetchData();\n });\n }\n }, {\n key: 'toggleShow',\n value: function toggleShow(key) {\n var me = this;\n var obj = {};\n obj[key] = !me.state[key];\n me.setState(obj);\n }\n }, {\n key: 'handleEditOk',\n value: function handleEditOk() {\n var me = this;\n var data = me.refs.editForm.getValues();\n if (data.pass) {\n $.ajax({\n url: 'http://eternalsky.me:8122/file/writeGrid.jsonp',\n dataType: 'jsonp',\n data: {\n data: data.values\n },\n success: function success(result) {\n if (result.success) {\n me.toggleShow('editShow');\n me.refs.table.fetchData();\n }\n }\n });\n }\n }\n }, {\n key: 'handleEditCancel',\n value: function handleEditCancel() {\n var me = this;\n me.refs.editForm.resetValues();\n me.toggleShow('editShow');\n }\n }, {\n key: 'handleNewOk',\n value: function handleNewOk() {\n var me = this;\n var data = me.refs.editForm.getValues();\n if (data.pass) {\n $.ajax({\n url: 'http://eternalsky.me:8122/file/addNewData.jsonp',\n dataType: 'jsonp',\n data: {\n data: {\n dicts: {\n datas: [data.values]\n }\n }\n },\n success: function success(result) {\n if (result.success) {\n me.toggleShow('newShow');\n me.refs.table.fetchData();\n me.refs.editForm.resetValues();\n }\n }\n });\n }\n }\n }, {\n key: 'handleNewCancel',\n value: function handleNewCancel() {\n var me = this;\n me.toggleShow('newShow');\n me.refs.editForm.resetValues();\n }\n }, {\n key: 'showEditDialog',\n value: function showEditDialog(rowData) {\n this.setState({\n editShow: true,\n editValues: rowData\n });\n }\n }, {\n key: 'showNewDialog',\n value: function showNewDialog() {\n this.setState({\n newShow: true,\n editValues: {}\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var columns = [{ dataKey: 'id', title: 'ID', width: 50, hidden: true }, { dataKey: 'country', title: '国家', width: 200, type: 'money', delimiter: ',' }, { dataKey: 'city', title: '城市', width: 150, ordered: true }, { dataKey: 'firstName', title: 'FristName' }, { dataKey: 'lastName', title: 'LastName' }, { dataKey: 'email', title: 'Email', width: 200 }, { dataKey: 'action1',\n title: '操作',\n width: 100,\n type: 'action',\n actions: {\n 编辑: function _(rowData, actions) {\n me.showEditDialog(rowData);\n }\n } }];\n\n var tableProps = {\n width: 1000,\n fetchUrl: 'http://eternalsky.me:8122/file/getGridJson.jsonp',\n jsxcolumns: columns,\n fetchParams: me.state.fetchParams,\n actionBar: {\n 新增: function _() {\n me.showNewDialog();\n },\n 删除: function _() {\n console.log(me.selected);\n }\n },\n rowSelection: {\n onSelect: function onSelect(record, selected, selectedRows) {\n me.selected = selectedRows;\n },\n onSelectAll: function onSelectAll(selected, selectedRows) {\n me.selected = selectedRows;\n }\n }\n };\n\n var form = React.createElement(\n _uxcore.Form,\n { className: 'demoForm', jsxvalues: me.state.editValues, ref: 'editForm' },\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { jsxlabel: '\\u56FD\\u5BB6', jsxname: 'country', jsxrules: { validator: Validators.isNotEmpty, errMsg: '非空' } }),\n React.createElement(InputFormField, { jsxname: 'id', jsxshow: false })\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { jsxlabel: '\\u57CE\\u5E02', jsxname: 'city', jsxrules: { validator: Validators.isNotEmpty, errMsg: '非空' } }),\n React.createElement(InputFormField, { jsxlabel: 'email', jsxname: 'email', jsxrules: [{ validator: Validators.isNotEmpty, errMsg: '非空' }, { validator: Validators.isEmail, errMsg: '请输入正确的 email 地址' }]\n })\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { jsxlabel: 'FirstName', jsxname: 'firstName', jsxrules: { validator: Validators.isNotEmpty, errMsg: '非空' } }),\n React.createElement(InputFormField, { jsxlabel: 'LastName', jsxname: 'lastName', jsxrules: { validator: Validators.isNotEmpty, errMsg: '非空' } })\n )\n );\n\n return React.createElement(\n 'div',\n { className: 'page-demo3' },\n React.createElement(\n 'h2',\n null,\n '\\u589E\\u5220\\u6539\\u67E5'\n ),\n React.createElement(\n _uxcore.Form,\n { ref: 'searchForm', className: 'searchForm' },\n React.createElement(\n FormRow,\n null,\n React.createElement(InputFormField, { jsxname: 'searchTxt', jsxshowLabel: false, jsxplaceholder: '\\u8F93\\u5165\\u5173\\u952E\\u5B57\\u8FDB\\u884C\\u67E5\\u8BE2' }),\n React.createElement(\n OtherFormField,\n { className: 'searchButton' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleSearch.bind(me) },\n '\\u67E5\\u8BE2'\n )\n )\n )\n ),\n React.createElement(_uxcore.Table, _extends({}, tableProps, { ref: 'table' })),\n React.createElement(\n _uxcore.Dialog,\n { ref: 'editDialog', width: 800, visible: me.state.editShow, title: '\\u6570\\u636E\\u7F16\\u8F91', onOk: me.handleEditOk.bind(me), onCancel: me.handleEditCancel.bind(me) },\n form\n ),\n React.createElement(\n _uxcore.Dialog,\n { ref: 'newDialog', width: 1000, visible: me.state.newShow, title: '\\u6570\\u636E\\u7F16\\u8F91', onOk: me.handleNewOk.bind(me), onCancel: me.handleNewCancel.bind(me) },\n form\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-crud-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n/*\n * 讲解：\n * Uxcore 的文档站点为：http://uxco.re/\n * 这里包括了所有通用组件的使用说明。\n */\nimport { Table } from 'uxcore';\nimport { Button } from 'uxcore';\nimport { Form } from 'uxcore';\nimport { Dialog } from 'uxcore';\n/*\n * 讲解：从 Form 中取出 Form 的零件用以配置生成一个完整的 Form。\n * Form 的使用文档见：http://uxco.re/components/form/\n */\nconst { FormRow, InputFormField, OtherFormField, Validators, ButtonGroupFormField, TableFormField } = Form;\n\n/*\n * 讲解：object-assign 是一个非常实用的用于对象拷贝和扩展的函数\n * 详细说明见 https://www.npmjs.com/package/object-assign\n */\nimport assign from 'object-assign';;\n\n\n/*\n * 讲解：下面是 react 的生成一个类的方式，同样是使用了 ES6 语法\n * 他改变了原有的 JS 蹩脚的声明和继承类的方法，提供一种更加面向对象的声明方式\n * 详细说明见：http://es6.ruanyifeng.com/#docs/class\n */\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n fetchParams: {},\n editShow: false,\n newShow: false,\n editValues: null,\n };\n }\n\n handleSearch() {\n const me = this;\n const data = me.refs.searchForm.getValues();\n me.setState({\n fetchParams: data.values,\n }, () => {\n me.refs.table.fetchData();\n });\n }\n\n toggleShow(key) {\n const me = this;\n const obj = {};\n obj[key] = !me.state[key];\n me.setState(obj);\n }\n\n handleEditOk() {\n const me = this;\n const data = me.refs.editForm.getValues();\n if (data.pass) {\n $.ajax({\n url: 'http://eternalsky.me:8122/file/writeGrid.jsonp',\n dataType: 'jsonp',\n data: {\n data: data.values,\n },\n success(result) {\n if (result.success) {\n me.toggleShow('editShow');\n me.refs.table.fetchData();\n }\n },\n });\n }\n }\n\n handleEditCancel() {\n const me = this;\n me.refs.editForm.resetValues();\n me.toggleShow('editShow');\n }\n\n handleNewOk() {\n const me = this;\n const data = me.refs.editForm.getValues();\n if (data.pass) {\n $.ajax({\n url: 'http://eternalsky.me:8122/file/addNewData.jsonp',\n dataType: 'jsonp',\n data: {\n data: {\n dicts: {\n datas: [data.values],\n },\n },\n },\n success(result) {\n if (result.success) {\n me.toggleShow('newShow');\n me.refs.table.fetchData();\n me.refs.editForm.resetValues();\n }\n },\n });\n }\n }\n\n handleNewCancel() {\n const me = this;\n me.toggleShow('newShow');\n me.refs.editForm.resetValues();\n }\n\n showEditDialog(rowData) {\n this.setState({\n editShow: true,\n editValues: rowData,\n });\n }\n\n showNewDialog() {\n this.setState({\n newShow: true,\n editValues: {},\n });\n }\n\n render() {\n const me = this;\n\n const columns = [\n { dataKey: 'id', title: 'ID', width: 50, hidden: true },\n { dataKey: 'country', title: '国家', width: 200, type: 'money', delimiter: ',' },\n { dataKey: 'city', title: '城市', width: 150, ordered: true },\n { dataKey: 'firstName', title: 'FristName' },\n { dataKey: 'lastName', title: 'LastName' },\n { dataKey: 'email', title: 'Email', width: 200 },\n { dataKey: 'action1',\n title: '操作',\n width: 100,\n type: 'action',\n actions: {\n 编辑(rowData, actions) {\n me.showEditDialog(rowData);\n },\n } },\n ];\n\n const tableProps = {\n width: 1000,\n fetchUrl: 'http://eternalsky.me:8122/file/getGridJson.jsonp',\n jsxcolumns: columns,\n fetchParams: me.state.fetchParams,\n actionBar: {\n 新增() {\n me.showNewDialog();\n },\n 删除() {\n console.log(me.selected);\n },\n },\n rowSelection: {\n onSelect(record, selected, selectedRows) {\n me.selected = selectedRows;\n },\n onSelectAll(selected, selectedRows) {\n me.selected = selectedRows;\n },\n },\n };\n\n const form = (<Form className=\"demoForm\" jsxvalues={me.state.editValues} ref=\"editForm\">\n <FormRow>\n <InputFormField jsxlabel=\"国家\" jsxname=\"country\" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />\n <InputFormField jsxname=\"id\" jsxshow={false} />\n </FormRow>\n <FormRow>\n <InputFormField jsxlabel=\"城市\" jsxname=\"city\" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />\n <InputFormField jsxlabel=\"email\" jsxname=\"email\" jsxrules={\n [\n { validator: Validators.isNotEmpty, errMsg: '非空' },\n { validator: Validators.isEmail, errMsg: '请输入正确的 email 地址' },\n ]\n }\n />\n </FormRow>\n <FormRow>\n <InputFormField jsxlabel=\"FirstName\" jsxname=\"firstName\" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />\n <InputFormField jsxlabel=\"LastName\" jsxname=\"lastName\" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />\n </FormRow>\n </Form>);\n\n return (\n <div className=\"page-demo3\">\n <h2>增删改查</h2>\n <Form ref=\"searchForm\" className=\"searchForm\">\n <FormRow>\n <InputFormField jsxname=\"searchTxt\" jsxshowLabel={false} jsxplaceholder=\"输入关键字进行查询\" />\n <OtherFormField className=\"searchButton\">\n <Button onClick={me.handleSearch.bind(me)}>查询</Button>\n </OtherFormField>\n </FormRow>\n </Form>\n <Table {...tableProps} ref=\"table\" />\n <Dialog ref=\"editDialog\" width={800} visible={me.state.editShow} title=\"数据编辑\" onOk={me.handleEditOk.bind(me)} onCancel={me.handleEditCancel.bind(me)}>\n {form}\n </Dialog>\n <Dialog ref=\"newDialog\" width={1000} visible={me.state.newShow} title=\"数据编辑\" onOk={me.handleNewOk.bind(me)} onCancel={me.handleNewCancel.bind(me)}>\n {form}\n </Dialog>\n </div>\n );\n }\n\n}\n\n\nReactDOM.render(\n <Demo />\n, document.getElementById('scene-crud-demo-basic'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.page-demo3 {\n margin-top: 20px;\n margin-left: 20px;\n}\n\n.searchForm {\n width: 1000px;\n}\n\n.searchButton {\n padding: 2px 0 0 10px;\n}\n\nh2 {\n font-size: 24px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.page-demo3 {\n margin-top: 20px;\n margin-left: 20px;\n}\n\n.searchForm {\n width: 1000px;\n}\n\n.searchButton {\n padding: 2px 0 0 10px;\n}\n\nh2 {\n font-size: 24px;\n}</code></pre></div>"},"status":"public","toc":""}]

增删改查


/*
 * 讲解：
 * Uxcore 的文档站点为：http://uxco.re/
 * 这里包括了所有通用组件的使用说明。
 */
import { Table } from 'uxcore';
import { Button } from 'uxcore';
import { Form } from 'uxcore';
import { Dialog } from 'uxcore';
/*
 * 讲解：从 Form 中取出 Form 的零件用以配置生成一个完整的 Form。
 * Form 的使用文档见：http://uxco.re/components/form/
 */
const { FormRow, InputFormField, OtherFormField, Validators, ButtonGroupFormField, TableFormField } = Form;

/*
 * 讲解：object-assign 是一个非常实用的用于对象拷贝和扩展的函数
 * 详细说明见 https://www.npmjs.com/package/object-assign
 */
import assign from 'object-assign';;


/*
 * 讲解：下面是 react 的生成一个类的方式，同样是使用了 ES6 语法
 * 他改变了原有的 JS 蹩脚的声明和继承类的方法，提供一种更加面向对象的声明方式
 * 详细说明见：http://es6.ruanyifeng.com/#docs/class
 */

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchParams: {},
      editShow: false,
      newShow: false,
      editValues: null,
    };
  }

  handleSearch() {
    const me = this;
    const data = me.refs.searchForm.getValues();
    me.setState({
      fetchParams: data.values,
    }, () => {
      me.refs.table.fetchData();
    });
  }

  toggleShow(key) {
    const me = this;
    const obj = {};
    obj[key] = !me.state[key];
    me.setState(obj);
  }

  handleEditOk() {
    const me = this;
    const data = me.refs.editForm.getValues();
    if (data.pass) {
      $.ajax({
        url: 'http://eternalsky.me:8122/file/writeGrid.jsonp',
        dataType: 'jsonp',
        data: {
          data: data.values,
        },
        success(result) {
          if (result.success) {
            me.toggleShow('editShow');
            me.refs.table.fetchData();
          }
        },
      });
    }
  }

  handleEditCancel() {
    const me = this;
    me.refs.editForm.resetValues();
    me.toggleShow('editShow');
  }

  handleNewOk() {
    const me = this;
    const data = me.refs.editForm.getValues();
    if (data.pass) {
      $.ajax({
        url: 'http://eternalsky.me:8122/file/addNewData.jsonp',
        dataType: 'jsonp',
        data: {
          data: {
            dicts: {
              datas: [data.values],
            },
          },
        },
        success(result) {
          if (result.success) {
            me.toggleShow('newShow');
            me.refs.table.fetchData();
            me.refs.editForm.resetValues();
          }
        },
      });
    }
  }

  handleNewCancel() {
    const me = this;
    me.toggleShow('newShow');
    me.refs.editForm.resetValues();
  }

  showEditDialog(rowData) {
    this.setState({
      editShow: true,
      editValues: rowData,
    });
  }

  showNewDialog() {
    this.setState({
      newShow: true,
      editValues: {},
    });
  }

  render() {
    const me = this;

    const columns = [
            { dataKey: 'id', title: 'ID', width: 50, hidden: true },
            { dataKey: 'country', title: '国家', width: 200, type: 'money', delimiter: ',' },
            { dataKey: 'city', title: '城市', width: 150, ordered: true },
            { dataKey: 'firstName', title: 'FristName' },
            { dataKey: 'lastName', title: 'LastName' },
            { dataKey: 'email', title: 'Email', width: 200 },
      { dataKey: 'action1',
        title: '操作',
        width: 100,
        type: 'action',
        actions: {
          编辑(rowData, actions) {
            me.showEditDialog(rowData);
          },
        } },
    ];

    const tableProps = {
      width: 1000,
      fetchUrl: 'http://eternalsky.me:8122/file/getGridJson.jsonp',
      jsxcolumns: columns,
      fetchParams: me.state.fetchParams,
      actionBar: {
        新增() {
          me.showNewDialog();
        },
        删除() {
          console.log(me.selected);
        },
      },
      rowSelection: {
        onSelect(record, selected, selectedRows) {
          me.selected = selectedRows;
        },
        onSelectAll(selected, selectedRows) {
          me.selected = selectedRows;
        },
      },
    };

    const form = (<Form className="demoForm" jsxvalues={me.state.editValues} ref="editForm">
      <FormRow>
        <InputFormField jsxlabel="国家" jsxname="country" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />
        <InputFormField jsxname="id" jsxshow={false} />
      </FormRow>
      <FormRow>
        <InputFormField jsxlabel="城市" jsxname="city" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />
        <InputFormField jsxlabel="email" jsxname="email" jsxrules={
        [
                            { validator: Validators.isNotEmpty, errMsg: '非空' },
                            { validator: Validators.isEmail, errMsg: '请输入正确的 email 地址' },
        ]
                    }
        />
      </FormRow>
      <FormRow>
        <InputFormField jsxlabel="FirstName" jsxname="firstName" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />
        <InputFormField jsxlabel="LastName" jsxname="lastName" jsxrules={{ validator: Validators.isNotEmpty, errMsg: '非空' }} />
      </FormRow>
    </Form>);

    return (
      <div className="page-demo3">
        <h2>增删改查</h2>
        <Form ref="searchForm" className="searchForm">
          <FormRow>
            <InputFormField jsxname="searchTxt" jsxshowLabel={false} jsxplaceholder="输入关键字进行查询" />
            <OtherFormField className="searchButton">
              <Button onClick={me.handleSearch.bind(me)}>查询</Button>
            </OtherFormField>
          </FormRow>
        </Form>
        <Table {...tableProps} ref="table" />
        <Dialog ref="editDialog" width={800} visible={me.state.editShow} title="数据编辑" onOk={me.handleEditOk.bind(me)} onCancel={me.handleEditCancel.bind(me)}>
          {form}
        </Dialog>
        <Dialog ref="newDialog" width={1000} visible={me.state.newShow} title="数据编辑" onOk={me.handleNewOk.bind(me)} onCancel={me.handleNewCancel.bind(me)}>
          {form}
        </Dialog>
      </div>
    );
  }

}


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

/* JS END CSS START*/

.page-demo3 {
    margin-top: 20px;
    margin-left: 20px;
}

.searchForm {
    width: 1000px;
}

.searchButton {
    padding: 2px 0 0 10px;
}

h2 {
    font-size: 24px;
}