动态创建zTree 树状列表,
根据checkBox的选中状态,
对图层中的点、线、面等要素进行显示或隐藏的操作。
在实际中,我将zTree构造为一个小部件。
详细代码如下:
define就是将要用到的模块引进来,function给define的模块分别起一个名字 ,。
define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/ready",
"dojo/_base/array",
"dojo/json",
"dojo/on",
"dojo/query",
"dojo/mouse",
"dojo/store/Memory",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/dom-style",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/registry",
"./_Widget",
"dojo/text!./templates/LayerzTree.html"
], function(
declare,
lang,
ready,
array,
JSON,
on,
query,
mouse,
Memory,
domClass,
domConstruct,
domStyle,
_Widget,
_TemplatedMixin,
registry,
_MyWidget,
template
)
{
var layertree = declare("widgets.LayerTree",[_MyWidget],{
templateString:template,
title:"图层管理",
constructor:function(/*Object*/params){
// this.inherited(arguments);
if(params == undefined){
return;
}
if ("map" in params) {
this.map = params.map;
}
if("mapServiceConfig" in params) {//mapServiceConfig 为json数据,是具体的点、线、面,就是从children
this.mapServiceConfig = params.mapServiceConfig;
this.mapServiceConfigStore = new Memory({data: this.mapServiceConfig})
}
if("dataConfigs" in params) { // dataConfigs 为另一组json数据,是父类,即点线面。
this.dataConfigs = params.dataConfigs;
}
},
postCreate: function() {
this.inherited("postCreate", arguments);
this._initTree(this.map,this.mapServiceConfig,this.dataConfigs); //调研_initTree方法,并传参
} ,
_initTree : function(map,mapServiceConfig,dataConfigs){
var zTreeObj;
var zTreeNodes=[];
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: "-1"
}
},
check: {
enable: true,
chkboxType: { "Y": "ps", "N": "ps" }
// Y属性定义checkbox被选中后的状态 //N属性定义checkbox取消选中后的状态 //p表示操作影响父级节点,s表示操作影响子级节点
},
callback:{
onCheck: zTreeOnCheck
}
};
var pid = "root"; //动态追加父节点,点线面
for(var i=0;i<dataConfigs.length;i++){
zTreeNodes.push({"name":dataConfigs[i].name,"id":dataConfigs[i].code, "pId":pid,checked:true});
}
for(var i=0;i<mapServiceConfig.length;i++){ //动态追加子节点,具体的点,具体的面等
zTreeNodes.push({"name":mapServiceConfig[i].description,"id":mapServiceConfig[i].id, "pId":mapServiceConfig[i].code,checked:true});
}
function zTreeOnCheck(event, treeId, treeNode) {
refreshLayers();
clearCheckedOldNodes();
};
//刷新图层的显示情况
function refreshLayers() {
var zTree = $.fn.zTree.getZTreeObj("layerZtree");
var changedNodes = zTree.getChangeCheckedNodes(); //获取状态改变的节点
if (changedNodes.length >1 ){
//如果改变状态节点的长度大于1,意味着选中的是父节点,,但操作是针对子节点
//所以从i = 1 开始循环操作
for ( var i=1 ; i < changedNodes.length ; i++ ){
//获取选中状态
var checkstatus = changedNodes[i].checked;
//获取图层id
var layerid = changedNodes[i].id;
//获取当前图层
var incidentLayer = map.getLayer(layerid);
//设置图层显示隐藏状态
incidentLayer.setVisibility(checkstatus);
}
}else if(changedNodes.length == 1){
//如果改变状态节点的长度等于1,意味着选中的是子节点,直接进行操作
var checkstatus = changedNodes[0].checked;
var layerid = changedNodes[0].id;
var incidentLayer = map.getLayer(layerid);
incidentLayer.setVisibility(checkstatus);
}
}
//清理善后工作
function clearCheckedOldNodes(){
var zTree = $.fn.zTree.getZTreeObj("layerZtree"),
nodes = zTree.getChangeCheckedNodes(false);
for (var i=0, l=nodes.length; i<l; i++) {
nodes[i].checkedOld = nodes[i].checked;
}
};
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#layerZtree"), setting, zTreeNodes);
zTreeObj.expandAll(false);
});
}
});
return layertree;});
別忘了在页面添加zTree的容器
<ul id="layerZtree" class="ztree"></ul>