Web功能之組織結構圖

時間  2019-11-09
標籤 web 功能 組織 結構圖 欄目 HTML 简体版
原文   原文鏈接

　　　　前提：因爲項目須要顯示組織結構圖的形式 javascript

　　　　工具：VS2010 css

　　　　項目：ASP.NET 自帶的web項目 （帶模板頁）html

　　　　插件：OrgChart（依賴：OrgChart.dll）、JOrgChartjava

　　　　很少說 先看效果node

　　　　一、OrgChart實現效果jquery

　　　　

 

　　　　二、JOrgChart效果web

　　　　

　　　　基礎實體類代碼：ajax

   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

　　　　一、OrgChart前臺實現代碼：　json

<%@ 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

　　　　二、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

 

以上是本人對於組織結構圖的總結 若有好的建議 請您留下  以便新手學習 利人利自！

項目下載地址：點我要項目

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程