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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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 新手入门教程
2009/08/03 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
计算机求职信
2013/12/01 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
小学毕业家长寄语
2014/01/19 职场文书
文明班级建设方案
2014/05/15 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
庆国庆活动总结
2014/08/28 职场文书
大学生毕业评语
2014/12/31 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2016五一手机促销广告语
2016/01/28 职场文书