基于JQuery的asp.net树实现代码


Posted in Javascript onNovember 30, 2010

本tree的数据从sql的表中提取而来,sql表的结构如下:

基于JQuery的asp.net树实现代码

上面的表中  parentmodeuleID是代表父ID的标志,如果当前节点为根节点,则规定为0. 

然后就是如何将上面的单表来组成树状结构.这时我们可以利用IList来加载数据库models来实现,具体Tree类如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;


namespace RolePermission1
{
 public class Tree
 {
  public int ModuleID { get; set; }

  public int ParentID { get; set; }

  public string ModulePath { get; set; }

  public string ModuleName { get; set; }

  
 }
}

然后就是在公共处理页面,将数据库的数据进行组织,形成符合jquery tree的json格式,具体代码如下:

[WebMethod]
  public static string GetJson()
  {
   string json = "[";
   IList<Tree> t = DB.returnParentTree();
   foreach (Tree model in t)
   {
    if (model != t[t.Count - 1])
    {
     json += GetJsonByModel(model) + ",";
    }
    else
    {
     json += GetJsonByModel(model);
    }
   }
   json += "]";
   json=json.Replace("'","\"");
   return json;
  }

  public static string GetJsonByModel(Tree t)
  {
   string json = "";
   bool flag = DB.isHaveChild(t.ModuleID);

   json = "{"
      + "'id':'" + t.ModuleID + "',"
      + "'text':'" + t.ModuleName + "',"
      + "'value':'" + t.ModuleID + "',"
      + "'showcheck':true,"
      + "'checkstate':'0',"
      + "'hasChildren':" + flag.ToString().ToLower() + ","
      + "'isexpand':false,"
      + "'ChildNodes':"; /*奶奶的,这个地方一定要注意是ChildNodes 而不是childNodes 害得我无语了*/
   if (!flag)
   {
    json += "null,";
    json += "'complete':false}";
   }
   else
   {
    json += "[";
    IList<Tree> list = DB.getChild(t.ModuleID);
    foreach (Tree tree in list)
    {
     if (tree != list[list.Count - 1])
     {
      json += GetJsonByModel(tree) + ",";
     }
     else
     {
      json += GetJsonByModel(tree);
     }
    }
    json += "],'complete':true}";
   }
   return json;
  }

上面就是利用递归的方式来将数据库的数据组合成合适的json数据,利用到的数据库操作类代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

namespace RolePermission1
{
 public class DB
 {

  public static readonly string connStr=System.Configuration.ConfigurationManager.AppSettings["connStr"];

  public static SqlConnection GetConn()
  {
   SqlConnection conn = new SqlConnection(connStr);
   conn.Open();
   return conn;
  }

  public static DataTable GetDT(string sql)
  {
   DataTable dt = new DataTable();
   using (SqlConnection conn = DB.GetConn())
   {
    SqlDataAdapter sda = new SqlDataAdapter(sql, conn);
    sda.Fill(dt);
   }
   return dt;
  }

  public static IList<Tree> returnParentTree()
  {
   IList<Tree> t = new List<Tree>();
   string sql = "select * from Models where [ParentModuleID]=0 order by OrderBy asc";
   DataTable dt = GetDT(sql);
   foreach (DataRow dr in dt.Rows)
   {
    Tree tParent = new Tree();
    tParent.ModuleID = Int32.Parse(dr["ID"].ToString());
    tParent.ModuleName = dr["ModuleName"].ToString();
    tParent.ModulePath = dr["MenuPath"].ToString();
    tParent.ParentID = Int32.Parse(dr["ParentModuleID"].ToString());
    t.Add(tParent);
   }
   return t;
  }

  public static bool isHaveChild(int id)
  {
   bool flag=false;
   string sql = "select ID from Models where ParentModuleID="+id+"";
   DataTable dt = GetDT(sql);
   if (dt.Rows.Count > 0)
   {
    flag = true;
   }
   return flag;
   
  }
  public static IList<Tree> getChild(int id)
  {
   IList<Tree> t = new List<Tree>();
   string sql = "select * from Models where ParentModuleID=" + id + "";
   DataTable dt = GetDT(sql);
   foreach (DataRow dr in dt.Rows)
   {
    Tree tParent = new Tree();
    tParent.ModuleID = Int32.Parse(dr["ID"].ToString());
    tParent.ModuleName = dr["ModuleName"].ToString();
    tParent.ModulePath = dr["MenuPath"].ToString();
    tParent.ParentID = Int32.Parse(dr["ParentModuleID"].ToString());
    t.Add(tParent);
   }
   return t;
  }

 }
}

好了,当json数据处理好以后,就可以将json打到前台,交给jquery来处理了,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RolePermission1._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>
 <script src="jquery.treeview/lib/jquery.js" type="text/javascript"></script>
 <link href="jquery.treeview/tree.css" rel="stylesheet" type="text/css" />
 <script src="jquery.treeview/common.js" type="text/javascript"></script>
 <script src="jquery.treeview/jquery.tree.js" type="text/javascript"></script>
</head>
<body>
 <form id="form1">
  <button id="showchecked" runat="server">Get Selected Nodes</button>
 <div id="showTree" class="filetree">
 </div>
 </form>
</body>
 <script type="text/javascript">
  $(document).ready(function() {
  $.ajax({
   type: "post",
   contentType: "application/json;charset=utf-8",
   dataType: "json",
   url: "WebForm1.aspx/GetJson",
   success: function(data) {
    var o = { showcheck: true };
    o.data = eval(data.d);
    $("#showTree").treeview(o);
   }
   });
 });
 $("#showchecked").click(function(e) {
  var s = $("#showTree").getTSVs();
  if (s != null)
   alert(s.join(","));
  else
   alert("NULL");
 });
 </script>
</html>

好了,来看看加载结果吧:

基于JQuery的asp.net树实现代码

制作过程中需要注意的是:首先,递归必须正确;其次注意js大小写('ChildNodes'被我写成了'childNodes',花费了我一天时间才调整过来 晕哦) 再者就是可以直接调用公共页面的方法,只要在方法前面加上[webmethod]标记即可.

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 #Javascript
juqery 学习之四 筛选过滤
Nov 30 #Javascript
juqery 学习之四 筛选查找
Nov 30 #Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 #Javascript
xss文件页面内容读取(解决)
Nov 28 #Javascript
用js来解决ajax读取页面乱码
Nov 28 #Javascript
window.name代替cookie的实现代码
Nov 28 #Javascript
You might like
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python实现电子产品商店
2019/02/26 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python实现密码强度校验
2020/03/18 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
前台文员我鉴定
2014/01/12 职场文书
自我鉴定三原则
2014/01/13 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
生产文员岗位职责
2014/04/05 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
学习经验演讲稿
2014/05/10 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2015新学期家长寄语
2015/02/26 职场文书
护士自荐信范文
2015/03/25 职场文书
2015年保管员工作总结
2015/04/30 职场文书
河童之夏观后感
2015/06/11 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