zTree组织机构树
其中关于zTree组织机构树,涉及模块如下,采用封装自定义控件,以便多处调用,自定义控件:uc_btnSelectOrganize.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="uc_btnSelectOrganize.ascx.cs" Inherits="HMFW.Web.UserControl.uc_btnSelectOrganize" %> <div> <div id="organizewin" iconcls="icon-save" title="组织机构选择" style="overflow: auto; display: none"></div> <asp:TextBox ID="txtOrganize" runat="server" class="UCSelect" ContentEditable="false" ondblclick="selectOrganizeInfo()" EnableTheming="false" title="双击选择组织机构" autocomplete="off"></asp:TextBox><img alt="选择" title="选择" src="~/Images/dropdown.gif" style="cursor: pointer; vertical-align: middle;" id="imgselect" onclick="showOrganizeMenu(); return false;" runat="server" /><img alt="清空" title="清空" src="~/Images/delete.gif" style="cursor: pointer; width: 17px; height: 20px; border: 0; vertical-align: middle" id="imgclear" onclick="clearOrganize()" runat="server" /><img src="~/Images/rightico.gif" style="width: 2px; height: 20px; border: 0; vertical-align: middle" id="imgright" runat="server" /> <asp:HiddenField ID="hidOrganizeCode" runat="server" /> <asp:HiddenField ID="hidOrganizeJb" runat="server" /> <asp:HiddenField ID="hidOrganizepath" runat="server" Value="../" /> <input id="hidOrganizeFunction" type="hidden" runat="server" value="" /> <input id="hidNeedJb" type="hidden" runat="server" value="" /> <input id="hidAreaTop" type="hidden" value="0" title="固定顶部位置" /> <input id="hidAreaLeft" type="hidden" value="0" title="固定顶部位置" /> <%--<div class="content_wrap">--%> <%--<div class="zTreeDemoBackground left">--%> <div id="menuContent" class="menuContent" style="display: none; position: absolute; z-index: 2147483647;"> <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 208px;"></ul> </div> <div id="menuFrame" style="filter: Alpha(opacity=0); position: absolute; z-index: 2147483646; height: 372px; display: none"> <iframe style="border: 0; width: 220px; height: 100%; position: absolute;"></iframe> </div> </div>
自定义控件:后台配置
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace HMFW.Web.UserControl { public partial class uc_btnSelectOrganize : System.Web.UI.UserControl { protected void Page_Load(object sender,EventArgs e) { int width = 180; //txtOrganize.Width = Width == 0 ? (ShowClearBtn ? (width - 36) : (width - 16)) : Width; //if (Width == 0) // Width = 180; //txtOrganize.Width = ShowClearBtn ? (Width - 36) : (Width - 16); //width = ShowClearBtn ? (Width - 12) : (Width - 7); //if (width < 140) // width = 140; imgclear.Visible = ShowClearBtn; imgright.Visible = !ShowClearBtn; hidOrganizeJb.Value = jb == -1 ? "" : Jb.ToString(); hidNeedJb.Value = NeedJb ? "1" : ""; imgselect.Visible = NeedSelectBut; imgclear.Visible = NeedClearBut; txtOrganize.Enabled = OrganizeEna; } #region 属性 /// <summary> /// 是否显示清空按钮 /// </summary> public bool ShowClearBtn { get; set; } /// <summary> /// 文本框长度 /// </summary> public int Width { get; set; } private int jb = -1; /// <summary> /// 显示到级别 1省级 2市级 3县级 4乡镇级 5村级 /// </summary> public int Jb { get { return jb; } set { jb = value; } } /// <summary> /// 地区控件Organize文件夹的相对位置 默认为../ /// </summary> public string BasePath { get { return hidOrganizepath.Value; } set { hidOrganizepath.Value = value; } } /// <summary> /// 给搜索按钮设置方法 /// </summary> public string SetSearchFunction { get { return hidOrganizeFunction.Value; } set { hidOrganizeFunction.Value = value; } } /// <summary> /// 是否需要级别验证 /// </summary> public bool NeedJb { get; set; } /// <summary> /// 查看按钮是否可见 /// </summary> public bool NeedSelectBut { get; set; } /// <summary> /// 清空按钮是否可见 /// </summary> public bool NeedClearBut { get; set; } /// <summary> /// 机构是否可编辑 /// </summary> public bool OrganizeEna { get; set; } #endregion public TextBox OrganizeName { get { return txtOrganize; } set { txtOrganize = value; } } public HiddenField OrganizeCode { get { return hidOrganizeCode; } set { hidOrganizeCode = value; } } } }
zTree参数配置
var setting = { view: { fontCss: getFontCss//,// dblClickExpand: dblClickExpand },isSimpleData: true,//数据是否采用简单 Array 格式,默认false treeNodeKey: "gID",//在isSimpleData格式下,当前节点id属性 treeNodeParentKey: "gPID",//在isSimpleData格式下,当前节点的父节点id属性 showLine: true,//是否显示节点间的连线 expandSpeed: "fast",//设置为快速显示动画效果 isParent: "isParent",//查看当前被选中的节点是否是父节点 icon: {//此属性只针对父节点有效,此属性必须与 iconClose 同时使用 iconOpen: decodeURI("iconOpen"),//父节点展开时使用的图标 iconClose: decodeURI("iconClose")//父节点折叠时使用的图标 },check: { enable: true,//开启checkBox chkStyle: "checkBox",chkBoxType: { "Y": "","N": "" }//勾选时不关联父与子,取消勾选时不关联父与子 默认值:{ "Y": "ps","N": "ps" } },callback: { beforeClick: beforeClick,//用于捕获单击节点之前的事件回调函数,并且根据返回值确定是否允许单击操作 onCheck: onCheck,//用于捕获 checkBox / radio 被勾选 或 取消勾选的事件回调函数 onClick: onClick,//用于捕获节点被点击的事件回调函数 beforeExpand: beforeExpand,//用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作 onExpand: onExpand//用于捕获节点被展开的事件回调函数 } } function beforeClick(treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode,true,false); var nodes = zTree.getCheckedNodes(true);//获取勾选当前节点集合 if (nodes.length > 1 || nodes.length == 0) { for (var i = 0; i < nodes.length; i++) { if (nodes[i] == treeNode) continue else zTree.checkNode(nodes[i],false,false); } } } function onCheck(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = zTree.getCheckedNodes(true); zTree.selectNode(treeId); if (nodes.length > 1 || nodes.length == 0) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].gID == treeId.gID) continue else zTree.checkNode(nodes[i],false); } } nodes = zTree.getCheckedNodes(true); if (nodes.length > 1 || nodes.length == 0) { return false; } hideMenu(); CloSEOrganizeWin(treeId.gID,treeId.name); } function beforeExpand(treeId,treeNode) {//节点展开前 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var newNodes; var treeULDemo = $("[id='" + treeNode.tId + "_a']").next(); var isAjaxing = treeNode.zAsync; if (treeULDemo != null && treeULDemo != undefined && treeULDemo.length > 0) { treeObj.updateNode(treeNode); treeObj.reAsyncChildNodes(treeNode,"refresh"); } else { //startTime = new Date(); $.ajax({ async: false,//【重要】:设置false不然出不来数据 type: "post",//要用post方式 url: "../Organize/ZtreeForm.aspx/GetRootByChildsID",//方法所在页面和方法名 contentType: "application/json; charset=utf-8",data: '{ gid:"' + treeNode.gID + '"}',dataType: "json",success: function (data) { //请求成功后处理函数。 //var _data = $.parseJSON(data.d);//$.parseJSON在1.2.6.min.js不兼容 var _data = eval(data.d);//eval((+data+)) newNodes = _data; //把后台封装好的简单Json格式赋给treeNodes },error: function () {//请求失败处理函数 alert('请求失败'); },beforeSend: function () { $("#" + treeNode.tId + "_a").children("#" + treeNode.tId + "_ico").css("background-image","url('" + icon + "')"); //jquery子代选择器 【暂用】 //$("#" + treeNode.tId + "_ico").css("background-image","url('" + icon + "')");//jquery ID选择器 【暂不用】 },complete: function () { treeNode.iconOpen = iconOpen; } }); newNodes = treeObj.addNodes(treeNode,newNodes,true); //展开父节点 treeObj.updateNode(treeNode); //endTime = new Date(); //var usedTime = (endTime.getTime() - startTime.getTime()) / 1000; //showLog("加载完毕,异步加载,耗时:" + usedTime + " 秒"); } } function onExpand(event,treeNode) {//节点展开 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //加载指定节点 zTree.selectNode(treeNode.children[0]); } function onClick(e,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = zTree.getCheckedNodes(true);//获取勾选当前节点集合 if (nodes.length > 1 || nodes.length == 0) { return false; } hideMenu(); CloSEOrganizeWin(treeId.gID,treeId.name); } function zTreeOnDblclick(e,treeNode) { alert("gID:" + treeNode.gID + " gPID:" + treeNode.gPID + " name:" + treeNode.name); }
ajax框架调用
$.ajax({ async: false,//【重要】:设置false不然出不来数据 type: "post",//要用post方式 url: "../Organize/ZtreeForm.aspx/GetZtreeRootList",//方法所在页面和方法名 contentType: "application/json; charset=utf-8",data: '{ gid: "' + gid + '"}',success: function (data) { //请求成功后处理函数。 //var _data = $.parseJSON(data.d);//$.parseJSON在1.2.6.min.js不兼容 var _data = eval(data.d);//eval((+data+)) treeNodes = _data; //把后台封装好的简单Json格式赋给treeNodes },error: function () {//请求失败处理函数 alert('请求失败'); } });
webmethod读取数据
依赖注入
private static readonly OrganizeBLL iORGBLL = new OrganizeBLL();//机构信息 private static readonly string iconOpen = HttpUtility.UrlEncode(@"1_open.png");//默认展开图片 private static readonly string iconClose = HttpUtility.UrlEncode(@"1_close.png");//默认收缩图片 private static sys_Organize modelEdit = new sys_Organize();//【编辑】声明全局静态只读变量【sys_Organize】,便于获取已录入登录机构信息 private static sys_Organize modelTownCityEdit = new sys_Organize();//镇级向上查询市级 private static sys_Organize modelVillCityEdit = new sys_Organize();//村级向上查询市级
属性自定义
private static string gid; private static string gId //机构gid,便于【编辑页面】绑定数据 { get { return gid; } set { gid = value; } }
节点类定义
/// <summary> /// 节点类 /// </summary> public class Node { /// <summary> /// color属性 /// </summary> public bool highlight; /// <summary> /// 子节点 /// </summary> public List<Node> children; /// <summary> /// 展开图标 /// </summary> public string iconOpen; /// <summary> /// 收缩图标 /// </summary> public string iconClose; /// <summary> /// 是否是父级节点 /// </summary> public bool isParent; /// <summary> /// 地区gID /// </summary> public Guid? gID; /// <summary> /// 地区父gPID /// </summary> public Guid? gPID; /// <summary> /// 地区编码 /// </summary> public string sAreaCode; /// <summary> /// 地区级别 /// </summary> public int? iJB; /// <summary> /// 地区名称 /// </summary> public string name; /// <summary> /// 删除标识 /// </summary> public int? iDeleteMark; /// <summary> /// 创建日期 /// </summary> public DateTime? dCreateDate; /// <summary> /// 创建人编码 /// </summary> public Guid? gCreateUserId; /// <summary> /// 创建人姓名 /// </summary> public string sCreateUserRealname; /// <summary> /// 修改日期 /// </summary> public DateTime? dModifyDate; /// <summary> /// 修改人编码 /// </summary> public Guid? gModifyUserId; /// <summary> /// 修改人姓名 /// </summary> public string sModifyUserRealname; }
业务流程5,递归思想6,仿造children7,json序列化并返回
/// <summary> /// 读取地区列表--青海省民政厅下面一级 /// </summary> /// <returns></returns> [WebMethod] public static string GetZtreeRootList(string gid) { gId = gid; List<Node> list = new List<Node>();//所有节点 list = GetGenNode(gId);//将所有一级节点放到list中 GetThirdChilds(ref list,gId);//递归获取节点 return JsonHelper<Node>.ListToJsonString(list);//序列化json字符串,便于展示 } /// <summary> /// 读取子集节点--依据参数【sAreaCode】 /// </summary> /// <param name="list"></param> [WebMethod] public static void GetThirdChilds(ref List<Node> list,string gid) { BasePage bs = new BasePage(); modelEdit = iORGBLL.GetModelById(gid);//【编辑】声明全局静态只读变量【sys_Organize】,便于获取当前登录机构信息 /******************递归【GetThirdChilds()】是为了循环遍历节点,核心【node.children = nodeList;】追加子节点*******************/ foreach (Node node in list) { List<Node> nodeList = GetThirdChildsID(node.gID); if (nodeList.Count > 0) { if (!string.IsNullOrEmpty(gid))//【编辑】:查询到当前编辑的组织地区 { if (modelEdit.iJB < 2)//【省】【市】级登录用户 { if (node.iJB < modelEdit.iJB)//【编辑】组织级别依据已录入数据 { node.children = nodeList; GetThirdChilds(ref nodeList,gid); } else if (node.iJB == modelEdit.iJB)//【县】 { foreach (Node nodes in list) { if (nodes.sAreaCode == modelEdit.sAreaCode) { nodes.children = GetThirdChildsID(nodes.gID); //GetThirdChilds(ref nodeList,gid); } } } } else if (modelEdit.iJB == 2)//【县】级登录用户 { if (node.iJB <= 0)//【省】 { node.children = nodeList; GetThirdChilds(ref nodeList,gid); } else if (node.iJB == 1)//【市】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 2)//【县】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gID) { nodes.children = GetThirdChildsID(nodes.gID); //GetThirdChilds(ref nodeList,gid); } } } } else if (modelEdit.iJB == 3)//【镇】级登录用户 { if (node.iJB <= 0)//【省】 { node.children = nodeList; GetThirdChilds(ref nodeList,gid); } else if (node.iJB == 1)//【市】 { modelTownCityEdit = iORGBLL.GetModelById(modelEdit.gPID.ToString()); foreach (Node nodes in list) { if (nodes.gID == modelTownCityEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 2)//【县】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 3)//【乡镇】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; //GetThirdChilds(ref nodeList,gid); } } } } else if (modelEdit.iJB == 4)//【村】级登录用户 { if (node.iJB <= 0)//【省】 { node.children = nodeList; GetThirdChilds(ref nodeList,gid); } else if (node.iJB == 1)//【市】 { modelVillCityEdit = iORGBLL.GetModelById(modelEdit.gPID.ToString()); modelVillCityEdit = iORGBLL.GetModelById(modelVillCityEdit.gPID.ToString()); foreach (Node nodes in list) { if (nodes.gID == modelVillCityEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 2)//【县】 { modelVillCityEdit = iORGBLL.GetModelById(modelEdit.gPID.ToString()); foreach (Node nodes in list) { if (nodes.gID == modelVillCityEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 3)//【乡镇】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gPID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; GetThirdChilds(ref nodeList,gid); } } } else if (node.iJB == 4)//【村】 { foreach (Node nodes in list) { if (nodes.gID == modelEdit.gID) { nodeList = GetThirdChildsID(nodes.gID); nodes.children = nodeList; //GetThirdChilds(ref nodeList,gid); } } } } } else if (node.iJB <= bs.GetSessionCurrentUserInfo.iJB) //【新增】组织级别依据当前登录用户 { node.children = nodeList; GetThirdChilds(ref nodeList,gid); } } break; } } /// <summary> /// 获所有的一级节点 /// </summary> /// <param name="nodeList"></param> /// <returns></returns> [WebMethod] public static List<Node> GetGenNode(string gid) { List<Node> nodeList = new List<Node>(); List<Node> childrenList = new List<Node>(); Node node = new Node(); Node children = new Node(); List<sys_Organize> genList = new List<sys_Organize>(); BasePage bs = new BasePage();//声明全局静态只读变量【BasePage】,便于获取当前登录姓名 string name = bs.GetSessionCurrentUserInfo.sUserName;//登录用户姓名:标识【admin:加载所有组织 非admin:依据地区编码加载】【新增】 //包含了:【新增】 if (name.ToLower().Equals("admin"))//【admin】 { genList = iORGBLL.GetList(P => P.iJB == -1 && P.iDeleteMark == 0); } else//【非admin】 { genList = iORGBLL.GetList(P => P.sAreaCode == bs.GetSessionCurrentUserInfo.sAreaCode && P.iDeleteMark == 0); } if (genList != null && genList.Count > 0) { foreach (sys_Organize genItem in genList) { //根节点 node node.highlight = false; node.gID = genItem.gID; node.gPID = genItem.gPID; node.sAreaCode = genItem.sAreaCode; node.iJB = genItem.iJB; node.name = genItem.sFullName; node.iDeleteMark = genItem.iDeleteMark; node.dCreateDate = genItem.dCreateDate; node.gCreateUserId = genItem.gCreateUserId; node.sCreateUserRealname = genItem.sCreateUserRealname; node.dModifyDate = genItem.dModifyDate; node.gModifyUserId = genItem.gModifyUserId; node.sModifyUserRealname = genItem.sModifyUserRealname; if (iORGBLL.GetList(P => P.gPID == genItem.gID && P.iDeleteMark == 0).Count > 0) { node.isParent = true; node.iconOpen = iconOpen; node.iconClose = iconClose; childrenList.Add(children); } } if (childrenList.Count > 0) node.children = childrenList; nodeList.Add(node); } return nodeList; } /// <summary> /// 根据父节点的id获取子节点 /// </summary> /// <param name="list">父节点id</param> /// <returns>异步调用返回List<Node></returns> [WebMethod] public static string GetRootByChildsID(string gid) { Guid id = new Guid(gid); //Guid.TryParse(gid,out id); List<Node> list = GetThirdChildsID(id); return JsonHelper<Node>.ListToJsonString(list); } /// <summary> /// 根据父节点的id获取子节点 /// </summary> /// <param name="list">父节点id</param> /// <returns></returns> [WebMethod] public static List<Node> GetThirdChildsID(Guid? gid) { List<Node> childrenList = new List<Node>(); foreach (sys_Organize childrenItem in iORGBLL.GetList(P => P.gPID == gid && P.iDeleteMark == 0)) { Node children = new Node(); //仿造子节点【child】属性 //判断叶子节点是否含有子节点并设置属性 children.highlight = false; if (iORGBLL.GetList(P => P.gPID == childrenItem.gID && P.iDeleteMark == 0).Count > 0) { children.isParent = true;//默认 true children.iconOpen = iconOpen;//默认 展开属性 children.iconClose = iconClose;//默认 收缩属性 } children.gID = childrenItem.gID; children.gPID = childrenItem.gPID; children.sAreaCode = childrenItem.sAreaCode; children.iJB = childrenItem.iJB; children.name = childrenItem.sFullName; children.iDeleteMark = childrenItem.iDeleteMark; children.dCreateDate = childrenItem.dCreateDate; children.gCreateUserId = childrenItem.gCreateUserId; children.sCreateUserRealname = childrenItem.sCreateUserRealname; children.dModifyDate = childrenItem.dModifyDate; children.gModifyUserId = childrenItem.gModifyUserId; children.sModifyUserRealname = childrenItem.sModifyUserRealname; childrenList.Add(children); } return childrenList; }
【input框既然是可编辑】
【添加了:根据参数获取节点名称】
【新增:依据省市县三级平台加载组织信息】
【checkBox框勾选回绑】