自定义目录树的创建。
注意事项
采用拓展控件的加载方式,会导致目录树控件和拓展控件无法存在同一个页面中,我前面的文章已经描述过可以通过pop的方法,通过另外一个单独的页面可以加载目录树,效果是一样的,可能有些客户对这种加载方式不太满意,这里我根据网上的资料再编写一份在同一个网页中自定义一颗目录树,完全实现目录树的功能,前面简单的功能都有会,包括点击显示和隐藏图层,点击定位图层,其他的后续再添加,目前并没有很多时间来处理。
因为处理目录树的方法有限,根据Skyline API中现有的方法,很难处理的完美,这棵树是根据公司的显示要求定制的。
开发思路
- 判断对象,有文件夹,Layer,Object,且不同对象在判断方法中存在相同的属性和不可转换的特性,结合网上资料和经过N次测试所得。
- 获取第一个目录树的对象(Code:18)
- 判断该图层是否为Layer对象
- 做顶级目录大循环
- 获取到的目录对象进入递归方法
- 判断该图层是否为Layer对象,否则获取其下属集合中的第一个对象(Code:11)
- 循环判断返回对象不为空字符串
- 判断是否为组(Group)或Layer对象,满足其中一个条件,创建对象显示,则进入递归,否则直接创建对象显示
- 最后获取同级的下一个对象(Code:13)
- 特么的说到最后我自己都乱了。。。大家自己体会一下,懒得再描述了,然后还会用到异常处理来实现标签的创建。
- 目前该树的显示只有3层颜色,还有一些bug,后面再修复吧,目前用不到。
Jsp源码(这里只贴重要部分)
JavaScript部分
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<script src="${ctxStatic}/jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script type = "text/javascript" >
var SGWorld66;
var projectTreeFlag = true;
function init(){
var item = SGWorld66.ProjectTree.GetNextItem(SGWorld66.ProjectTree.RootID,18);
SGWorld66 = TerraExplorer.CreateInstance("TerraExplorerX.SGWorld66");
SGWorld66.Open("http://192.168.1.222:9090/20170330test/all.fly");
while(projectTreeFlag){
if(!SGWorld66.ProjectTree.IsLayer(item)){
var rootName = SGWorld66.ProjectTree.GetItemName(item);
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("checked",true);
//input
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "");
input.setAttribute("value", rootName);
input.setAttribute("style", "border-style:none;color:red;");
try{
var Object = SGWorld66.Creator.GetObject(item);
if(Object != null){
checkBox.setAttribute("id",Object.ID);
checkBox.setAttribute("value",Object.ID);
input.setAttribute("name", Object.ID);
}
} catch(e){}
//append
$("#tree").append(checkBox);
$("#tree").append(input);
$("#tree").append("<br/>");
}
diguiData2(item,1);//递归方法
item = SGWorld66.ProjectTree.GetNextItem(item,13);
if(null == item || "" == item){
projectTreeFlag = false;
}
}
//event-change
$('input:checkbox').change(function() {
var obj;
try{
obj = SGWorld66.ProjectTree.GetObject($(this).val());
if ($(this).eq(0).attr('checked') == undefined) {
SGWorld66.ProjectTree.SetVisibility(obj.ID,false);
} else {
SGWorld66.ProjectTree.SetVisibility(obj.ID,true);
}
} catch(e){}
//alert($(this).val());
//alert($(this).eq(0).attr('checked'));
});
//event-click
$('input:text').click(function() {
try{
var obj = SGWorld66.ProjectTree.GetObject($(this).attr('name'));
SGWorld66.Navigate.FlyTo(obj);
} catch(e){}
});
}
function diguiData2(parentNode){
//var itemName0 = SGWorld66.ProjectTree.GetItemName(parentNode);
//var isLayer0 = SGWorld66.ProjectTree.IsLayer(parentNode); //判断是否为单个对象
//var isGroup0 = SGWorld66.ProjectTree.IsGroup(parentNode);
//alert("当前:" + itemName0 + " /图层:" + isLayer0 + " /组:" + isGroup0);
if (SGWorld66.ProjectTree.IsLayer(parentNode)){ //Layer 单个对象
//var itemName0 = SGWorld66.ProjectTree.GetItemName(parentNode);
var rootName = SGWorld66.ProjectTree.GetItemName(parentNode);
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("checked",true);
//input
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "");
input.setAttribute("value", rootName);
input.setAttribute("style", "border-style:none;color:green;");
//append
$("#tree").append(checkBox);
$("#tree").append(input);
$("#tree").append("<br/>");
//alert(itemName0 + " layer:yes");
} else {
var node = SGWorld66.ProjectTree.GetNextItem(parentNode, 11); //查询下级对象Child
//var itemName = SGWorld66.ProjectTree.GetItemName(node);
//var isLayer = SGWorld66.ProjectTree.IsLayer(node); //判断是否为单个对象
//var isGroup = SGWorld66.ProjectTree.IsGroup(node);
//alert("子项" + itemName + " /图层:" + isLayer + " /组:" + isGroup);
while(node != ""){
if (SGWorld66.ProjectTree.IsGroup(node) || SGWorld66.ProjectTree.IsLayer(node)){
//alert(SGWorld66.ProjectTree.GetItemName(node));
var rootName = SGWorld66.ProjectTree.GetItemName(node);
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("checked",true);
//input
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "");
input.setAttribute("value", rootName);
input.setAttribute("style", "border-style:none;color:blue;");
try{
var Object = SGWorld66.Creator.GetObject(node);
if(Object != null){
checkBox.setAttribute("id",Object.ID);
checkBox.setAttribute("value",Object.ID);
input.setAttribute("name", Object.ID);
if(Object.ObjectType != 38){
input.setAttribute("style", "border-style:none;color:black;");
}
}
} catch(e){}
//append
$("#tree").append(checkBox);
$("#tree").append(input);
$("#tree").append("<br/>");
diguiData2(node);
}
else {
var Object = SGWorld66.Creator.GetObject(node);
if (Object != null) {
//alert(SGWorld66.ProjectTree.GetItemName(Object.ID));
var rootName = SGWorld66.ProjectTree.GetItemName(Object.ID);
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("checked",true);
checkBox.setAttribute("id",Object.ID);
checkBox.setAttribute("value",Object.ID);
//input
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "");
input.setAttribute("value", rootName);
input.setAttribute("style", "border-style:none;color:black;");
input.setAttribute("name", Object.ID);
//append
$("#tree").append(checkBox);
$("#tree").append(input);
$("#tree").append("<br/>");
}
}
node = SGWorld66.ProjectTree.GetNextItem(node, 13);
}
}
}
</script>
</head>
<body onload="init()">
<!--定义插件对象-->
<object id="TerraExplorer" classid="CLSID:3a4f9196-65a8-11d5-85c1-0001023952c1" width="80%" height="1000px" style="float: left;"></object>
<div id="tree">
</div>
</body>
</html>