【.NET】EsayUI-Tree与后台的交互

最新推荐文章于 2022-05-15 13:49:52 发布

Dwyane-Kwok

最新推荐文章于 2022-05-15 13:49:52 发布

阅读量1.2k

点赞数 1

分类专栏： ※〖.NET〗文章标签： .net EasyUI-Tree Json

本文链接：https://blog.csdn.net/xiada_you_comeon/article/details/53233854

版权

※〖.NET〗专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于树形结构显示的内容有两种，一种是显示的内容直接来自于前台页面的固定文本，另一种是来自于数据库，就是将数据库里的内容进行提取，在页面进行显示。

第一种很容易实现，所以在这里不在多说。要实现第二种的效果，也有很多的实现方法。接下来我要介绍的这种方法是需要使用EasyUI-Tree。关于前台的树加载的文本是由固定的Json格式的，也就是说我们从后台获取的数据库内容是不能直接显示的，需要进行Json转换，这样才可以使前台顺利的显示我们的文本。

先看一下页面树加载的Json数据是什么格式的：

[{     
    "id": 1,     
    "text": "Node 1",     
    "state": "closed",     
    "children": [{     
        "id": 11,     
        "text": "Node 11"    
    },{     
        "id": 12,     
        "text": "Node 12"    
    }]     
},{     
    "id": 2,     
    "text": "Node 2",     
    "state": "closed"    
  
}]

下面就来看一下实现过程，在这里是使用一般处理程序与前台进行交互（相当于java中的controller）

一、前台代码

<html>
<head>
	<meta charset="UTF-8">
	<title>Tree Lines - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<div style="margin:10px 0;"></div>
	<div class="easyui-panel" title="项目问题" style="padding:5px">
		<ul class="easyui-tree" data-options="url:'../ashx/ListPage.ashx',method:'get',animate:true,lines:true"></ul>
	</div>
</body>
</html>

二、一般处理程序的代码

将DataTable转化为Json格式数据的过程：

public void Query(HttpContext context)  
{  
     context.Response.ContentType="text/plain"; 
     TreeBLL tree=new TreeBLL();
  
     //先获取关于项目的datatable  
     DataTable dtTreeInfo = newDataTable();  
     //通过调用D层信息获取  
     DataSet ds =TreeBLL.GetListTree("");  
     dtTreeInfo = ds.Tables[0];  
  
     //将项目表的信息与问题表的信息一起组合转化成前台需要的json数据的格式  
     string strJson =getJson(dtTreeInfo);  
     //返回给前台页面  
     context.Response.Write(strJson);
     context.Response.End();  
}  

   将DataTable转化为Json格式数据的过程：
/// <summary>  
/// 节点树的组合  
/// </summary>  
/// <paramname="dt">参数为DataTable</param>  
/// <returns></returns>  
public string getJson(DataTable dt)  
{  
     TreeBLL tree=new TreeBLL();
     StringBuilder json = newStringBuilder();  
     json.Append("[");  
     foreach (DataRow dr in dt.Rows)  
     {  
          json.Append("{\"id\":" +dr["id"].ToString());  
          json.Append(",\"text\":\"" +dr["name"].ToString() + "\"");  
          json.Append(",\"state\":\"closed\"");  
  
          DataTable dtChildren = newDataTable();  
  
          //调用D层方法获取dataTable  
          DataSet ds =characterizationTargetBLL.GetList(" type='" +dr["name"].ToString() + "'");  
          dtChildren = ds.Tables[0];  
  
          if (dt != null &&dt.Rows.Count > 0)  
          {  
               json.Append(",\"children\":[");  
               json.Append(DataTable2Json(dtChildren,Convert.ToInt32(dr["id"])));  
               json.Append("]");  
          }  
               json.Append("},");  

          }  
          if (dt.Rows.Count > 0)  
          {  
               json.Remove(json.Length - 1,1);  
          }  
         json.Append("]");  
         return json.ToString();  
     }  

/// <summary>    
/// dataTable转换成Json格式    
/// </summary>    
/// <param name="dt"></param>    
/// <returns></returns>    
public static string DataTable2Json(DataTable dt, int pid = -1)  
{  
     StringBuilder jsonBuilder = new StringBuilder();  

     for (int i = 0; i < dt.Rows.Count; i++)  
     {  
          jsonBuilder.Append("{");  
          for (int j = 0; j < dt.Columns.Count; j++)  
          {  
               int id = pid;  
               jsonBuilder.Append("\"");  
               dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();  
               if (dt.Columns[j].ColumnName == "name") dt.Columns[j].ColumnName = "text";  
               jsonBuilder.Append(dt.Columns[j].ColumnName);  
               if (dt.Columns[j].ColumnName.ToLower() == "id" && pid != -1)  
               {  
                    jsonBuilder.Append("\":" + (id * 10 + Convert.ToInt32(dt.Rows[i][j])) + ",");  
               }  
               else  
               {  
                    jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");  
               }  
          }  
  
          if (dt.Columns.Count > 0)  
          {  
               jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
          }  
               jsonBuilder.Append("},");  
     }  
            
     if (dt.Rows.Count > 0)    
     {  
          jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
     }  
     return jsonBuilder.ToString();  
}

下面我们就来看一下效果图

总结

工作和学习是相互促进的，在工作中解决问题，我们会学到更多的东西，并再次运用到工作中。

分享：第一种方法的应用

Dwyane-Kwok

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
23
评论
【.NET】EsayUI-Tree与后台的交互

关于树形结构显示的内容有两种，一种是显示的内容直接来自于前台页面的固定文本，另一种是来自于数据库，就是将数据库里的内容进行提取，在页面进行显示。第一种很容易实现，所以在这里不在多说。要实现第二种的效果，也有很多的实现方法。接下来我要介绍的这种方法是需要使用EasyUI-Tree。关于前台的树加载的文本是由固定的Json格式的，也就是说我们从后台获取的数据库内容是不能直接显示的，需要进行J
复制链接

扫一扫