LazyTreeGrid的创建、菜单绑定和对菜单的限制
LazyTreeGrid的创建、菜单绑定和对菜单的限制
项目中需要用TreeGrid来显示比Tree更多的内容，因为TreeGrid相比Tree来说，不止是名字中多了一个Grid 那么简单，其实也差不多....
TreeGrid和Grid
TreeGrid可以算的上是Grid（多列字段显示）和Tree（强层级结构化）的组合，Grid是比较常用的组件，我们应用的时候，只需要提供layout（表格表头样式，根据指定的
field来显示store中data里面相应的字段值）和store（一般是用
dojo
.data.ItemFileWriteStore封装来的数据Object），通常给Grid指定了这两项主要参数即可。
由此，可以猜测，TreeGrid如何创建？
可参照DojoAPI-LazyTreeGrid： http://dojotoolkit.org/reference-guide/1.7/dojox/grid/LazyTreeGrid.html
在官方的Demo中，可以很清晰的看到，TreeGrid通过
dijit.tree.ForestStoreModel
来构造树的结构化数据，通过设置
childrenAttrs: ['children']就可以把数据中的父子筛选分开。
再模仿Grid，把layout设置一番，就可以了，可以根据业务需要进行设置，不一定每条数据（父或子）都有对应field的属性值，他们是一个集合关系。
如此，我们可以很清晰的看懂下面这段代码，无非就是TreeGrid较Tree有些方法不同的。
dojo.require("dojox.grid.LazyTreeGrid");dojo.require("dijit.tree.ForestStoreModel");dojo.require("dojo.data.ItemFileWriteStore");dojo.ready(function(){ /* set up data store */ var data = { identifier: 'name', label: 'name', items: [ { name:'Africa', type:'continent', children:[ { name:'Egypt', type:'country' }, { name:'Kenya', type:'country', children:[ { name:'Nairobi', type:'city', adults: 70400, popnum: 2940911 }, { name:'Mombasa', type:'city', adults: 294091, popnum: 707400 } ] }, { name:'Sudan', type:'country', children: { name:'Khartoum', type:'city', adults: 480293, popnum: 1200394 } } ] }, { name:'Asia', type:'continent', children:[ { name:'China', type:'country' }, { name:'India', type:'country' }, { name:'Russia', type:'country' }, { name:'Mongolia', type:'country' } ] }, { name:'Australia', type:'continent', population:'21 million', children: { name:'Commonwealth of Australia', type:'country', population:'21 million'} }, { name:'Europe', type:'continent', children:[ { name:'Germany', type:'country' }, { name:'France', type:'country' }, { name:'Spain', type:'country' }, { name:'Italy', type:'country' } ] }, { name:'North America', type:'continent', children:[ { name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', children:[ { name:'Mexico City', type:'city', adults: 120394, popnum: 19394839, population:'19 million', timezone:'-6 UTC'}, { name:'Guadalajara', type:'city', adults: 1934839, popnum: 4830293, population:'4 million', timezone:'-6 UTC' } ] }, { name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', children:[ { name:'Ottawa', type:'city', adults: 230493, popnum: 9382019, population:'0.9 million', timezone:'-5 UTC'}, { name:'Toronto', type:'city', adults: 932019, popnum: 2530493, population:'2.5 million', timezone:'-5 UTC' }] }, { name:'United States of America', type:'country' } ] }, { name:'South America', type:'continent', children:[ { name:'Brazil', type:'country', population:'186 million' }, { name:'Argentina', type:'country', population:'40 million' } ] } ] }; var store = new dojo.data.ItemFileWriteStore({data: data}); var model = new dijit.tree.ForestStoreModel({store: store, childrenAttrs: ['children']}); /* set up layout */ var layout = [ {name: 'Name', field: 'name', width: '30%'}, {name: 'Type', field: 'type', width: '30%'}, {name: 'Population', field: 'population', width: '20%'}, {name: 'Area', field: 'area', width: '20%'} ]; /* create a new grid: */ var grid = new dojox.grid.LazyTreeGrid({ id: 'grid', treeModel: model, structure: layout, rowSelector: '20px' }, document.createElement('div')); /* append the new grid to the div */ dojo.byId("gridDiv").appendChild(grid.domNode); /* Call startup() to render the grid */ grid.startup();});
给TreeGrid设置菜单项：
这个问题，在网络上查询了一些资料，没有很适合的方法。然而，仔细想想，不放按照上面那番设想，我们菜单项无非就是绑定domNode即可，当然TreeGrid也提供了一些setMenu的方法，有setHeadMenu（但不合适），也看到有说setContextMenu的，但是没有成功。
this.treeGridMenu.set("targetNodeIds",[this.treeGrid.domNode]);
this.treeGridMenu.bindDomNode(this.treeGrid.domNode);
console.dir(["treeGrid",this.treeGrid]);
var aspect = dojo["require"]("dojo.aspect");
aspect.before(this.treeGridMenu, "_openMyself", dojo.hitch(this,this.clickItemBeforeOpenMenu));
后来，找到
onCellContextMenu方法，通过重写这个方法，不但使得Menu可以正常renderer出来，而且借此拿到了selectedItem。
this._treeGrid.onCellContextMenu = function(e){
this.selection.select(e.rowIndex);
cellNode = e.cellNode;
console.dir(["onCellContextMenu",e,
"getSelected",this.selection.getSelected()]);
};
LazyTreeGrid和TreeGrid，无什么大区别。
- LazyTreeGrid must have a TreeModel, the TreeModel could be the dijit.tree.ForestStoreModel/dojox.grid.LazyTreeGridStoreModel, or a custom TreeModel that inherited from them.
- LazyTreeGrid structures does not contain “children” values for nested level rows.(See dojox.grid.TreeGrid - Structure Definition)
- LazyTreeGrid does not contain an aggregate row, and its formatters don’t handle negative rowIndex values.
- LazyTreeGrid formatters receive a level parameter. (See “Formatting” below)
- defaultOpen/openAtLevels/aggregate/itemAggregates do not be available any more.
- The getItem function only accept a row index.