SharePoint 中的组织结构图

下载 OrgChart.zip

引言

这是 jQuery 与 SharePoint 2010 系列文章的第三篇。请先阅读第一篇，了解如何集成/使用
jQuery 与 SP 2010。SharePoint 中创建组织结构图的方法有很多，包括开箱即用的方法。在这里，我想讨论并分享代码，使用它可以创建简单的组织结构图 Web 部件。

我希望在本文档中实现以下目标：

• 创建一个包含员工及其经理的简单列表。
• 读取该列表以使用 jQuery 插件生成组织结构图。

必备组件

• 从 这里 下载 jQuery。
• 从 这里 下载 jQuery 插件 jOrgChart。

*** 请下载 .zip 文件以获取完整代码

组织结构图 Web 部件

创建一个具有以下结构的 Visual Web Part：

• OrgChartWebPartUserControl.ascx：从组织列表中获取员工信息，并将其格式化为 jQuery 插件所需的格式。
• Layouts：包含所有 jQuery、jOrgChart 插件和图像文件。
• OrgChart List Feature 将创建一个名为“OrgChart”的列表，该列表将预填充一些示例数据。Visual Web Part 将从这里获取员工列表。

 

OrgChart List Feature

此功能将创建一个列表，用于存储组织的员工列表。列表包含以下列：

• 员工
• Designation
• 管理器

您可以根据需要添加电子邮件、电话号码列。现在，我想保持简单。

以下代码添加到 FeatureActivated 方法中：

public override void FeatureActivated(SPFeatureReceiverProperties properties)
        {
            //Get the SPWeb instance
            var web = properties.Feature.Parent as SPWeb;
            if (web == null)
                return;

            //Add OrgList and enable Quick launch
            var listId = web.Lists.Add("OrgChart", "Organization Structure", SPListTemplateType.GenericList);
            var list = web.Lists[listId];
            list.OnQuickLaunch = true;
            list.Update();
            
            //Get the title field and hide it, so that it is not visible while you add new items to the list
            var title = list.Fields["Title"];
            title.Hidden = true;
            title.Update();

            //Add item field and enforece uniquness
            var empName = list.Fields.Add("Employee", SPFieldType.Text, true);
          
            //Add designation field
            var designation = list.Fields.Add("Designation", SPFieldType.Text, true);

            //Adding manager with look up field pointing to the item column
            var manager = list.Fields.AddLookup("Manager", list.ID, false);
            SPFieldLookup managerField = (SPFieldLookup)list.Fields[manager];
            managerField.LookupField = list.Fields["Employee"].InternalName;
            managerField.Update();


            //******//
            //You can additional fields like picture, email , phote, location etc....
            //******//

            //Hide the title from default view
            var view = list.DefaultView;
            if (view.ViewFields.Exists("LinkTitle"))
            {
                view.ViewFields.Delete("LinkTitle");
            }

            //Add the column to the default view
            view.ViewFields.Add(empName);
            view.ViewFields.Add(designation);
            view.ViewFields.Add(manager);
            view.Update();

            //Add some default values to the list
            var item1 = list.Items.Add();
            item1[empName] = "John";
            item1[designation] = "CEO";
            item1.Update();

            var item2 = list.Items.Add();
            item2[empName] = "Steve";
            item2[designation] = "CTO";
            item2[manager] = new SPFieldLookupValue(item1.ID, item1[empName].ToString());
            item2.Update();

            var item3 = list.Items.Add();
            item3[empName] = "Tom";
            item3[designation] = "COO";
            item3[manager] = new SPFieldLookupValue(item1.ID, item1[empName].ToString());
            item3.Update();

            var item4 = list.Items.Add();
            item4[empName] = "Andrew";
            item4[designation] = "Sr VP";
            item4[manager] = new SPFieldLookupValue(item2.ID, item2[empName].ToString());
            item4.Update();

            var item5 = list.Items.Add();
            item5[empName] = "Mary";
            item5[designation] = "Sr VP";
            item5[manager] = new SPFieldLookupValue(item3.ID, item3[empName].ToString());
            item5.Update();

            var item6 = list.Items.Add();
            item6[empName] = "Thomas";
            item6[designation] = "Sr VP";
            item6[manager] = new SPFieldLookupValue(item4.ID, item4[empName].ToString());
            item6.Update();

            var item7 = list.Items.Add();
            item7[empName] = "Test";
            item7[designation] = "XYZ";
            item7.Update();
        }
 

