使用 DOJO 开发定制小部件,第 2 部分: 使用通用的网格处理程序生成 DOJO DataGrid 组件
2010-05-18 00:00:00 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁诡垎鍐f寖闂佺娅曢幑鍥灳閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡欏嚬缂併劎绮妵鍕箳鐎n亞浠鹃梺闈涙搐鐎氫即鐛崶顒夋晬婵絾瀵ч幑鍥蓟閻斿摜鐟归柛顭戝枛椤牆顪冮妶搴′簼缂侇喗鎸搁悾鐑藉础閻愬秵妫冮崺鈧い鎺戝瀹撲礁鈹戦悩鎻掝伀缁惧彞绮欓弻娑氫沪閹规劕顥濋梺閫炲苯澧伴柟铏崌閿濈偛鈹戠€n€晠鏌嶆潪鎷屽厡闁汇倕鎳愮槐鎾存媴閸撴彃鍓卞銈嗗灦閻熲晛鐣烽妷褉鍋撻敐搴℃灍闁绘挻娲橀妵鍕箛闂堟稐绨肩紓浣藉煐濮樸劎妲愰幘璇茬闁冲搫鍊婚ˇ鏉库攽椤旂》宸ユい顓炲槻閻g兘骞掗幋鏃€鐎婚梺瑙勬儗閸樺€熲叺婵犵數濮烽弫鍛婃叏椤撱垹纾婚柟鍓х帛閳锋垶銇勯幒鍡椾壕缂備礁顦遍弫濠氱嵁閸℃稒鍊烽柛婵嗗椤旀劕鈹戦悜鍥╃У闁告挻鐟︽穱濠囨嚃閳哄啰锛滈梺褰掑亰閸欏骸鈻撳⿰鍫熺厸閻忕偟纭堕崑鎾诲箛娴e憡鍊梺纭呭亹鐞涖儵鍩€椤掑啫鐨洪柡浣圭墪閳规垿鎮欓弶鎴犱桓闂佸湱枪閹芥粎鍒掗弮鍫熷仺缂佸顕抽敃鍌涚厱闁哄洢鍔岄悘鐘绘煕閹般劌浜惧┑锛勫亼閸婃牠宕濋敃鈧…鍧楀焵椤掍胶绠剧€光偓婵犱線鍋楀┑顔硷龚濞咃絿妲愰幒鎳崇喓鎷犻懠鑸垫毐闂傚倷鑳舵灙婵炲鍏樺顐ゆ嫚瀹割喖娈ㄦ繝鐢靛У绾板秹寮查幓鎺濈唵閻犺櫣灏ㄥ銉р偓瑙勬尭濡繂顫忛搹鍦<婵☆垰鎼~宥囩磽娴i鍔嶉柟绋垮暱閻g兘骞嬮敃鈧粻濠氭偣閸パ冪骇鐎规挸绉撮—鍐Χ閸℃ê闉嶇紓浣割儐閸ㄥ墎绮嬪澶嬪€锋い鎺嶇瀵灝鈹戦埥鍡楃仯闁告鍕洸濡わ絽鍟崐鍨叏濡厧浜鹃悗姘炬嫹

DojoPagingTable.js:处理分页功能的分页表 Javascript 类。
pagingTable.html:分页表小部件使用的 HTML 模板文件;它包含用于放置按钮的 div 标记,这些按钮可以导航至不同的页面。
gridView.html:包含 HTML markup 的 HTML 模板文件;它包含有应在其中放置网格和分页表的 div 标记。
定义网格布局
生成 Dojo DataGrid 的第一步是定义网格布局。布局信息包括想要放置在网格中的列,还有一些附加信息,如格式信息、列分组、列宽等等。
图 1 是 Business Space 示例屏幕,显示的是使用 DojoGridHandler 生成的 DataGrid。
图 1. 使用 DojoGridHandler 生成的 DataGrid
查看原图(大图)
我们将演示如何编写生成上例布局信息的 JSON 文件,但我们将首先描述网格处理程序如何实际生成 Dojo DataGrid 小部件。
Dojo 网格处理程序工作原理
DojoGridHandler 类在 createGrid( ) 方法中加载包含布局信息的 JSON 文件,如清单 1 所示。
清单 1. createGrid( ) 方法
createGrid : function(thisVar,gridHeadersURL,gridComponentId,gridDisplayDivId,
pagingDivId,onCellClickMethodName)
{
this.gridComponentId=thisVar.iContext.widgetId+gridComponentId;
this.pagingDivId=thisVar.iContext.widgetId+pagingDivId;
this.thisVar = thisVar;
var req = { url:gridHeadersURL,
handleAs: "json",
sync:true,
load: dojo.hitch(this, function(data){
this._gridHeadersURLDef(data,gridDisplayDivId,onCellClickMethodName); }),
error: dojo.hitch(this, this._gridHeadersURLDefError)
};
dojo.xhrGet(req);
}
更多精彩
赞助商链接