ztree树形展示

最近项目需要通过机构配置权限，通过实现checkbox多选按钮树形结构展示，获取选中节点值存入.properites文件完美解决~

处理.properites文件见下篇博客

需引入的js和css文件:

<link rel="stylesheet" href="${ctx}/pages/ztree/zTreeStyle.css" type="text/css"></link>

<script src="${ctx}/common/js/jquery-1.8.2.min.js"></script>
<script src="${ctx}/common/js/jquery.ztree.core-3.5.min.js"></script>
<script src="${ctx}/common/js/jquery.ztree.excheck-3.5.js"></script>

 //<script src="${ctx}/common/js/json2.js"></script>   向后端传的值转换为json数据需要引用的js

实现ztree必要的js和css下载连接：

http://download.csdn.net/download/zouzoutingtinging/10232604

实现代码：

<input id="powerValue" value={$powerValue} />

var zTree;

            var setting = {
                view: {
                  dblClickExpand: false,
                  showLine: true,
                  selectedMulti: false
                },
                check: {
            　　　　enable: true,     //true / false 分别表示 显示 / 不显示 复选框或单选框
            　　　　autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
            　　　　chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
            //Y 属性定义 checkbox 被勾选后的情况； 
//N 属性定义 checkbox 取消勾选后的情况； 
//"p" 表示操作会影响父级节点； 
 //"s" 表示操作会影响子级节点。
            　　　　chkboxType: { "Y": "s", "N": "s" }   //勾选 checkbox 对于父子节点的关联关系
            },
                data: {
                  simpleData: {
                      enable:true,
                      idKey: "id",
                      pIdKey: "pId",
                      rootPId: ""
                  }
              },
                callback: {
                  onCheck:onCheck,
                  beforeClick: function(treeId, treeNode) {
                      var zTree = $.fn.zTree.getZTreeObj("tree");
                      if (treeNode.isParent) {
                          zTree.expandNode(treeNode);
                          return false;
                      } else {
                          return true;
                      }
                  }
              }
          };
            $(document).ready(function(){
                $.ajax({
                    url: “/config/getConfigValue.do”                     //路径
                    type: 'POST', 
                    async: false, 
                    contentType:"application/json",
                    dataType: 'json',   
                    data:{
                   
            },
                    success: function (data) {                                    //后端传入的数据，成功调用后执行该函数
                    var zNodes = data.msg;
                    var t = $("#tree");
                        t = $.fn.zTree.init(t, setting, zNodes);             //三个参数，实现树形的展示
                   
                    },
                    error: function (xhr, textStatus,errorThrown) {     //失败后，调用的函数
alert("错误信息"+textStatus);
                    }
            });
            }); 

            

  //实现向后端传值,后端value值就行

            var nodeJson = [];
            var nodes = "";
            function onCheck(e,treeId,treeNode){
             var treeObj=$.fn.zTree.getZTreeObj("tree"),
             nodes=treeObj.getCheckedNodes(true),
             v="";
             for(var i=0;i<nodes.length;i++){
               v+=nodes[i].id + ",";
               alert(nodes[i].id);     //获取选中节点的值
             }
             nodes = JSON.stringify(nodeJson);
             $("#powerValue")[0].value= v;
            }
</script>