dojo中创建包含节点复选框的树形(CheckBoxTree)

前端之家收集整理的这篇文章主要介绍了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);
原文链接:https://www.f2er.com/dojo/291063.html

猜你在找的Dojo相关文章