以下代码添加到 FeatureDeactivating 方法中。这将确保在停用功能时删除该列表。如果您希望在停用后保留该列表，可以注释掉此代码。

        public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
        {
            var web = properties.Feature.Parent as SPWeb;
            if (web == null)
                return;
            var list = web.Lists.TryGetList("OrgChart");
            list.Delete();
        }

Visual Web Part：OrgChartWebPartUserControl.ascx

此代码用于从列表中检索数据并将其格式化为 jQuery 插件所需的格式。代码隐藏文件

    public partial class OrgChartWebPartUserControl : UserControl
    {
        string orgDOMstart = "Html Format issue - Downlod code and check";
        string orgBody = string.Empty;
        string orgDOMEnd = "";
        string childRecords = string.Empty;
        List listItems = null;
        string image = string.Empty;
        
        protected void Page_Load(object sender, EventArgs e)
        {
            BuildOrgChart();
        }

        /// 

        /// Method will build the org chart html, which will be used by the JQuery plugin to rendered the org chart UI.
        /// 
        private void BuildOrgChart()
        {

            string spWebUrl = SPContext.Current.Web.Url;

            //Get the OrgChart list items
            using (var site = new SPSite(spWebUrl))
            {
                var web = site.RootWeb;
                var list = web.Lists.TryGetList("OrgChart");
                listItems = GetListItemsAsList(list.Items);
            }

            //Get tol level nodes(employees), whom managers are not assigned.
            var topLevelNodes = listItems.Where(i => ((i["Manager"] == null) ? "" : i["Manager"].ToString()) == "").ToList();

            foreach (var item in topLevelNodes)
            {
                //For each top node recursively build the html
                GenerateChilRecords(item);
                orgBody = orgBody + childRecords;
                childRecords = string.Empty;
            }

            //Assign the HTML to a Label text.
            lblChartHtml.Text = orgDOMstart + orgBody + orgDOMEnd;
        }

        /// 

        /// Method used to recursively to build the chart html
        /// 
        /// 
        private void GenerateChilRecords(SPListItem item)
        {
            //Get the reportees
            var empReportees = listItems.Where(i => ((i["Manager"] == null) ? "" : i["Manager"].ToString().Split('#')[1]) == item["Employee"].ToString()).ToList();

            //Add the collpase image, if there are any reportess for the employee
            if (empReportees.Count > 0)
            {
                image = "Collapse Image - Downlod code and check";
            }

            childRecords = childRecords + "
" + image + " " + item["Employee"] + "
  " + item["Designation"] + "";
            //if there are any reportess for the employee, call the method recursively to check if reportees have any reportess under them.
            if (empReportees.Count > 0)
            {
                childRecords = childRecords + "
";
                foreach (var employee in empReportees)
                {
                    GenerateChilRecords(employee);
                }
                childRecords = childRecords + "
";
            }
            else
            {
                childRecords = childRecords + "";
                return;
            }
        }

        /// 

        /// Method returns list of SPListItem, upon which we can use LINQ queries
        /// 
        /// 
        /// 
        private List GetListItemsAsList(SPListItemCollection liCol)
        {
            List toReturn = new List();
            foreach (SPListItem li in liCol)
            {
                toReturn.Add(li);
            }
            return toReturn;
        }
    }

HTML

<link href="../../../_layouts/OrgChart/Include/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    jQuery(document).ready(function () {
        $("#org").jOrgChart({
            chartElement: '#chart',
            dragAndDrop: true
        });
    });

    var mynode;
    function fnExpand(node) {
        if (image.attr("src") == '../../../_layouts/OrgChart/Img/Collapse.png') {
            image.attr("src", '../../../_layouts/OrgChart/Img/Expand.png')
        }
        else {
            image.attr("src", '../../../_layouts/OrgChart/Img/Collapse.png')
        }
    }
</script>
<asp:label id="lblChartHtml" runat="server">

代码已改进，以添加展开和折叠图像。还有其他创建组织结构图的方法，包括现成的产品。如果您正在寻找一个简单的解决方案，那么您可以尝试这个并进行改进。