ASP.NET基于JQUERY的高性能的TreeView

最新推荐文章于 2018-09-10 19:59:00 发布
最新推荐文章于 2018-09-10 19:59:00 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript专栏 ASP.NET专栏 文章标签： jquery asp.net url string null dataset
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuwenwu/article/details/6713983
版权
 

根据 假正经哥哥 的博客整理，我第一次使用的另外的TREEVIEW，可是 做出来的效果 太卡，不知道什么原因。这次用的假正经哥哥的这篇文章。

下面贴上完整的代码，我走了很多弯路，原因就是看了回复中朋友们的代码，现在想起来其实不用那么费事吧。

前台

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

<!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 src="../Scripts/JQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.treeView.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/treeView.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {

                $.ajax({

                    type: "POST",

                    dataType: "json",

                    url: "TreeHandler.ashx",

                    success: function (data) {

                        var o = { showcheck: true };
                        o.data = data ;

                        $("#divTree").treeview(o);

                    }

                });

                $("#showchecked").click(function (e) {
                    var s = $("#divTree").getTSVs();
                    if (s != null)
                        alert(s.join(","));
                    else
                        alert("NULL");
                });
                $("#showcurrent").click(function (e) {
                    var s = $("#divTree").getTCT();
                    if (s != null)
                        alert(s.text);
                    else
                        alert("NULL");
                });

            });  
            
        </script>
        <button id="showchecked">Get Seleceted Nodes</button>
        <button id="showcurrent">Get Current Node</button>
        <div id="divTree">
        </div>
    </div>
    </form>
</body>
</html>


后台，我用的HttpHander作为数据处理的源，代码如下：

<%@ WebHandler Language="C#" Class="TreeHandler" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;

public class TreeHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "application/json";
        string jsonresult = GetTreeViewJson();
        
        context.Response.Write(jsonresult);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    private DataTable GetTable(string commandString)
    {
        SqlConnection con = new SqlConnection("Server=.;DataBase=Exam;UID=sa;Pwd=xuwenwu_1983");
        con.Open();
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter(commandString, con);
        da.Fill(ds);
        DataTable dt = ds.Tables[0];

        return dt;
    }
    
    public string GetTreeViewJson()
    {
        string mystr = "[";
        DataTable dt = GetTable("SELECT * FROM TreeView WHERE ParentId IS NULL");
        int a = dt.Rows.Count;
        foreach (DataRow row in dt.Rows)
        {
            mystr += GetChildJson(row["Id"].ToString()) + ","; 
        }
        mystr = mystr.Substring(0, mystr.Length - 1);
        mystr += "]";
        mystr = mystr.Replace("'", "\"");
        return mystr;

    }
    //递归
    private string GetChildJson(string parentId)
    {
        DataTable dt = GetTable("SELECT * FROM TreeView WHERE Id = '" + parentId + "'");
        string strjson = "";
        bool haschild = IsHasChild(parentId);
        strjson = "{";
        strjson += "'id':'" + parentId + "',";
        strjson += "'text':'" + dt.Rows[0]["NodeName"].ToString() + "',";
        strjson += "'value':'" + dt.Rows[0]["ID"].ToString() + "',";
        strjson += " 'showcheck':true,";
        strjson += " 'complete':true,";
        strjson += "'checktate':0,";
        strjson += "'hasChildren':" + haschild.ToString().ToLower() + ",";
        strjson += "'ChildNodes':";

        if (!IsHasChild(parentId))
        {
            strjson += "null}";
        }
        else
        {
            strjson += "[";
            DataTable mydt = GetTable("SELECT * FROM TreeView WHERE ParentId='" + parentId + "'");
            for (int i = 0; i <= mydt.Rows.Count - 1; i++)
            {
                strjson += GetChildJson(mydt.Rows[i]["Id"].ToString()) + ",";
            }
            strjson = strjson.Substring(0, strjson.Length - 1);
            strjson += "]}";

        }
        return strjson;
    }

    private bool IsHasChild(string parentId)
    {
        DataTable dt = GetTable("SELECT * FROM TreeView WHERE ParentId ='" + parentId + "'");
        if (dt.Rows.Count == 0)
        {
            return false;
        }
        else
        {
            return true;
        }
    }

}

 

 图片资源：

