js 树菜单 ztree

官网 api


js
  1. /**
  2. <div id="menuContent" class="menuContent" style=" position: absolute;">
  3. <ul id="orgTree" class="ztree" style="margin-top:0; width:160px;"></ul>
  4. </div>
  6.  */
  8.   
  10.   
  11.     //var allowClick = true; //标记节点是否能被点击
  12.    var sdorg={};
  14.     /**
  15.      * 初始化组织机构树
  16.      * renderId 渲染位置
  17.      * nodeClick 点击时触发的事件
  18.      * beforeNodeClick 点击前触发的事件
  19.      * ischkbox 是否显示多选框
  20.      */
  21.     sdorg.showcurrorg =function (renderId,nodeClick,beforNodeClick,ischkbox) {
  22.     var orgNodes;
  23.     var setting = {
  24.             data:{
  25.                 simpleData:{
  26.                     enable:true,
  27.                     idKey:"id",
  28.                     pIdKey:"parentId",
  29.                     root:0
  30.                 },
  31.                 key:{
  32.                     name:"orgName"
  33.                 }
  34.             },
  35.             view:{
  36.                 showIcon:true
  37.             },
  38.             check:{
  39.             	enable:ischkbox
  40.             	,chkStyle:'checkbox'
  41.             	,chkboxType:{ "Y": "", "N": "" }
  42.                 //,autoCheckTrigger: false
  43.             },
  44.             async:{
  45.                 enable:true,
  46.                 url:baseURL+"/org/org!listOrgNode.action",
  47.                 autoParam:["id"],
  48.                 dataFilter:ajaxDataFilter
  49.             },
  50.             callback:{
  51. //                onExpand:expandParentOrg,
  52.                 onClick:nodeClick||_nodeClick,
  53.                 beforeClick:beforNodeClick||_beforNodeClick,
  54.             }
  55.         };
  56.     
  57.      var url =baseURL+'/org/org!listOrgRoot.action';
  58.         $.ajax({
  59.             url:url,
  60.             type:'post',
  61.             dataType:'json',
  62.             success:function (result) {
  63.                 if ('0' == result.code) {
  64.                     $.fn.zTree.init($('#'+renderId), setting, null);
  65.                     var orgTree = $.fn.zTree.getZTreeObj(renderId);
  66.                         orgTree.addNodes(null, result.data.orgList );
  68.                     // 展开机构树的根节点
  69.                     var rootNodes = orgTree.getNodes();
  70.                     if (rootNodes.length > 0)
  71.                         orgTree.expandNode(rootNodes[0], true, false, true);
  72.                     //orgTree.expandAll(true);
  73.                 } else {
  74.                     alert(result.desc);
  75.                 }
  76.             }
  77.         });
  78.     }
  79.     
  80.     sdorg.showcurrorg1 =function (renderId,nodeClick,nodeCheck,ischkbox,beforeShow,onExpand,orgId,orgName) {
  81.         var orgNodes;
  82.         var setting = {
  83.                 data:{
  84.                     simpleData:{
  85.                         enable:true,
  86.                         idKey:"organizationId",
  87.                         pIdKey:"parentId",
  88.                         root:0
  89.                     },
  90.                     key:{
  91.                         name:"organizationName"
  92.                     }
  93.                 },
  94.                 view:{
  95.                     showIcon:true
  96.                 },
  97.                 check:{
  98.                 	enable:ischkbox
  99.                 	,chkStyle:'checkbox'
  100.                 	,chkboxType: { "Y": "s", "N": "s" }
  101.                     ,autoCheckTrigger: true
  102.                 },
  103.                 async:{
  104.                     enable:true,
  105.                     url:baseURL+"/org/org!listOrgNode.action",
  106.                     autoParam:["organizationId"],
  107.                     dataFilter:ajaxDataFilter
  108.                 },
  109.                 callback:{
  110. //                    onExpand:expandParentOrg,
  111.                     onClick:nodeClick||_nodeClick,
  112.                     onCheck:nodeCheck,
  113.                     onExpand:onExpand
  114.                 }
  115.             };
  116.         
  117.          //var url = cur_user_id=="admin"?baseURL+'/orgext/orgext!listOrgRoot.action':baseURL+'/orgext/orgext!listOrgUnderCurrentUserOrg.action';
  118.         var url = orgId?baseURL+'/org/org!listOrgNode.action':baseURL+'/org/org!listOrgRoot.action';
  119.      // alert(orgId); return;
  120.         $.ajax({
  121.                 url:url,
  122.                 type:'post',
  123.                 dataType:'json',
  124.                 data:{organizationId:orgId},
  125.                 success:function (result) {
  126.                     if ('0' == result.code) {
  127.                     	$.fn.zTree.init($('#'+renderId), setting, null);
  128.                     	var orgTree = $.fn.zTree.getZTreeObj(renderId);
  129.                     	if(orgId){
  130.                     		var newNode = {organizationId:orgId,organizationName:orgName};
  131.                         	orgTree.addNodes(null, newNode);
  132.                     		orgTree.addNodes(orgTree.getNodeByParam("organizationId",orgId,null), result.data.orgList );
  133.                     	}else{
  134.                     		orgTree.addNodes(null, result.data.orgList );
  135.                     		
  136.                     	}
  137.                         // 展开机构树的根节点
  138.                         var rootNodes = orgTree.getNodes();
  139.                         if (rootNodes.length > 0)
  140.                             orgTree.expandNode(rootNodes[0], true, false, true);
  141.                         	//orgTree.expandAll(true);
  142.                         beforeShow&&beforeShow.call();
  143.                     } else {
  144.                         alert(result.desc);
  145.                     }
  146.                 }
  147.             });
  148.         }
  149.    
  150.     sdorg.showchildorg= function (renderId,orgId,nodeClick,beforNodeClick,ischkbox,iscanexpand) {
  151.         var orgNodes;
  152.         var setting = {
  153.                 data:{
  154.                     simpleData:{
  155.                         enable:true,
  156.                         idKey:"organizationId",
  157.                         pIdKey:"parentId",
  158.                         root:0
  159.                     },
  160.                     key:{
  161.                         name:"organizationName"
  162.                     }
  163.                 },
  164.                 view:{
  165.                     showIcon:true
  166.                 },
  167.                 check:{
  168.                 	enable:ischkbox
  169.                 	,chkStyle:'checkbox'
  170.                 	,chkboxType:{ "Y": "", "N": "" }
  171.                     //,autoCheckTrigger: false
  172.                 },
  173.                 async:{
  174.                     enable:iscanexpand||false,
  175.                     url:baseURL+"/orgext/orgext!listOrgNode.action",
  176.                     autoParam:["organizationId"],
  177.                     dataFilter:ajaxDataFilter
  178.                 },
  179.                 callback:{
  180. //                    onExpand:expandParentOrg,
  181.                     onClick:nodeClick||_nodeClick,
  182.                     beforeClick:beforNodeClick||_beforNodeClick,
  183.                 }
  184.             };
  185.         
  186.         var url = orgId?baseURL+'/orgext/orgext!listOrgNode.action':baseURL+'/orgext/orgext!listOrgRoot.action';
  187.             $.ajax({
  188.                 url:url,
  189.                 type:'post',
  190.                 data:{organizationId:orgId},
  191.                 dataType:'json',
  192.                 success:function (result) {
  193.                     if ('0' == result.code) {
  194.                         orgNodes =ajaxDataFilter(null, null, result); //result.data.orgList;
  195.                         if (orgNodes.length > 0) { 
  196.                             $.fn.zTree.init($('#'+renderId), setting, orgNodes);
  197.                             // 展开机构树的根节点
  198.                             var orgTree = $.fn.zTree.getZTreeObj(renderId);
  199.                             var rootNodes = orgTree.getNodes();
  200.                             if ((!orgId||iscanexpand)&&rootNodes.length > 0)
  201.                               orgTree.expandNode(rootNodes[0], true, false, true);
  202.                             	//orgTree.expandAll(true);
  203.                         } 
  204.                     } else {
  205.                         alert(result.desc);
  206.                     }
  207.                 }
  208.             });
  209.         }
  210.     //
  211.     /**
  212.      * 异步加载节点数据后的处理函数
  213.      * @param treeId
  214.      * @param parent
  215.      * @param result
  216.      */
  217.     function ajaxDataFilter(treeId, parent, result) {
  218.         //if ('0' == result.code) {
  219.             return result.data.orgList;
  220.         //}
  221.     }
  223.     function _nodeClick(event, treeId, treeNode) {
  224.     	//console.info(treeNode);
  225.      //alert(treeNode.organizationId);
  226.      //alert(treeNode.organizationName);
  227.     }
  229.     /**
  230.      * 控制节点是否能被选中
  231.      * @param treeId
  232.      * @param treeNode
  233.      * @param clickFlag
  234.      */
  235.     function _beforNodeClick(treeId, treeNode, clickFlag) {
  237.     }
  238.   //当前对应input框 显示的input 和要隐藏id的input
  239. 	var $_currdom2,$_hiddendom2;
  240. 	//显示下拉树
  241. 	function showMenu2(inputid,hiddenid) {
  242. 		$_currdom2 = $("#"+inputid);
  243. 		$_hiddendom2 = $("#"+hiddenid);
  244. 		var cityOffset = $_currdom2.offset();
  245. 		$("#Content").css({left:cityOffset.left, top:cityOffset.top-50}).slideDown("fast");
  246. 		$("body").bind("mousedown", onBodyDown2);
  247. 	}
  248. 	//隐藏下拉树
  249. 	function hideMenu2() {
  250. 		$("#Content").fadeOut("fast");
  251. 		$("body").unbind("mousedown", onBodyDown2);
  252. 	}
  253. 	//点击页面其他位置时，下拉树退出
  254. 	function onBodyDown2(event) {
  255. 		if (!(event.target.id == "Btn" || event.target.id == "Content" || $(event.target).parents("#Content").length>0)) {
  256. 			hideMenu2();
  257. 		}
  258. 	}
  259. 	//节点点击事件
  260. 	function onClick2(e, treeId, treeNode) {
  261. 		$_currdom2.val(treeNode.organizationName);
  262. 		$_currdom2.focus();
  263. 		$_hiddendom2.val(treeNode.organizationId);
  264. 		$("#Content").fadeOut("fast");
  265. }
  267.     function onCheck(e,treeId,treeNode){
  268.         var treeObj = $.fn.zTree.getZTreeObj("org");
  269.         var $ckNode = treeObj.getCheckedNodes();
  270.         var orgName = "";
  271.         var orgId = "";
  272.         $($ckNode).each(function(){
  273.             orgName+=this.organizationName+",";
  274.             orgId+=this.organizationId+",";
  275.         })
  276.         $_currdom2.val(orgName);
  277.         $_hiddendom2.val(orgId);
  280.     }

html
  1. <!-- 组织架构树 -->
  2. <div id="Content" class="menuContent" style="position:absolute;display:none;z-index:10000;">
  3.     <ul id="org" class="ztree" style="margin-top:0; width:350px; background:white; border:2px dotted #cccccc;"></ul>
  4. </div>

posted on 2017-03-22 14:38  signheart  阅读(481)  评论(0)    收藏  举报

导航