首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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]标记即可.

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

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue自定义filters过滤器
Apr 26 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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
验证码(1) PIL(1) SFTP(3) Pytesseract(1) 柱状图(1) 裁剪图片(1) 匹配文本(1) GCN(1) 文字识别(1) 追加文本(1)
You might like
PHP笔记之：日期函数的使用介绍
2013/04/24 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
初识PHP
2014/09/28 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js opener的使用详解
2014/01/11 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
移动端界面的适配
2017/01/11 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python性能优化的20条建议
2014/10/25 Python
python抽象基类用法实例分析
2015/06/04 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
2014年部门工作总结
2014/11/12 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
关于军训的感想
2015/08/07 职场文书
Python3 如何开启自带http服务
2021/05/18 Python