基于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 代码也可以变得优美的实现方法
Jun 22 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
js实现有趣的倒计时效果
Jan 19 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中PDO基础教程 入门级
2011/09/04 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JS高级运动实例分析
2016/12/20 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
家庭教育先进个人事迹材料
2014/01/24 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
领导班子整改方案
2014/10/25 职场文书