Web功能之组织结构图

　　　　前提：由于项目需要显示组织结构图的形式 

　　　　工具：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 >&nbsp;" + this.SysUserGroupId + "</td></tr>";
            str += "<tr bgcolor=white><td >&nbsp;<a href='" + this.NavigateUrl + "' title='详细档案'></a></td></tr>";//" + this.SysUserGroupId + "
            str += "<tr><td >&nbsp;" + this.SysUserName + "</td></tr>";
            // str += "<tr bgcolor=white><td >&nbsp;</td></tr>";
            //str += "<tr><td >&nbsp;</td></tr>";

            str += "</table>";

            str += "</td></tr></table>";

            return str;
        }
    }
View Code

　　　　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>
View Code

　　　    　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;
        }
View Code

　　　　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>
View Code

　　　　     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;
        }
View Code

 

以上是本人对于组织结构图的总结 如有好的建议 请您留下  以便新手学习 利人利自！

项目下载地址：点我要项目

　

posted @ 2014-08-04 12:27  Elite_Y  阅读(8696)  评论(0)  编辑  收藏  举报