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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
小程序实现分类页
Jul 12 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python中print函数简单使用总结
2019/08/05 Python
Python netmiko模块的使用
2020/02/14 Python
Python callable内置函数原理解析
2020/03/05 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
小结Python的反射机制
2020/09/28 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
网上书店创业计划书
2014/01/12 职场文书
家长评语大全
2014/01/22 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
2014年度思想工作总结
2014/11/27 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
政协常委会议主持词
2015/07/03 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python爬取某拍短视频
2021/06/11 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript