dojo------gridx的使用

  1. js的目录结构(gridx从github,https://github.com/oria/gridx clone下来,把文件复制到项目里)

    dojo------gridx的使用_第1张图片

  2. 依葫芦画瓢的事,还是很好做的。这里有封装一个小小的PageStore

    1. 其实dojo数据交换的精髓都在store,掌握dojo的store就等于把学习dojo的难度降低了一半,不管你们信不信,反正我是没掌握。。。

    2. 代码看下面,渣一样的代码,不喜勿喷。。

      <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>
    3. js代码

      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();
         });
      });
    4. 好像代码贴的多,讲的比较少?说实话,我就喜欢一个人静静的撸代码,表达能力有点弱。。。

    5. 看照,不知道大家有木有学习的兴趣。。。,反正我。。。MacType兼容越来越差了,看chrome渲染出来的字体,好多黑块

      dojo------gridx的使用_第2张图片

你可能感兴趣的:(dojo)