数据库设计：

USE [Exam]
GO

/****** Object:  Table [dbo].[TreeView]    Script Date: 08/24/2011 14:33:24 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[TreeView](
	[ID] [uniqueidentifier] NOT NULL,
	[NodeName] [varchar](200) NULL,
	[ParentId] [uniqueidentifier] NULL,
	[OrderNum] [int] NULL,
 CONSTRAINT [PK_TreeView] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


 CSS样式：

.ie .bbit-tree .bbit-tree-bwrap{

}
.bbit-tree ul,.bbit-tree li
{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.bbit-tree-body
{
     font-size:12px;
}
.bbit-tree-icon, .bbit-tree-ec-icon, .bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow, .bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-repeat: no-repeat;
}
 .bbit-tree-node-cb
 {
     height:16px;
 }
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-position:center;
    background-repeat: no-repeat;
}

.ie .bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie .bbit-tree-ec-icon {
    vertical-align:middle !important;
}

.bbit-tree-noicon .bbit-tree-node-icon{
    width:0; height:0;
}

/* No line styles 没有线的样式 */
.bbit-tree-no-lines .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-line{
    background:transparent;
}

/* Arrows Vista系统树的样式只有箭头*/
.bbit-tree-arrows .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-line{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-minus{
    background-position:-48px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-minus{
    background-position:-48px 0;
}

.bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    cursor:pointer;
}

.ie ul.bbit-tree-node-ct{
    font-size:0;
    line-height:0;
    zoom:1;
}

.bbit-tree-node{
    white-space: nowrap;
}

.bbit-tree-node-el {
    line-height:18px;
    cursor:default;
   /* cursor:pointer;*/
}

.bbit-tree-node a{
    text-decoration:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:ignore;
    -kthml-user-focus:normal;
    -moz-user-focus:normal;
    -moz-outline: 0 none;
    outline:0 none;
}

.bbit-tree-node a span{
    text-decoration:none;
    padding:1px 3px 1px 2px;
}

.bbit-tree-node .bbit-tree-node-disabled .bbit-tree-node-icon{
   -moz-opacity: 0.5;
   opacity:.5;
   filter: alpha(opacity=50);
}

.bbit-tree-node .bbit-tree-node-inline-icon{
    background:transparent;
}

.bbit-tree-node a:hover{
    text-decoration:none;
}



/* Fix for ie rootVisible:false issue，修正一个IEdebug */
.bbit-tree-root {
    zoom:1;
}


/***********这里是图标了，可以在这里替换哦*****************/
.bbit-tree-node-expanded .bbit-tree-node-icon{
    background-image:url(../images/treeview/folder-open.gif);
}

.bbit-tree-node-leaf .bbit-tree-node-icon{
    background-image:url(../images/treeview/leaf.gif);
}

.bbit-tree-node-collapsed .bbit-tree-node-icon{
    background-image:url(../images/treeview/folder.gif);
}

.bbit-tree-node-loading .bbit-tree-node-icon{
    background-image:url(../images/treeview/loading.gif) !important;
}

.bbit-tree-node .bbit-tree-node-inline-icon {
    background-image: none;
}

.bbit-tree-node-loading a span{
     font-style: italic;
     color:#444444;
}

.bbit-tree-lines .bbit-tree-elbow{
    background-image:url(../images/treeview/elbow.gif);
}

.bbit-tree-lines .bbit-tree-elbow-plus{
    background-image:url(../images/treeview/elbow-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-minus{
    background-image:url(../images/treeview/elbow-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end{
    background-image:url(../images/treeview/elbow-end.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-plus{
    background-image:url(../images/treeview/elbow-end-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-minus{
    background-image:url(../images/treeview/elbow-end-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-line{
    background-image:url(../images/treeview/elbow-line.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-plus{
    background-image:url(../images/treeview/elbow-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-minus{
    background-image:url(../images/treeview/elbow-minus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-plus{
    background-image:url(../images/treeview/elbow-end-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-minus{
    background-image:url(../images/treeview/elbow-end-minus-nl.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background-image:url(../images/treeview/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background-image:url(../images/treeview/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background-image:url(../images/treeview/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background-image:url(../images/treeview/arrows.gif);
}

/*TreeNode 选中的Disabled的一些颜色，字体样式*/
.bbit-tree-node{
    color:#000;
    font: normal 11px arial, tahoma, helvetica, sans-serif;
}

.bbit-tree-node a{
    color:#000;
}
.bbit-tree-node a span{
    color:#000;
}
.bbit-tree-node .bbit-tree-node-disabled a span{
    color:gray !important;
}
.bbit-tree-node .bbit-tree-node-over {
    background-color: #eee;
}

.bbit-tree-node .bbit-tree-selected {
    background-color: #d9e8fb;
}

 

完整源码：Jquery TreeView源码

 

最后数据库 大家看着建就行了 再次 感谢 不正经哥哥  感谢回复的朋友们

 

xuwenwu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET中基于JQUERY的高性能的TreeView补充
12-04
下面贴上完整的代码，我走了很多弯路，原因就是看了回复中... 代码如下: [removed][removed] [removed][removed] <link href=”second.css” rel=”stylesheet” type=”text/css” /> [removed] $(function(){
打造基于jQuery的高性能TreeView(asp.net)
12-11
3：Checkbox树（可能是静态树也可能是异步树），用于选择（如选择组织机构，选择数据字典项）等，最好是能够支持节点级联（这个是难点）4：能够承载大数据量，并性能表现优异5：能够在主流浏览器中运行良好 ...
黑马二期ASP.NET视频教程
weixin_30362083的博客
09-10 616
2012-05-28-Net基础加强 01练习点评 02语法规范 03简易计算器 04C#程序编写-编译 05面向对象介绍-什么是类-什么是对象-如何分析提取类和对象 06封装一个类来实现计算器 07猜拳游戏 08添加项目的引用 09变量作用域2012-05-29-Net基础加强 01复习 02封装 03继承1 04继承2 05继承3-继承中...
【ASP.NET】asp,c#命名规则参考
chuange6363的博客
09-18 158
命名规则参考：1.从组件类型名中移去T前缀。例如TButton变成Button。2.除了第一个元音，删去所有元音字母。例如，Button变成bttn，Edit变成edt。3.压缩双字母。例如，bttn变成btn。4.如相同前缀名导致发生冲突，则在某一组件前缀中加入一个元音。例如在TBut...
asp.net命名规则参考
weixin_33973609的博客
11-19 106
【转】【ASP.NET】asp,c#命名规则参考 命名规则参考：1.从组件类型名中移去T前缀。例如TButton变成Button。2.除了第一个元音，删去所有元音字母。例如，Button变成bttn，Edit变成edt。3.压缩双字母。例如，bttn变成btn。4.如相同前缀名导致发生冲突，则在某一组件前缀中加入一个元音。例如在TButton组件的前缀中加入元音变为batn，以区别But...
ASP.NET典型三层架构企业级医药行业ERP系统实战
各研发管理
05-14 306
我这里有一套课程和大家分享，我的qq是2059055336， 课程说明：国内首部完整讲述ERP系统架构、业务逻辑、开发的项目实战课程。考虑到本系统的庞大及复杂性、本课程原价购买学员每人赠送一个U盾设备，U盾可插在任意电脑上进行学习,使用方便,学习灵活！可永久学习！ 项目由来：此项目是讲师亲自参与构架及参与开发的大型ERP项目，此项目已被太阳石药业，九芝堂药业，拜欧药业等多家大中型企业使用，...
C#.NET 4.0高级编程技术总结
weixin_33795833的博客
01-06 246
2019独角兽企业重金招聘Python工程师标准>>> ...
.Net面试题汇总
wzh1215的专栏
04-02 2583
<br />1、简述 private、 protected、 public、 internal 修饰符的访问权限。<br /><br /> private : 私有成员, 在类的内部才可以访问。<br /><br /> protected : 保护成员，该类内部和继承类中可以访问。<br /><br /> public : 公共成员，完全公开，没有访问限制。<br /><br /> internal: 当前程序集内可以访问。<br /><br />  <br /><br /> 2、ADO.NET
.net 02
疯狂程序员
09-23 3014
-
[知识库分享系列] 二、.NET（ASP.NET）
weixin_33695082的博客
06-19 357
最近时间又有了新的想法，当我用新的眼光在整理一些很老的知识库时，发现很多东西都已经过时，或者是很基础很零碎的知识点。如果分享出去大家不看倒好，更担心的是会误人子弟，但为了保证此系列的完整，还是选择分享出去，毕竟也是自己的成长过程，各取所好吧！在分享知识库节点时，我会写清楚此知识库节点的入手级别，请大家根据需要下载，免得不必要的吐嘈。但我确定总有子节点对你有用，并且相信接下来的分享会更精彩，不了解前...
ASP.NET典型三层架构企业级医药行业ERP系统实战(8大模块22个子系统)
weixin_30276935的博客
12-18 266
课程学习地址:http://***/goods.php?id=180 课程说明：国内首部完整讲述ERP系统架构、业务逻辑、开发的项目实战课程。考虑到本系统的庞大及复杂性、本课程购买学员每人赠送一个U盾设备，U盾可插在任意电脑上进行学习,使用方便,学习灵活！可永久学习！ 项目由来：此项目是讲师亲自参与构架及参与开发的大型ERP项目，此项目已被太阳石药业，九芝堂药业，拜欧药业等多家大中...
基于jQuery实现的asp.net网站后台框架
09-29
这个基于jQuery实现的ASP.NET网站后台框架，充分利用了jQuery的优势，为开发者提供了更为便捷的开发体验。 1. **分栏布局**：框架采用了常见的上、左、右三栏布局模式，这种布局方式在网页设计中很常见，能够清晰地...
用JavaScript实现类似于ToolTip的悬浮框并加入超级链接
01-19 2549
    style type="text/css">...    /**//* YOU CAN REMOVE THIS PART */    body{...}{        background-image:url(../../images/heading3.gif);        background-repeat:no-repeat;        padding-top:85p
通过DIV显示GridView中每行的图片
03-27 1735
1.前台代码:...@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageControl.ascx.cs" Inherits="usercontrol_ImageControl" %>...@ Register Src="FolderTree.ascx" TagName="FolderTree" TagPrefix="u
ASP.NET基于JQUERY的可拖拽树
08-24 1629
由于项目需要，在网上收集了不少资料，关于树的拖拽，使用Jquery实现异步加载数据，不多说，下面让我们开始我们的拖拽至旅。 前台代码： var simpleTreeCo
让showModalDialog显示修改后的记录,并点击服务器端控件后不弹出网页
03-19 964
      要让弹出的模式对话框获得最新的记录,就需要清空模式对话框所在网页的缓存,以便能得到最新记录,这就需要在网页的中间添加如下代码:meta http-equiv="PRAGMA" content="NO-CACHE">      为了能够正常使用模式对话框中的服务器端控件,避免弹出网页的烦恼,在网页的标头中加如下代码:   base target="_self" /
一个不错的幻灯片效果(JS脚本)
03-18 918
 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>    title>图片新闻title>    meta 
正则表达式中的特殊字符
07-14 742
字符含意\做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。 -或- 对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配
[ASP.NET]Treeview
最新发布
05-26
在 ASP.NET 中使用 TreeView 控件很简单。你可以在 .aspx 页面上添加以下代码： ```html <asp:TreeView ID="TreeView1" runat="server"> <asp:TreeNode Text="Node 1"> <asp:TreeNode Text="Node 1.1"></asp:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值