Jquery.TreeView结合ASP.Net和数据库生成菜单导航条


Posted in Javascript onAugust 27, 2010

下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件
下面就把我生成的TreeView展现给大家看看希望对大家有所帮助!在使用之前需要下载控件树的js文件和Css样式

介绍一下表结构

M_ID M_Name M_ParentID M_URL M_Sort
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
然后新建一个网站,在新建的网站下添加CSS文件夹和js文件夹分别用于存放Css样式和JS,同时再添加一个image文件夹用于存放TreeView的图片
接着我们就开始实现我们的功能了!
前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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 rel="stylesheet" href="CSS/screen.css" /> 
<link rel="Stylesheet" href="CSS/jquery.treeview.css" /> 
<script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="js/jquery.treeview.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#tree").treeview(); 
}) 
</script> 
</head> 
<body> 
<div id="main"> 
<a>Main Demo</a> 
<div id="sidetree"> 
<ul id="tree" runat="server"> 
</ul> 
</div> 
</div> 
</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.Data; 
using System.Data.SqlClient; 
using System.Web.UI.HtmlControls; 
public partial class _Default : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
DataSet ds = getDate(); 
createmenu(ds, null, tree); 
} 
} 
public DataSet getDate() 
{ 
DataSet ds = new DataSet(); 
string config = System.Configuration.ConfigurationManager.ConnectionStrings["LiveOffice"].ToString(); 
SqlConnection conn = new SqlConnection(config); 
SqlDataAdapter da = new SqlDataAdapter("select * from SystemMenu order by M_Sort", conn); 
da.Fill(ds); 
return ds; 
} 
private void createmenu(DataSet ds, string parentId, HtmlGenericControl UL) 
{ 
DataRow[] rows; 
if (string.IsNullOrEmpty(parentId)) 
rows = ds.Tables[0].Select("M_ParentID is null");//过滤 
else 
rows = ds.Tables[0].Select("M_ParentID='" + parentId + "'");//过滤 
foreach (DataRow t in rows) 
{ 
DataRow[] childern = ds.Tables[0].Select("M_ParentID =" + t["M_ID"].ToString());//用于判断是否有子节点 
HtmlGenericControl serverLi = new HtmlGenericControl("li");//生成Li标签,作为父节点 
if (childern.Length != 0 || parentId == "")//是父节点 
{ 
serverLi.InnerText = t["M_name"].ToString(); 
HtmlGenericControl serverUL = new HtmlGenericControl("ul"); 
serverLi.Controls.Add(serverUL); 
UL.Controls.Add(serverLi); 
createmenu(ds, t["M_ID"].ToString(), serverUL); 
} 
else 
{ 
//生成标签a 
HtmlAnchor NewAnchorControl = new HtmlAnchor(); 
// 设置标签a的属性 
NewAnchorControl.Name = "NewAnchorControl"; 
NewAnchorControl.InnerHtml = t["M_Name"].ToString(); 
NewAnchorControl.HRef = t["M_URL"].ToString(); 
NewAnchorControl.Target = "_black";//设置显示的位置,这里改一下 
serverLi.Controls.Add(NewAnchorControl); 
UL.Controls.Add(serverLi); 
createmenu(ds, t["M_ID"].ToString(), UL); 
} 
} 
} 
}
Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
k8s node节点重新加入master集群的实现
Feb 22 Javascript
jquery 插件开发备注
Aug 27 #Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 #Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 #Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 #Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 #Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 #Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
php计算一个文件大小的方法
2015/03/30 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
如何编写jquery插件
2017/03/29 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python实现的计数排序算法示例
2017/11/29 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
详解python持久化文件读写
2019/04/06 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
numba提升python运行速度的实例方法
2021/01/25 Python
德国家具折扣店:POCO
2020/02/28 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
班级心理活动总结
2014/07/04 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
酒店温馨提示语
2015/07/14 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
SQL Server中锁的用法
2022/05/20 SQL Server
mysql序号rownum行号实现方式
2022/12/24 MySQL