前提：由于项目需要显示组织结构图的形式
工具：VS2010
项目：ASP.NET 自带的web项目 （带模板页）
插件：OrgChart（依赖：OrgChart.dll）、JOrgChart
不多说 先看效果
1、OrgChart实现效果
2、JOrgChart效果
基础实体类代码：
public class SysUserModel : OrgNode { public int SysUserId { get; set; } public string SysUserName { get; set; } public int SysUserParentId { get; set; } public override string OrgNodeHtml() { this.SysUserName = this.Text; string str = "<table align='center' border=0 bgcolor='#f0f8ff'><tr>"; //str += "<td><img src='" + this.ImageUrl + "'></td>"; str += "<td><table align=top width=80 border=1 bordercolor=Silver cellspacing=0 style='border-collapse:collapse;'>"; //str += "<tr><td > " + this.SysUserGroupId + "</td></tr>"; str += "<tr bgcolor=white><td > <a href='" + this.NavigateUrl + "' title='详细档案'></a></td></tr>";//" + this.SysUserGroupId + " str += "<tr><td > " + this.SysUserName + "</td></tr>"; // str += "<tr bgcolor=white><td > </td></tr>"; //str += "<tr><td > </td></tr>"; str += "</table>"; str += "</td></tr></table>"; return str; } }
1、OrgChart前台实现代码：
<%@ Page Title="OrgChart" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <%@ Register Assembly="OrgChart" Namespace="OrgCharDesigner" TagPrefix="cc1" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <cc1:OrgChart ID="OrgChart1" runat="server" style="z-index: 101; left: 104px; position: absolute; top: 188px" LineColor="Silver" Width="80%" Height="80%" ChartStyle="Vertical" ToolTip="我的组织结构"/> </asp:Content>
OrgChart后台实现代码：
SysUserModel sysUserModel = new SysUserModel(); DataTable dt; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ListBind(); } } protected void ListBind() { try { dt = dtList(); SysUserModel root = new SysUserModel(); root.SysUserId = 1; root.Text = "CEO"; root.SysUserParentId = 0; SetNodeChild(dt, root); OrgChart1.Node = root; } catch (Exception ex) { throw ex; } } private void SetNodeChild(DataTable dt, SysUserModel root) { DataRow[] rows = dt.Select(" SysUserParentId = '" + root.SysUserId + "'");// 选出所有子节点 foreach (DataRow drChild in rows) { SysUserModel node = new SysUserModel(); node.Text = drChild["SysUserName"].ToString(); node.SysUserId = int.Parse(drChild["SysUserId"].ToString()); node.SysUserParentId = int.Parse(drChild["SysUserParentId"].ToString()); SetNodeChild(dt, node); root.Nodes.Add(node); } } private DataTable dtList() { DataTable dt = new DataTable(); dt.Columns.Add("SysUserId"); dt.Columns.Add("SysUserName"); dt.Columns.Add("SysUserParentId"); dt.Rows.Add(); dt.Rows[0]["SysUserId"] = "1"; dt.Rows[0]["SysUserName"] = "CEO"; dt.Rows[0]["SysUserParentId"] = "0"; dt.Rows.Add(); dt.Rows[1]["SysUserId"] = "2"; dt.Rows[1]["SysUserName"] = "总经理"; dt.Rows[1]["SysUserParentId"] = "1"; dt.Rows.Add(); dt.Rows[2]["SysUserId"] = "3"; dt.Rows[2]["SysUserName"] = "副总经理"; dt.Rows[2]["SysUserParentId"] = "2"; dt.Rows.Add(); dt.Rows[3]["SysUserId"] = "4"; dt.Rows[3]["SysUserName"] = "项目一组"; dt.Rows[3]["SysUserParentId"] = "3"; dt.Rows.Add(); dt.Rows[4]["SysUserId"] = "5"; dt.Rows[4]["SysUserName"] = "项目二组"; dt.Rows[4]["SysUserParentId"] = "3"; dt.Rows.Add(); dt.Rows[5]["SysUserId"] = "6"; dt.Rows[5]["SysUserName"] = "运营总经理"; dt.Rows[5]["SysUserParentId"] = "1"; dt.Rows.Add(); dt.Rows[6]["SysUserId"] = "7"; dt.Rows[6]["SysUserName"] = "运营副总经理"; dt.Rows[6]["SysUserParentId"] = "6"; dt.Rows.Add(); dt.Rows[7]["SysUserId"] = "8"; dt.Rows[7]["SysUserName"] = "运营一组"; dt.Rows[7]["SysUserParentId"] = "7"; dt.Rows.Add(); dt.Rows[8]["SysUserId"] = "9"; dt.Rows[8]["SysUserName"] = "运营二组"; dt.Rows[8]["SysUserParentId"] = "7"; return dt; }
2、JOrgChart 前台实现代码：
<%@ Page Title="jOrgChart" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="WebApplication1.About" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <link rel="stylesheet" href="Styles/jquery.jOrgChart.css" /> <link rel="stylesheet" href="Styles/custom.css" /> <script type="text/javascript" src="Scripts/prettify.js"></script> <script type="text/javascript" src="Scripts/jquery.min.js"></script> <script type="text/javascript" src="Scripts/jquery-ui.min.js"></script> <script src="Scripts/jquery.jOrgChart.js"></script> <script> jQuery(document).ready(function () { $("#org").jOrgChart({ chartElement: '#chart', dragAndDrop: true, drop: function (aim, to) { // $.ajax({ // url: '', //请求的URL // cache: false, //不从缓存中取数据 // data: { Id: aim.attr("id"), parentId: to.attr("id") }, //发送的参数 // type: 'Get', //请求类型 // dataType: 'json', //返回类型是JSON // timeout: 20000, //超时 // error: function ()//出错处理 // { // alert("程序出错!"); // }, // success: function (json)//成功处理 // { // // } // }); alert("目标：" + aim.attr("id") + "被拖动到了:" + to.attr("id")); } }); }); </script> <script> jQuery(document).ready(function () { /* Custom jQuery for the example */ $("#show-list").click(function (e) { e.preventDefault(); $('#list-html').toggle('fast', function () { if ($(this).is(':visible')) { $('#show-list').text('Hide underlying list.'); $(".topbar").fadeTo('fast', 0.9); } else { $('#show-list').text('Show underlying list.'); $(".topbar").fadeTo('fast', 1); } }); }); $('#list-html').text($('#org').html()); $("#org").bind("DOMSubtreeModified", function () { $('#list-html').text(''); $('#list-html').text($('#org').html()); prettyPrint(); }); }); </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <div> <%=html%> <div id="chart" class="orgChart"> </div> </div> </asp:Content>
JOrgChart 后台实现代码：
StringBuilder str = new StringBuilder(); DataTable dt; protected string html; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { html = ListBind(); } } protected string ListBind() { try { dt = dtList(); SysUserModel root = new SysUserModel(); str.Append(" <ul id="org" style="display: none"> <li id ='1'>CEO "); root.SysUserId = 1; root.Text = "CEO"; root.SysUserParentId = 0; SetNodeChild(dt, root); str.AppendLine(" </li> </ul> "); return str.ToString(); } catch (Exception ex) { throw ex; } } private void SetNodeChild(DataTable dt, SysUserModel root) { DataRow[] rows = dt.Select(" SysUserParentId = '" + root.SysUserId + "'");// 选出所有子节点 if (rows.Length > 0) { str.Append(" <ul> "); foreach (DataRow drChild in rows) { str.AppendFormat(" <li id='{0}'>{1}", drChild["SysUserId"].ToString(), drChild["SysUserName"].ToString()); SysUserModel node = new SysUserModel(); node.Text = drChild["SysUserName"].ToString(); node.SysUserId = int.Parse(drChild["SysUserId"].ToString()); node.SysUserParentId = int.Parse(drChild["SysUserParentId"].ToString()); SetNodeChild(dt, node); str.Append("</li>"); } str.Append(" </ul>"); } } private DataTable dtList() { DataTable dt = new DataTable(); dt.Columns.Add("SysUserId"); dt.Columns.Add("SysUserName"); dt.Columns.Add("SysUserParentId"); dt.Rows.Add(); dt.Rows[0]["SysUserId"] = "1"; dt.Rows[0]["SysUserName"] = "CEO"; dt.Rows[0]["SysUserParentId"] = "0"; dt.Rows.Add(); dt.Rows[1]["SysUserId"] = "2"; dt.Rows[1]["SysUserName"] = "总经理"; dt.Rows[1]["SysUserParentId"] = "1"; dt.Rows.Add(); dt.Rows[2]["SysUserId"] = "3"; dt.Rows[2]["SysUserName"] = "副总经理"; dt.Rows[2]["SysUserParentId"] = "2"; dt.Rows.Add(); dt.Rows[3]["SysUserId"] = "4"; dt.Rows[3]["SysUserName"] = "项目一组"; dt.Rows[3]["SysUserParentId"] = "3"; dt.Rows.Add(); dt.Rows[4]["SysUserId"] = "5"; dt.Rows[4]["SysUserName"] = "项目二组"; dt.Rows[4]["SysUserParentId"] = "3"; dt.Rows.Add(); dt.Rows[5]["SysUserId"] = "6"; dt.Rows[5]["SysUserName"] = "运营总经理"; dt.Rows[5]["SysUserParentId"] = "1"; dt.Rows.Add(); dt.Rows[6]["SysUserId"] = "7"; dt.Rows[6]["SysUserName"] = "运营副总经理"; dt.Rows[6]["SysUserParentId"] = "6"; dt.Rows.Add(); dt.Rows[7]["SysUserId"] = "8"; dt.Rows[7]["SysUserName"] = "运营一组"; dt.Rows[7]["SysUserParentId"] = "7"; dt.Rows.Add(); dt.Rows[8]["SysUserId"] = "9"; dt.Rows[8]["SysUserName"] = "运营二组"; dt.Rows[8]["SysUserParentId"] = "7"; return dt; }
以上是本人对于组织结构图的总结 如有好的建议 请您留下 以便新手学习 利人利自！
项目下载地址：点我要项目