基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
本文支持兩種方式的數(shù)據(jù),一種為L(zhǎng)ist集合,一種為json字符串。
先來(lái)介紹一下后臺(tái)返回list集合(推薦使用此方法):
控制器代碼如下:
public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>();
/// <summary>
/// TreeView視圖
/// </summary>
/// <returns></returns>
public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
}
[HttpPost]
public ActionResult GetTreeData(string TypeCode,int parentId)
{
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode="+TypeCode);
return Json(GetChildNodes(0,new NodeModel(){}, DInfo).nodes);
}
///<summary>
/// GetChildNodes方法,此方法使用遞歸
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
public NodeModel GetChildNodes(int parentId,NodeModel childnodestr,List<TC_DictionaryInfo> DInfo)
{
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
for (int i = 0; i < DictionaryList.Count; i++)
{
NodeModel NewNode = new NodeModel();
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
childnodestr.nodes.Add(NewNode);
GetChildNodes(NewNode.DicId, NewNode, DInfo);
}
return childnodestr;
}
視圖代碼如下:
<script type="text/javascript">
var typecode = @ViewBag.TypeCode;
var parentid = @ViewBag.ParentId;
$(function() {
$.ajax({
type: 'Post',
url: '/Type/GetTreeData',
data:{
TypeCode:typecode,
ParentId:parentid,
},
//data: para,
dataType: 'json',
async: false,
success: function (data) {
var defaultData = eval(data);
//var defaultData = data;
$('#treeview4').treeview({
color: "#428bca",
data: defaultData
});
},
error: function (err) {
alert('不好意思,數(shù)據(jù)忘記帶上了。。。');
}
});
</scipt>
第二種方式為后臺(tái)返回json字符串這種方式(此方式為后臺(tái)拼接json字符串傳給前臺(tái)):
不建議大家采用這種方式,比較容易出錯(cuò)。
public ActionResult May(string TypeCode,int parentId)
{
ViewBag.TypeCode = TypeCode;
ViewBag.ParentId = parentId;
return View();
}
public ActionResult GetTreeData()
{
//創(chuàng)建jsondata對(duì)象
StringBuilder jsonData = new StringBuilder();
//拼接json字符串 開(kāi)始{
jsonData.Append("[");
//調(diào)用GetChildNodes方法,默認(rèn)傳參試為0(0表示根節(jié)點(diǎn)菜單選項(xiàng))
jsonData.Append(GetChildNodes(0));
//閉合Node子類數(shù)組 ]
jsonData.Append("]");
//返回json字符串
return Json(jsonData.ToString());
}
/// <summary>
/// GetChildNodes方法,此方法使用遞歸
/// </summary>
/// <param name = "parentId" ></ param >
/// < returns ></ returns >
public string GetChildNodes(int parentId)
{
//為DInfo賦值(DInfo承載頁(yè)面所需的值(間接將值傳給頁(yè)面)),查詢所有的數(shù)據(jù)
List<TC_DictionaryInfo> DInfo = dbll.GetModelList("");
//創(chuàng)建ChiidNodeStr變量
StringBuilder ChildNodeStr = new StringBuilder();
//查詢符合條件的數(shù)據(jù)(ParentId=0),DictionaryList接收數(shù)據(jù)
List<TC_DictionaryInfo> DictionaryList = DInfo.Where(e => Convert.ToInt32(e.ParentId) == parentId).ToList();
//循環(huán)DictionaryList為T(mén)reeView所需數(shù)據(jù)分層級(jí)(即子類、父類等節(jié)點(diǎn)分開(kāi))
for (int i = 0; i < DictionaryList.Count; i++)
{
//Nodes數(shù)組開(kāi)始 {
ChildNodeStr.Append("{");
//實(shí)例化NewNode
NodeModel NewNode = new NodeModel();
//分別為字段賦值
NewNode.DicId = DictionaryList[i].DicId;
NewNode.text = DictionaryList[i].DICName;
NewNode.ParentId = DictionaryList[i].ParentId;
//將要顯示的字段拼接
ChildNodeStr.Append("text:'" + NewNode.text + "',");
//超鏈接地址(此處設(shè)置為空鏈接#)
ChildNodeStr.Append("href:'#parent1',");
ChildNodeStr.Append("tags:['0']");
//拼接完畢子類分層,去掉最后多余的符號(hào)(,)
string ChildNodes = GetChildNodes(NewNode.DicId).Trim(',');
//判斷父類下是否有子類,如果有子類放到Nodes里,如果沒(méi)有不讓他顯示為數(shù)組形式“[]”
if (ChildNodes != string.Empty)
{
//拼接Json字符串格式
ChildNodeStr.Append(",");
ChildNodeStr.Append("nodes:[");
ChildNodeStr.Append(ChildNodes);
ChildNodeStr.Append("]");
}
//結(jié)尾加上},
ChildNodeStr.Append("},");
}
//返回Json字符串,并將,去掉
return ChildNodeStr.ToString().Trim(',');
}
前臺(tái)代碼和上面基本一致,唯一的差別在于
var defaultData = eval(data);
因?yàn)槲覀兒笈_(tái)是拼接的json字符串的緣故,我們需要將json字符串轉(zhuǎn)化為json數(shù)組(網(wǎng)上下載的基于Bootstrap的JQuery TreeView樹(shù)形控件僅僅支持json數(shù)組),我也是費(fèi)了很大的勁才找到的。使用MVC+Bootstrap開(kāi)發(fā)TreeView的同學(xué)要注意?。?!
下面接著給大家介紹基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
以上所述是小編給大家介紹的基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開(kāi)/折疊子節(jié)點(diǎn)
- ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫(kù)生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實(shí)現(xiàn)一個(gè)Ajax的TreeView
- 選擇TreeView控件的樹(shù)狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- jQuery 樹(shù)形結(jié)構(gòu)的選擇器
- jQuery treeview樹(shù)形結(jié)構(gòu)應(yīng)用
相關(guān)文章
40個(gè)有創(chuàng)意的jQuery圖片和內(nèi)容滑動(dòng)及彈出插件收藏集之三
在網(wǎng)頁(yè)的首頁(yè)或圖片專題頁(yè)面很多地方都會(huì)用到圖片滑動(dòng)插件來(lái)循環(huán)切換多張圖片,并且用戶可以點(diǎn)擊左右按鈕來(lái)切換圖片。2012-01-01
傳遞參數(shù)的標(biāo)準(zhǔn)方法(jQuery.ajax)
jQuery.ajax傳遞參數(shù)的方法2008-11-11
jQuery如何使用自動(dòng)觸發(fā)事件trigger
這篇文章主要介紹了jQuery如何使用自動(dòng)觸發(fā)事件trigger,需要的朋友可以參考下2015-11-11

