JQuery_jquery に基づく ASP.NET ツリー実装コード

このツリーのデータは SQL テーブルから抽出されます。SQL テーブルの構造は次のとおりです。

上記の表において、parentmodeuleIDは親IDを表す記号であり、現在のノードがルートノードの場合は0と指定されます。

次のステップは、上記の単一テーブルでツリー構造を形成する方法です。この時点で、IList を使用してデータベース モデルをロードし、これを実現します。

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」と書きましたが、それを調整するのに 1 日かかりました)。 ; 第三に、メソッドの前に [webmethod] マークを追加するだけで、パブリック ページを直接呼び出すことができます。