asp.net 组织结构图控件

记得之前做项目的时候客户需要看一个组织结构图,从而了解一下公司的概况,本来自己之前没有做过这方面的控件,只好找度娘,出于对项目的完美,网上很多控件画面感比较渣,后来只能在这些个中挑个比较好的来做,先看图:



第一个:

出自:http://philogb.github.io/jit/demos.html   可以去看看。

第二个:

这个控件的出处我记不清了,至于喜欢哪款,那就仁者见仁智者见智了。



第一款技术实现 看这 :http://philogb.github.io/jit/demos.html

第二款技术实现:http://files.cnblogs.com/files/houlin/Org.zip 源码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="asp_Demo.aspx.cs" Inherits="OrgCharts_asp_Demo" %>

<%@ Register Assembly="BPOrgDiagram" Namespace="BasicPrimitives.OrgDiagram" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui-1.10.2.custom.min.js"></script>
    <script type="text/javascript" src="../Scripts/json3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../Scripts/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
    <link href="../Scripts/primitives.latest.css" rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/primitives.min.js?204"></script>
    <style type="text/css">
        #Form
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="Form" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server">
    </asp:ScriptManager>
    <div style="width: 100%; float: left;">
        <cc1:OrgDiagramServerControl ID="orgDiagram" runat="server" BorderColor="White"
            BorderStyle="Solid" BorderWidth="1px" Width="100%" Style="margin-right: 0px;
            top: 48px; left: 11px; height: 800px;" OnItemCheckChanged="orgDiagram_ItemCheckChanged"
            OnSelectedItemChanged="orgDiagram_SelectedItemChanged" Height="700px" MaximumColumnsInMatrix="8"
            DotItemsInterval="10" DotLevelShift="10" ChildrenPlacementType="Horizontal" OnTemplateButtonClick="orgDiagram_TemplateButtonClick">
            <Buttons>
                <cc1:Button Name="展开" />
                <%--<cc1:Button Icon="Locked" Name="Locked" />--%>
                <cc1:Button Icon="Print" Name="以此为父节点导出EXCEL" />
            </Buttons>
        </cc1:OrgDiagramServerControl>
    </div>
    </form>
    <script type="text/javascript" src="../Scripts/UserTemplates.js?1029"></script>
</body>
</html>

后台实现:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BasicPrimitives.OrgDiagram;
using System.Drawing;
using BasicPrimitivesDemo;
using System.Data;
using CAF.DBUtility;
using Microsoft.Office.Interop.Excel;

public partial class OrgCharts_asp_Demo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // only bind the data on the first page load...只有绑定第一页上的数据加载…
        if (!Page.IsPostBack)
        {
            GetData();
        }
    }

    protected void orgDiagram_SelectedItemChanged(object sender, EventArgs e)
    {
        Item selectedItem = this.orgDiagram.SelectedItem;
    }

    protected void orgDiagram_ItemCheckChanged(object sender, EventArgs e)
    {
        Items checkedItems = this.orgDiagram.CheckedItems;
    }

    /// <summary>
    /// 点击框边的按钮触发的事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void orgDiagram_TemplateButtonClick(object sender, TemplateButtonClickEventArgs e)
    {
        String buttonName = e.ButtonName;//三按钮的名称

        Item clickedButtonItem = e.Item;

        string p_id = clickedButtonItem.Value;

        if (buttonName == "以此为父节点导出EXCEL")
        {
            //Excel_Out(p_id);
            //SetRangeBackground(4, 2, 6, 4, 003366);
        }
        else if (buttonName == "展开" && p_id != "01")
        {
            AddOrg(clickedButtonItem, clickedButtonItem.Value);
        }
    }

    /// <summary>
    /// 获取Data
    /// </summary>
    private void GetData()
    {
        this.orgDiagram.Items.Clear();
        DataSet ds = CAF.DBUtility.SqlHelper.ExecuteDataSet(" ");//数据源
this.ViewState["ds"] = ds;

        /* Root */
        Item MarkKornegay = new Item("集团", "01", "GM Group", "../images/photos/a.png");
        MarkKornegay.TemplateName = "UserTemplateContact";
        MarkKornegay.TitleColor = Color.CornflowerBlue;
        //MarkKornegay.GroupTitle = "Group";
        //MarkKornegay.GroupTitleColor = Color.Blue;
        MarkKornegay.ShowCheckBox = BasicPrimitives.OrgDiagram.Enabled.False;
        MarkKornegay.ShowButtons = BasicPrimitives.OrgDiagram.Enabled.True;

        this.orgDiagram.Items.Add(MarkKornegay);

        AddOrg(MarkKornegay, "01");
    }

    /// <summary>
    /// 追加节点
    /// </summary>
    /// <param name="P_Org_Item"></param>
    /// <param name="int_parent_id"></param>
    public void AddOrg(Item P_Org_Item, string int_parent_id)
    {
        string id = ""; string name = ""; string parent_org_id = ""; string org_type = "";

        DataSet ds = (DataSet)this.ViewState["ds"];

        DataRow[] dr = ds.Tables[0].Select(" parent_org_id = ‘" + int_parent_id + "‘ ");

        foreach (DataRow dr1 in dr)
        {
            id = dr1["id"].ToString();

            name = dr1["name"].ToString();

            parent_org_id = dr1["parent_org_id"].ToString();

            org_type = dr1["org_type"].ToString();

            Item demo_item = new Item(name, id, "test", "../images/photos/a.png");

            if (id.Length != 11)
            {
                demo_item.TemplateName = "UserTemplateContact";
            }
            demo_item.TitleColor = Color.CornflowerBlue;

            //demo_item.GroupTitle = "Group";

            //demo_item.GroupTitleColor = Color.Orange;

            demo_item.ShowCheckBox = BasicPrimitives.OrgDiagram.Enabled.False;

            demo_item.ShowButtons = BasicPrimitives.OrgDiagram.Enabled.True;

            P_Org_Item.Items.Add(demo_item);

            //AddOrg(demo_item, id);
        }
    }
} 
时间: 2024-11-13 10:05:51

