树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂。dojo中提供了带复选框的树形部件CheckBoxTree,使用时只
树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂。dojo中提供了带复选框的树形部件CheckBoxTree,使用时只需创建对应的实例即可轻松实现此功能。
部件对应的html文件代码如下:
<div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style="width: 100px;height:200px"> <div dojoType="dijit.layout.ContentPane" region="center" style="height:180px;"> <div dojoAttachPoint="testTree" style></div> </div> </div> </div>
调用树形部件的js文件中需添加引用:
dojo.require("dojox.layout.ContentPane"); dojo.require("tmpdir.CheckBoxTree"); dojo.require("tmpdir.CheckBoxStoreModel"); dojo.require("dojo.data.ItemFileWriteStore");
调用过程为:
var data = {identifier: "id",label: "name",items: content};//节点已id为唯一标示,name为节点显示字段 //content为json对象,格式为[id:'id',name:'name',items:[]] var store = new dojo.data.ItemFileWriteStore({data: data}); var model = new tmpdir.CheckBoxStoreModel({ store: store, childrenAttrs: ["items"], query: { id: '*' } }); var tree = new tmpdir.CheckBoxTree({ model: model, showRoot: false,//是否显示根节点 persist: false,// openOnClick : true,//点击时是否打开树形 branchIcons : false,//父节点是否显示图形 nodeIcons: false,//子节点是否显示图形 autoExpand: true//加载后是否自动展开 }, this.testTree);