• js 树菜单 ztree

    官网 api


    js
    1. /**
    2. <div id="menuContent" class="menuContent" style=" position: absolute;">
    3. <ul id="orgTree" class="ztree" style="margin-top:0; 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>
  • 相关阅读:
    最后一次不用看脸的日子
    经典算法_指针
    #include <process.h>
    经典算法_文件
    stdin、stdout、stderr
    经典算法_位运算
    经典算法_结构体
    经典算法_字符串
    #include <string.h>
    #include <stdio.h>
  • 原文地址：https://www.cnblogs.com/signheart/p/fb75bf0424f9d13c1ac497fe4bf92d36.html
Copyright © 2020-2023  润新知