Javascript树型菜单(含源码)

看到园友发表了一篇关于JS树的文章，看了之后，觉得应该可以精简不少代码，

想到了以前做的项目里面用到了一个JS树，于是试着修改了一下，现把代码贴出来与大家共享，还请大家多扔砖头！

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!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>
    <link href="images/Tree/Tree.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tabMenu {
            border: 1px solid #A3C0E8;
            position: absolute;
            opacity: 0.9;
            display: none;
            cursor: pointer;
            border-collapse: collapse;
            z-index:9999;
            background-color:#fff;
        }
        #tabMenu td {
            border: 1px solid #A3C0E8;
            height: 30px;
            width: 120px;
            text-align: center;
        }
        .righText {
            text-align:right;
            width:120px;
            height:30px;
        }
        #tabDepartment td {
            border: 1px solid #A3C0E8;
        }
    </style>
    <script src="js/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="js/Tree.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
           
            reload();

            var dt = document.getElementById("Tree");
            dt.oncontextmenu = function() {
                return false;
            }
            document.onclick = function() {
                $("#tabMenu").css("display", "none");
            }
            $("#tabMenu").mouseleave(function() {
                $(this).css("display", "none");
            });
        });

        function reload() {
            $.ajax({
                type: 'POST',
                url: "Default.aspx/GetData2",
                data: "{ pid: 0 }",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(data) {
                    var obj = eval('(' + data.d + ')');
                    if (obj) {
                        var tree = new treeview("treeview", "/Images/Tree", false, false);
                        var dt = document.getElementById("Tree");
                        dt.innerHTML = "";
                        loopNode(obj, tree);
                        tree.create(dt);
                        tree.nodes.items[0].expand();
                    }
                },
                error: function(r, ex) {
                     
                }
            });
        }
        function stopBubble(e) {
            if (e && e.stopPropagation)
                e.stopPropagation();
            else
                window.event.cancelBubble = true;
            return false;
        }
        function loopNode(obj, parNode) {
            var nd = new node(obj.Name, obj.Name, "", obj.PID, obj.ID, false);
            parNode.add(nd);
            var len = obj.Child.length;
            if (len > 0) {
                for (var i = 0; i < len; i++) {
                    var d = obj.Child[i];
                    if (d.Child && d.Child.length > 0) {
                        loopNode(d, nd)
                    }
                    else {
                        nd.add(new node(d.Name, d.Name, "", d.PID, d.ID, false));
                    }
                }
            }
        }
        treeview.prototype.oncontextmenu = function(sender, e) {
            selectedNode = sender;
            var ps = sender.position(e);
            $("#tabMenu").css({ left: ps.x, top: ps.y, display: 'block' });
            return stopBubble(e);
        }
        treeview.prototype.onnodeclick = function(sender) {
            selectedNode = sender;
           
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Tree">
    
    </div>
    
        <table id="tabMenu" border="1">
        <tr>
            <td>添加</td>
        </tr>
        <tr>
            <td>修改</td>
        </tr>
        <tr>
            <td>删除</td>
        </tr>
    </table>
    </form>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Text;
using Utility;
using Newtonsoft.Json;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetData2(int pid)
        {
            StringBuilder sb = new StringBuilder();
            List<HRDepartmentEntity> alist = Getlist();
            List<HRDepartmentEntity> clist = alist.FindAll(p => p.ParentID == pid).OrderBy(q => q.DepartmentOrder).ToList();
          
            LoopDepartment(alist, clist, sb, pid);
            
            return sb.ToString();
        }

        [WebMethod]
        public static string GetData(int pid)
        {
            StringBuilder sb = new StringBuilder();
            List<HRDepartmentEntity> alist = Getlist();
            DepartmentSingle ds = new DepartmentSingle();
            ds.Name = "Test";
            LoopDepartment2(alist, ds);
            string str = JsonConvert.SerializeObject(ds);
            return str;
        }


        /// <summary>
        /// 得到组织架构列表
        /// </summary>
        /// <returns></returns>
        private static List<HRDepartmentEntity> Getlist()
        {
            return SQLServerHelper.ExecuteDataTable("select * from HR_Department").ToList<HRDepartmentEntity>();
        }

        private static void LoopDepartment2(List<HRDepartmentEntity> list1, DepartmentSingle ds)
        {
            List<HRDepartmentEntity> list2 = list1.FindAll(p => p.ParentID == ds.ID).OrderBy(q => q.DepartmentOrder).ToList();
            if (list2.Count > 0)
            {
                ds.Child = list2.ConvertAll<DepartmentSingle>(p => new DepartmentSingle { ID = p.DepartmentID, PID = p.ParentID, Name = p.DepartmentName });
                foreach (DepartmentSingle ds2 in ds.Child)
                {
                    LoopDepartment2(list1, ds2);
                }
            }
        }

        private static void LoopDepartment(List<HRDepartmentEntity> alist, List<HRDepartmentEntity> clist, StringBuilder sb, int pid)
        {
            for (int i = 0; i < clist.Count; i++)
            {
                HRDepartmentEntity entity = clist[i];
                int id = entity.DepartmentID;
                List<HRDepartmentEntity> list2 = alist.FindAll(p => p.ParentID == id).OrderBy(q => q.DepartmentOrder).ToList();
                sb.Append("{" + string.Format("ID:{0},PID:{1},Name:'{2}',Order:{3},Child:", id, entity.ParentID, entity.DepartmentName, entity.DepartmentOrder) + "[");
                if (list2.Count > 0)
                {
                    LoopDepartment(alist, list2, sb, id);
                }
                if (i < clist.Count - 1)
                {
                    sb.Append("]},");
                }
                else
                {
                    sb.Append("]}");
                }
            }
        }
    }

    /// <summary>
    /// 组织架构实体类
    /// </summary>
    public class HRDepartmentEntity
    {

        #region 私有变量
        private Int32 m_DepartmentID;
        private String m_DepartmentName;
        private Int32 m_ParentID;
        private String m_ParentName;
        private String m_DepartmentIcon;
        private String m_ResponsiblePerson;
        private String m_Tel;
        private String m_Email;
        private String m_Description;
        private Int32 m_DepartmentOrder;
        private Int32 m_IsDelete;
        private DateTime m_DeleteTime;
        #endregion

        # region 属性方法

        public Int32 DepartmentID
        {
            get { return m_DepartmentID; }
            set { m_DepartmentID = value; }
        }

        public String DepartmentName
        {
            get
            {
                return m_DepartmentName;
            }
            set { m_DepartmentName = value; }
        }

        public Int32 ParentID
        {
            get { return m_ParentID; }
            set { m_ParentID = value; }
        }

        public String ParentName
        {
            get
            {
                return m_ParentName;
            }
            set { m_ParentName = value; }
        }

        public String DepartmentIcon
        {
            get
            {
                return m_DepartmentIcon;
            }
            set { m_DepartmentIcon = value; }
        }

        public String ResponsiblePerson
        {
            get
            {
                return m_ResponsiblePerson;
            }
            set { m_ResponsiblePerson = value; }
        }

        public String Tel
        {
            get
            {
                return m_Tel;
            }
            set { m_Tel = value; }
        }

        public String Email
        {
            get
            {
                return m_Email;
            }
            set { m_Email = value; }
        }

        public String Description
        {
            get
            {
                return m_Description;
            }
            set { m_Description = value; }
        }

        public Int32 DepartmentOrder
        {
            get
            {
                return m_DepartmentOrder;
            }
            set { m_DepartmentOrder = value; }
        }

        public Int32 IsDelete
        {
            get
            {
                return m_IsDelete;
            }
            set { m_IsDelete = value; }
        }

        public DateTime DeleteTime
        {
            get
            {
                return m_DeleteTime;
            }
            set { m_DeleteTime = value; }
        }
        #endregion
    }

    public class DepartmentSingle
    {
        public int ID;
        public int PID;
        public string Name;
        public List<DepartmentSingle> Child;
    }
}

ok了~~就这些，完整源代码下载

posted @ 2010-03-10 11:03 亦心阅读(4048) 评论(28) 编辑收藏举报

刷新页面返回顶部

Javascript树型菜单(含源码)

公告