当前位置: 首页 > 工具软件 > wdTree > 使用案例 >

获取树状图wdTree的js数据

秦飞航
2023-12-01

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

 类似资料: