dojo------gridx的使用

時間 2019-11-18

標籤 dojo gridx 使用欄目 Dojo 简体版

原文原文鏈接

js的目錄結構(gridx從github，https://github.com/oria/gridx clone下來，把文件複製到項目裏)
依葫蘆畫瓢的事，仍是很好作的。這裏有封裝一個小小的PageStore

其實dojo數據交換的精髓都在store，掌握dojo的store就等於把學習dojo的難度下降了一半，無論大家信不信，反正我是沒掌握。。。html

代碼看下面，渣同樣的代碼，不喜勿噴。。
git

<body class="claro">
   <div data-dojo-type="dijit/layout/BorderContainer"
      data-dojo-props="liveSplitters: true, design: 'sidebar',style:'height:100%'">
      <div data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region: 'leading', splitter: true,style:'width:50%'">
         <div id="codeType_searchForm" data-dojo-id="codeType_searchForm"
            data-dojo-type="dijit/form/Form">
            <div data-dojo-type="dojox/layout/TableContainer"
               data-dojo-props="cols:3,labelWidth:100,customClass:'tableContainer-lable'">
               <input data-dojo-type="dijit/form/TextBox" title="類型編碼/名稱:"
                  name="typeCode">
            </div>
         </div>
         <div data-dojo-type="dijit/layout/ContentPane">
            <button data-dojo-id="btn_search_codeType" id="btn_search_codeType"
               data-dojo-type="dojox/form/BusyButton"
               data-dojo-props="busyLabel:'正在查詢...',
            iconClass:'dijitIconSearch'">查詢
            </button>
            <button data-dojo-id="btn_new_codeType" id="btn_new_codeType"
               data-dojo-props="iconClass:'dijitIconNewTask'"
               data-dojo-type="dijit/form/Button">新增</button>
         </div>
         <div data-dojo-id="codeType_grid" id="codeType_grid"
            data-dojo-props="
        cacheClass: 'gridx/core/model/cache/Async',
        pageSize: 10,
        autoLoad:true,
        store: dojoe.page.PageUtil.PageStore({
           target:'${ctx}/bas/codeType/list',
           queryButton : btn_search_codeType,
           queryConditionForm : codeType_searchForm,
           grid : 'codeType_grid'
        }),
        selectRowTriggerOnCell: true,
        structure: [
    { id: 'typeCode',field: 'typeCode', name: '類型編碼', width: 'auto'},
    { id: 'typeName',field: 'typeName', name: '類型名稱', width: 'auto'},
    { id: 'remark', field: 'remark', name: '備註', width: 'auto'}
        ],
        modules: [
            'gridx/modules/ColumnResizer', 
            'gridx/modules/extendedSelect/Row',
            'gridx/modules/SingleSort',
            'gridx/modules/Pagination',
            'gridx/modules/pagination/PaginationBar'
        ]"
            data-dojo-type='gridx/Grid'></div>
      </div>
      <div id="codeTypeEditDialog" data-dojo-id="codeTypeEditDialog"
         data-dojo-type="dijit/Dialog" title="新增字典類型">
         <div id="codeType_editForm" data-dojo-id="codeType_editForm"
            data-dojo-type="dijit/form/Form">
            <input data-dojo-type="dijit/form/TextBox" type="hidden" id="originalCodeTypeId" name="id">
            <div data-dojo-type="dojox/layout/TableContainer"
               data-dojo-props="cols:2,labelWidth:80,customClass:'tableContainer-lable'">
               <input data-dojo-type="dijit/form/ValidationTextBox"
                  data-dojo-props="required:'true'" name="typeCode" title="類型編碼:">
               <input data-dojo-type="dijit/form/ValidationTextBox"
                  data-dojo-props="required:'true'" name="typeName" title="類型名稱:">
               <input data-dojo-type="dijit/form/ValidationTextBox" name="remark"
                  title="備註:">
            </div>
         </div>
         <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button"
               data-dojo-id="btn_codeTypeConfirm" type="button">肯定</button>
            <button data-dojo-type="dijit/form/Button" type="button"
               data-dojo-props="onClick:function(){codeTypeEditDialog.hide();}">取消
            </button>
         </div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center',splitter: true">
         <div id="code_searchForm" data-dojo-id="codeDef_searchForm"
            data-dojo-type="dijit/form/Form">
            <div data-dojo-type="dojox/layout/TableContainer"
               data-dojo-props="cols:3,labelWidth:100,customClass:'tableContainer-lable'">
               <div data-dojo-type="dijit/form/TextBox" title="類型編碼/名稱:"></div>
            </div>
         </div>
         <div data-dojo-type="dijit/layout/ContentPane">
            <button data-dojo-id="btn_new_codeDef" id="btn_new_codeDef"
               data-dojo-props="iconClass:'dijitIconNewTask'"
               data-dojo-type="dijit/form/Button">新增</button>
         </div>
         <div data-dojo-id="codeDef_grid" id="codeDef_grid"
            data-dojo-props="
        cacheClass: 'gridx/core/model/cache/Async',
        store: dojoe.page.PageUtil.PageStore({
           target:'${ctx}/bas/codeDef/list',
           queryConditionForm : codeDef_searchForm,
           grid : 'codeDef_grid'
        }),
        autoLoad:false,
        selectRowTriggerOnCell: true,
        structure: [
    { id: 'codeValue', field: 'codeValue', name: '編碼值', width: 'auto'},
    { id: 'displayValueCn', field: 'displayValueCn', name: '顯示值', width: 'auto'},
    { id: 'remark', field: 'remark', name: '備註', width: 'auto'}
        ],
        modules: [
            'gridx/modules/ColumnResizer', 
            'gridx/modules/extendedSelect/Row',
            'gridx/modules/SingleSort',
            'gridx/modules/Pagination',
            'gridx/modules/pagination/PaginationBar'
        ]"
            data-dojo-type='gridx/Grid'></div>
      </div>
   </div>

js代碼
github

require([ "dojox/layout/TableContainer",
      "dojoe/page/SimpleSingleTableController", "dijit/form/Form",
      'gridx/Grid', 'gridx/core/model/cache/Sync',
      'gridx/modules/ColumnResizer',
      'gridx/modules/extendedSelect/Row', 'gridx/modules/SingleSort',
      'gridx/modules/Pagination', 'gridx/modules/pagination/PaginationBar',
      "dojox/widget/DialogSimple",
      'gridx/modules/IndirectSelect', 'gridx/modules/RowHeader',
      "dijit/Dialog" ]);

require([ "dojo/parser", "dojo/dom", "dojo/on", "dojo/request", "dojo/json",
          "dojo/_base/lang",
      "dojo/domReady!" ], function(parser, dom, on, request, JSON,lang) {
   parser.parse();
   on(btn_new_codeType,'click', function(){
      codeType_editForm.reset();
      codeTypeEditDialog.set("title","新增字典類型");
      codeTypeEditDialog.show();
   });
   on(btn_codeTypeConfirm,'click', function(){
        if (codeType_editForm.validate()) {
            var id = dom.byId("originalCodeTypeId").value;
            var url = App.ctx+"/bas/codeType/create";
            if (id) {
                url = App.ctx+"/bas/codeType/"+id+"/update";
            }
            request.post(url, {
                data: codeType_editForm.get('value'),
                preventCache: true,
                handleAs:"json"
            }).then(function (result) {
                if (result.success) {
                    new dojox.widget.DialogSimple({
                       style: "width:200px", "title": "提示信息", content: "保存成功!"}
                    ).show();
                    codeTypeEditDialog.hide();
                }
            }, function (err) {
                new dojox.widget.DialogSimple({
                    style: "width:200px",
                    "title": "提示信息",
                    content: err.response.text
                }).show();
            });
        }
   });
   codeType_grid.connect(codeType_grid, 'onRowDblClick', function(evt) {
      codeTypeEditDialog.set("title","編輯字典類型");
      codeType_editForm.set('value',codeType_grid.row(evt.rowId).rawData());
      codeTypeEditDialog.show();
   });
   codeType_grid.connect(codeType_grid, 'onRowClick', function(evt) {
      codeDef_grid.model.store.setQueryCondition({
         "search_basCodeType.id_eq":evt.rowId
      });
      codeDef_grid.autoLoad=true;
      codeDef_grid.model.clearCache();
      codeDef_grid.body.refresh();
   });
});