基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
本文支持兩種方式的數(shù)據(jù),一種為L(zhǎng)ist集合,一種為json字符串。
先來介紹一下后臺(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字符串 開始{
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承載頁面所需的值(間接將值傳給頁面)),查詢所有的數(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為TreeView所需數(shù)據(jù)分層級(jí)(即子類、父類等節(jié)點(diǎn)分開)
for (int i = 0; i < DictionaryList.Count; i++)
{
//Nodes數(shù)組開始 {
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里,如果沒有不讓他顯示為數(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樹形控件僅僅支持json數(shù)組),我也是費(fèi)了很大的勁才找到的。使用MVC+Bootstrap開發(fā)TreeView的同學(xué)要注意?。?!
下面接著給大家介紹基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
以上所述是小編給大家介紹的基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開/折疊子節(jié)點(diǎn)
- ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實(shí)現(xiàn)一個(gè)Ajax的TreeView
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- jQuery 樹形結(jié)構(gòu)的選擇器
- jQuery treeview樹形結(jié)構(gòu)應(yīng)用
相關(guān)文章
jQuery實(shí)現(xiàn)頁面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)特效的方法總結(jié)
通過jQuery實(shí)現(xiàn)頁面內(nèi)錨點(diǎn)平滑跳轉(zhuǎn)的方法很多,可以通過插件hovertreescroll實(shí)現(xiàn),也可以簡(jiǎn)單的通過animate方法實(shí)現(xiàn),下面介紹這2種比較簡(jiǎn)單的方法。2015-05-05
jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06
jQuery的Ajax時(shí)無響應(yīng)數(shù)據(jù)的解決方法
今天做項(xiàng)目時(shí)發(fā)現(xiàn)永遠(yuǎn)響應(yīng)的值都是該頁面的html代碼。2010-05-05
jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
這篇文章主要介紹了jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼,有需要的朋友可以參考一下2013-12-12
jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對(duì)象的方法分析
這篇文章主要介紹了jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對(duì)象的方法,結(jié)合實(shí)例形式分析了jQuery中$.extend(true,object1, object2);進(jìn)行深拷貝操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨query按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
基于jQuery實(shí)現(xiàn)圖片推拉門動(dòng)畫效果的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)''推拉門''動(dòng)畫效果也可以稱作是手風(fēng)琴效果,具體實(shí)現(xiàn)方法大家通過本文一起學(xué)習(xí)吧2017-08-08

