基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
在上篇給大家介紹了基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合。
這種方式其實(shí)還是利用list集合的方式傳給前臺(tái),只不過(guò)在前臺(tái)做了一些小小的變化,而控制器代碼也進(jìn)行了部分的優(yōu)化,值的一提的是:沒(méi)用的ajax前后臺(tái)交互舍棄掉了。
控制器代碼如下:
//實(shí)例化公共靜態(tài)字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView視圖 /// </summary> /// <returns></returns> public ActionResult May(string TypeCode) { ViewBag.TypeCode = TypeCode; List<TC_DictionaryInfo> DInfo = dbll.GetModelList("TypeCode=" + TypeCode); List<NodeModel> list = GetChildNodes(0, new NodeModel() { }, DInfo).nodes; ViewBag.data = list; } ///<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; }
PS:不再是三個(gè)方法而簡(jiǎn)化為兩個(gè)方法(幾乎沒(méi)什么變動(dòng))。
前臺(tái)代碼如下:
var data='@JsonConvert.SerializeObject( ViewBag.data)'.replace(/"/g,'"'); $(function() { $('#treeview4').treeview({ color: "#428bca", data: data, onNodeSelected: function(event, data) { alert(data); } });
PS:這里用到了.NET 下開(kāi)源的json格式序列號(hào)和反序列化的類(lèi)庫(kù)
https://www.ibm.com/developerworks/cn/web/wa-lo-json/ ,
下面介紹json序列化和反序列化的兩個(gè)重要方法:
JsonConvert.SerializeObject(object value)序列化,
它有個(gè)重載方法JsonConvert.SerializeObject(object value, params JsonConverter[] converters)。
JsonConvert.DeserializeObject(string value, Type type),反序列化,
它有個(gè)重載方法JsonConvert.DeserializeObject(string value, Type type, params JsonConverter[] converters)
這兩個(gè)方法可以實(shí)現(xiàn)基本的序列化和反序列化要求。
js中的replace的作用是將特定的符號(hào)替換為自己需要的符號(hào)。
而這里replace(/\/g,'"')的作用是把所有的 / 都替換為“(因?yàn)轫?yè)面需要的是json字符串)。
這樣的話 我們的頁(yè)面就可以讀取數(shù)據(jù)進(jìn)行顯示了。BZ還是感覺(jué)這種方式更好一點(diǎn)。
以上所述是小編給大家介紹的基于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)文章
Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)上下移動(dòng)和排序,想要學(xué)習(xí)Jquery的同學(xué)可以來(lái)了解一下。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例
這篇文章主要介紹了ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的代碼
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的實(shí)現(xiàn)方法,需要的朋友可以參考下。2010-11-11JS中批量給元素綁定事件過(guò)程中的相關(guān)問(wèn)題使用閉包解決
解決元素批量綁定事件的時(shí)候,出現(xiàn)i=最后一個(gè)循環(huán)變量的值的方法有兩種:把這個(gè)循環(huán)變量保存起來(lái),不要讓它的作用域在整個(gè)函數(shù),而是在循環(huán)體內(nèi)2013-04-04asp.net中oracle 存儲(chǔ)過(guò)程(圖文)
存儲(chǔ)過(guò)程是在大型數(shù)據(jù)庫(kù)系統(tǒng)中,一組為了完成特定功能的sql語(yǔ)句集,經(jīng)過(guò)編譯存儲(chǔ)在數(shù)據(jù)庫(kù)中,用戶(hù)通過(guò)指定存儲(chǔ)過(guò)程的名字并給出參數(shù)(如果該存儲(chǔ)過(guò)程帶有參數(shù))來(lái)執(zhí)行它,下面小編給大家介紹asp.net中oracle存儲(chǔ)過(guò)程,需要的朋友可以參考下2015-08-08jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的相關(guān)代碼,包括封裝和不封裝兩種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05