JQuery插件中的treeview与asp.net mvc的结合使用实例
treeview插件的官方demo地址：http://jquery.bassistance.de/treeview/demo/
实现步骤：
一、新建一JQueryTreeviewController，其默认的Index View内容如下：
<link rel="stylesheet" href="/Content/jquery.treeview.css" />
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.async.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#black").treeview({
url: '<%=Url.Action("GetMenuTree","JQueryTreeview") %>'
});
});
</script>
<h2>TreeViewIndex</h2>
<ul id="black" class="navigateFiletree">
</ul>
从以上代码中可以看出，获取此视图后，当页面就绪时将调用GetMenuTree action方法来获取treeview插件所需要的json字符串，并且自动生成树形。
注：代码中引用的js和css文件，在下载的treeview插件包中可以找到。
二、实现GetMenuTree action方法，代码如下：
public JsonStringResult GetMenuTree()
{
string sql = "SELECT [ModuleID],[SuperModuleID] FROM [SysModules]";
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ApplicationServices"].ConnectionString))
{
conn.Open();
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = sql;
DataTable dt = new DataTable();
SqlDataReader reader = cmd.ExecuteReader();
dt.Load(reader);
reader.Close();
conn.Close();
return this.JsonString(JQTreeHelper.GetJsonString(dt, "ModuleID", "ModuleID", "SuperModuleID", ""));
}
}
其作用就是从数据库中读取出需要显示成树形的数据，并且调用JQTreeHelper来生成相应的json字符串，其返回结果中的JsonStringResult 是自定义的一个result类，其作用基本与系统自带的JsonResult相同，只是输出文本时不再进行json序列化而已。
三、实现JQTreeHelper类，代码如下：
/// <summary>
/// jquery插件中的treeview控件的帮助类，用于生成treeview控件所需要的html代码结构
/// </summary>
public static class JQTreeHelper
{
public static List<JQTreeNode> GetJsonData(DataTable dtAllNodes,string idColumnName,string textColumnName,string parentIdColumnName,string rootNodeParentIdValue)
{
List<JQTreeNode> rootNodes = new List<JQTreeNode>();
DataView dvRootNodes = new DataView(dtAllNodes);
dvRootNodes.RowFilter = parentIdColumnName + "='" + rootNodeParentIdValue + "'";
foreach (DataRowView dv in dvRootNodes)
{
JQTreeNode node = new JQTreeNode();
if (dv[idColumnName] != DBNull.Value)
{
node.id = dv[idColumnName].ToString();
}
node.text = dv[textColumnName].ToString();
node.children = GetJsonData(dtAllNodes, idColumnName, textColumnName, parentIdColumnName, dv[idColumnName].ToString());
rootNodes.Add(node);
}
return rootNodes;
}
public static string GetJsonString(DataTable dtAllNodes, string idColumnName, string textColumnName, string parentIdColumnName, string rootNodeParentIdValue)
{
List<JQTreeNode> actual;
actual = GetJsonData(dtAllNodes, idColumnName, textColumnName, parentIdColumnName, rootNodeParentIdValue);
//序列化后，由于默认将所有字段都序列化输出，所以需要将没有赋值取默认值的字段替换为空，以此来减少输出的字符数
StringBuilder result = new StringBuilder();
new JavaScriptSerializer().Serialize(actual, result);
result.Replace("\"id\":null,", "");
result.Replace(",\"expanded\":false", "");
result.Replace(",\"hasChildren\":false", "");
result.Replace(",\"classes\":null", "");
result.Replace(",\"children\":null", "");
return result.ToString();
}
}
/// <summary>
/// jquery插件中的treeview控件进行ajax请求时返回的json数据对象
/// </summary>
public class JQTreeNode
{
/// <summary>
/// 树节点id
/// </summary>
public string id { get; set; }
/// <summary>
/// 树节点文本
/// </summary>
public string text { get; set; }
/// <summary>
/// 是否展开
/// </summary>
public bool expanded { get; set; }
/// <summary>
/// 是否有子节点
/// </summary>
public bool hasChildren { get; set; }
/// <summary>
/// cssclass类名称
/// </summary>
public string classes { get; set; }
/// <summary>
/// 子节点集合
/// </summary>
public List<JQTreeNode> children { get; set; }
}
到此代码就全部结束。
