基于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 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue分页插件的使用方法
Dec 25 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 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的安全策略
2006/10/09 PHP
php 面向对象的一个例子
2011/04/12 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python实现Const详解
2015/01/27 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python集合删除多种方法详解
2020/02/10 Python
python数字类型math库原理解析
2020/03/02 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
高中数学教学反思
2014/01/30 职场文书
函授本科自我鉴定
2014/02/04 职场文书
医院总经理岗位职责
2014/02/04 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
导游词之贵州织金洞
2019/10/12 职场文书