关于树形结构显示的内容有两种,一种是显示的内容直接来自于前台页面的固定文本,另一种是来自于数据库,就是将数据库里的内容进行提取,在页面进行显示。
第一种很容易实现,所以在这里不在多说。要实现第二种的效果,也有很多的实现方法。接下来我要介绍的这种方法是需要使用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();
}
下面我们就来看一下效果图
总结
工作和学习是相互促进的,在工作中解决问题,我们会学到更多的东西,并再次运用到工作中。