JQuery_jquery를 기반으로 하는 ASP.NET 트리 구현 코드

이 트리의 데이터는 sql 테이블에서 추출되었습니다. sql 테이블의 구조는 다음과 같습니다.

위 표에서 parentmodeuleID는 상위 ID를 나타내는 기호로, 현재 노드가 루트 노드인 경우 0으로 지정됩니다.

다음 단계는 위의 단일 테이블로 트리 구조를 형성하는 방법입니다. 이때 IList를 사용하여 이를 달성하기 위한 특정 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 트리를 준수하는 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>

자, 로딩 결과를 살펴보겠습니다.

제작 과정에서 주의할 점은 다음과 같습니다. 첫째, 재귀가 정확해야 합니다. 둘째, js 대문자 사용에 주의하세요. ('ChildNodes'는 제가 'childNodes'로 썼는데 조정하는 데 하루가 걸렸습니다.) ; 셋째, 공개 페이지를 직접 메소드로 호출할 수 있습니다. 메소드 앞에 [webmethod] 표시를 추가하면 됩니다.