dojo------gridx的使用
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代码
githubrequire([ "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(); }); });好像代码贴的多，讲的比较少？说实话，我就喜欢一我的静静的撸代码，表达能力有点弱。。。
chrome看照，不知道你们有木有学习的兴趣。。。，反正我。。。MacType兼容愈来愈差了，看chrome渲染出来的字体，好多黑块json