asp.net 组织结构图控件的相关文章

初始ASP.NET数据控件【续 ListView】

ListView控件   ListView控件可以用来显示数据,它还提供编辑,删除,插入,分页与排序等功能.ListView是GridView与DataList的融合体,它具有GridView控件编辑数据的功能同时还具有DataList控件的灵活布局的功能.ListView控件的分页功能需要通过DataPager控件来实现. ListView控件的模版 LayoutTemplate:标识定义控件的主要布局的根模版.包含一个占位符对象,如表行(tr),div,span元素.此元素将由ItemTem

asp.net分页控件使用详解【附实例下载】

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

Asp.Net数据控件引用AspNetPager.dll分页

今天与大家分享一下"Asp.Net数据控件引用AspNetPager.dll分页"首先声明以下几点: 1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13,小生不才: 2.如有什么不对的地方,还希望大家指出,一定虚心学习: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 第一步:首先是下载一个AspNetPager.dll 下载地址 http://files.cnblogs.com/tand

ASP.NET控件&lt;ASP:Button /&gt; html控件&lt;input type=&quot;button&quot;&gt;区别联系

ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样的东西 服务器只认识input,我们可以直接写input 但是asp是要把自己自动翻译成input再交给服务器的.其实是一样的东西 写写我看到的区别:                asp控件,直接可以用c#编程                input加上 runat=“server” 也被c#编程了 说白

asp.net验证控件

asp.net验证控件的好处: 1,客户端服务器端都会同时校验. 2,简化校验逻辑. 1,RequiredFieldValidator:非空校验 InitialValue:默认值.当控件的值等于默认值时不能通过校验. Text:显示的错误信息. ControltoValidat:关联需要验证的控件. 2,RangeValidator:在给定的最大最小值之间. Type:需要验证的数据类型.MaximumValue:最大值.MinimumValue:最小值. 不会进行非空校验.如要进行非空校验需要

asp.net 不用控件 循环输出数据库数据的方法

不使用什么repeater gridview之类的控件,怎么才能输出数据库的数据到一个table ,我用response.write在后台,拼接 table 代码可以输出 但总是在页面的最上面 , 是不是要在aspx页面相应位置用<% %> 循环输出 但又提示找不到我后台填充的DATASET,因为听说公司做asp.net是不用控件的,想知道他们是怎么做输出数据库表格的,还请高手帮帮忙,谢谢了. 不明白来问我后台代码public string test = "";    pr

javascript获取asp.net服务器端控件的值

代码如下: <%@ Page Language="C#" CodeFile="A.aspx.cs" Inherits="OrderManage_A" %> <%@ Register Src="../UserControl/CtrlCalendar.ascx" TagName="CtrlCalendar" TagPrefix="uc1" %> <html>

asp.net验证控件详解

ASP.NET验证控件详解     现在ASP.NET,你不但可以轻松的实现对用户输入的验证,而且,还可以选择验证在服务器端进行还是在客户端进行,再也不必考虑那么多了,程序员们可以将重要精力放在主程序的设计上了. ASP.NET公有六种验证控件,分别如下: 控件名           功能描叙 RequiredFieldValidator(必须字段验证) 用于检查是否有输入值 CompareValidator(比较验证) 按设定比较两个输入 RangeValidator(范围验证) 输入是否在指

FineUIMvc v1.4.0 发布了(ASP.NET MVC控件库)!

FineUIMvc v1.4.0 已经于 2017-06-30 发布,FineUIMvc 是基于 jQuery 的专业 ASP.NET MVC 控件库,是我们的新产品.由于和 FineUI(专业版)共享前端库,所以从一开始功能就非常丰富,而且产品稳定可靠. 目前官网示例和版本记录已更新:官网示例:http://fineui.com/demo_mvc/更新记录:http://fineui.com/version_mvc/ FineUIMvc(基础版)完全免费 FineUIMvc(基础版)作为三石奉