//需要的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);
}
