基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
本文支持兩種方式的數(shù)據(jù),一種為List集合,一種為json字符串。
先來介紹一下后臺返回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>
第二種方式為后臺返回json字符串這種方式(此方式為后臺拼接json字符串傳給前臺):
不建議大家采用這種方式,比較容易出錯。
public ActionResult May(string TypeCode,int parentId) { ViewBag.TypeCode = TypeCode; ViewBag.ParentId = parentId; return View(); } public ActionResult GetTreeData() { //創(chuàng)建jsondata對象 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ù)分層級(即子類、父類等節(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']"); //拼接完畢子類分層,去掉最后多余的符號(,) 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(','); }
前臺代碼和上面基本一致,唯一的差別在于
var defaultData = eval(data);
因?yàn)槲覀兒笈_是拼接的json字符串的緣故,我們需要將json字符串轉(zhuǎn)化為json數(shù)組(網(wǎng)上下載的基于Bootstrap的JQuery TreeView樹形控件僅僅支持json數(shù)組),我也是費(fèi)了很大的勁才找到的。使用MVC+Bootstrap開發(fā)TreeView的同學(xué)要注意?。。?br />
下面接著給大家介紹基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
以上所述是小編給大家介紹的基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(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)一個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),也可以簡單的通過animate方法實(shí)現(xiàn),下面介紹這2種比較簡單的方法。2015-05-05jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06jQuery的Ajax時(shí)無響應(yīng)數(shù)據(jù)的解決方法
今天做項(xiàng)目時(shí)發(fā)現(xiàn)永遠(yuǎn)響應(yīng)的值都是該頁面的html代碼。2010-05-05jQuery動態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
這篇文章主要介紹了jQuery動態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼,有需要的朋友可以參考一下2013-12-12jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對象的方法分析
這篇文章主要介紹了jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對象的方法,結(jié)合實(shí)例形式分析了jQuery中$.extend(true,object1, object2);進(jìn)行深拷貝操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03jquery按回車鍵實(shí)現(xiàn)表單提交的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query按回車鍵實(shí)現(xiàn)表單提交的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05基于jQuery實(shí)現(xiàn)圖片推拉門動畫效果的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)''推拉門''動畫效果也可以稱作是手風(fēng)琴效果,具體實(shí)現(xiàn)方法大家通過本文一起學(xué)習(xí)吧2017-08-08