//需要的js 样式css
<script src="./js/shCore.js" type="text/javascript"></script>
<script src="./js/shBrushJScript.js" type="text/javascript"></script>
<script src="./js/shBrushCss.js" type="text/javascript"></script>
<link href="./css/shCore.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.tree.js" type="text/javascript"></script>
<link href="./css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="./css/tree.css" rel="stylesheet" type="text/css" />
<link href="./css/page.css" rel="stylesheet" type="text/css" />
//以下是自己的wdtree 数据
<script type="text/javascript">
function createNode(){
var root = {
"id" : "0",
"text" : "所有",
"value" : "###",
"showcheck" : true, //是否显示check
complete : true, //尚不明确,如果你们有知道的还请告知一下
"isexpand" : true, //是否展开
"checkstate" : 0, //0 表示不勾选 1 表示勾选
"hasChildren" : true //是否有子菜单
};
var arr = [];
var arr1 = [];
var arr2 = [];
var arr3 = [];
var subarr1 = [];
var subarr2 = [];
var subarr3 = [];
var subarr=[];
//获取东单元的数据
<s:iterator value="dTreeList" var="dtree">
subarr1.push( {
"id" : "dTree"+"<s:property value="#dtree.address"/>",
"text" : "<s:property value="#dtree.address"/>",
"value" : "<s:property value="#dtree.houseno"/>"+"_1",
"showcheck" : true,
complete : true,
"isexpand" : false,
"checkstate" : 0,
"hasChildren" : false
});
</s:iterator>
//获取西单元的数据
<s:iterator value="xTreeList" var="xtree">
subarr2.push( {
"id" : "xTree"+"<s:property value="#xtree.address"/>",
"text" : "<s:property value="#xtree.address"/>",
"value" : "<s:property value="#xtree.houseno"/>"+"_2",
"showcheck" : true,
complete : true,
"isexpand" : false,
"checkstate" : 0,
"hasChildren" : false
});
</s:iterator>
//获取商铺的数据
<s:iterator value="spTreeList" var="sptree">
subarr3.push( {
"id" : "sTree"+"<s:property value="#sptree.address"/>",
"text" : "<s:property value="#sptree.address"/>",
"value" : "<s:property value="#sptree.houseno"/>"+"_3",
"showcheck" : true,
complete : true,
"isexpand" : false,
"checkstate" : 0,
"hasChildren" : false
});
</s:iterator>
//第一个子节点 东单元
arr1.push( {
"id" : "note1",
"text" : "东单元",
"value" : "1",
"showcheck" : true,
complete : true,
"isexpand" : "<s:property value="ddyisexpand"/>",
"checkstate" : 0,
"hasChildren" : true,
"ChildNodes" : subarr1
});
//第二个子节点 西单元
arr2.push( {
"id" : "note2",
"text" : "西单元",
"value" : "2",
"showcheck" : true,
complete : true,
"isexpand" : "<s:property value="xdyisexpand"/>",
"checkstate" : 0,
"hasChildren" : true,
"ChildNodes" : subarr2
});
//第三个子节点 商铺
arr3.push( {
"id" : "note3",
"text" : "商铺",
"value" : "3",
"showcheck" : true,
complete : true,
"isexpand" : "<s:property value="spisexpand"/>",
"checkstate" : 0,
"hasChildren" : true,
"ChildNodes" : subarr3
});
//将三个子节点进行合并 添加到根节点下面
arr=arr.concat(arr1,arr2,arr3);
root["ChildNodes"] = arr;
return root;
}
</script>
//html内容
<div class="demo">
<div style="border-bottom: #c3daf9 1px solid; border-left: #c3daf9 1px solid; width: 240px; height: 300px; overflow: auto; border-top: #c3daf9 1px solid; border-right: #c3daf9 1px solid;">
<div id="tree">
</div>
</div>
//html底部处理浏览器兼容,以及获取数据展示到id tree中
var userAgent = window.navigator.userAgent.toLowerCase();
$.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
$.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
$.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
function load() {
var treedata = [createNode()];
var o = { showcheck: true
//onnodeclick:function(item){alert(item.text);},
};
o.data = treedata;
$("#tree").treeview(o);
}
if( $.browser.msie6)
{
load();
}
else{
$(document).ready(load);
}
//获取wdtree数据
var allhousenoStr = ""; //初始化选择的所有value
var nodes = $("#tree").getTSNs(true);//获取所有的勾选节点,包括半勾选
$.each(nodes, function(i,value){
var id = value.value; //循环获取选择的树状图value的值
if(id!='###'){
allhousenoStr += i ==1 ? id : "," +id;
}
});
$("#allhouseno").val(allhousenoStr);
获取Checkbox选择中的元素
$("#showchecked").click(function(e){
var s=$("#tree").getCheckedNodes();
alert(s.join(","));
}
获取当前选中的元素
$("#showcurrent").click(function(e){
var s=$("#tree").getCurrentNode();
alert(s.text);
}