無(wú)限分級(jí)和tree結(jié)構(gòu)數(shù)據(jù)增刪改【附DEMO下載】
閱讀目錄
•無(wú)限分級(jí)
•jstree插件
•Demo
•創(chuàng)建Region實(shí)體
•滿(mǎn)足jstree插件的數(shù)據(jù)對(duì)象Dto
•數(shù)據(jù)轉(zhuǎn)換
•初始化獲取轉(zhuǎn)換后的數(shù)據(jù)
•前臺(tái)數(shù)據(jù)加載
•其他操作
•通過(guò)按鈕來(lái)操作增刪改
無(wú)限分級(jí)
很多時(shí)候我們不確定等級(jí)關(guān)系的層級(jí),這個(gè)時(shí)候就需要用到無(wú)限分級(jí)了。
說(shuō)到無(wú)限分級(jí),又要扯到遞歸調(diào)用了。(據(jù)說(shuō)頻繁遞歸是很耗性能的),在此我們需要先設(shè)計(jì)好表機(jī)構(gòu),用來(lái)存儲(chǔ)無(wú)限分級(jí)的數(shù)據(jù)。當(dāng)然,以下都是自己搗鼓的結(jié)果,非標(biāo)準(zhǔn)。誰(shuí)有更好的設(shè)計(jì)望不吝嗇賜教。
說(shuō)來(lái)其實(shí)也簡(jiǎn)單,就是一個(gè)ID和父ID的關(guān)系。
以此類(lèi)推,Id需要是唯一的,ParenId需要是Id列里面存在即可。這樣我們就實(shí)現(xiàn)無(wú)限分級(jí)了,如果再加一列Sort排序就更完美了。
jstree插件
為什么要用這個(gè)插件?因?yàn)橛蟹奖愕腶pi給我們做數(shù)據(jù)綁定,且支持節(jié)點(diǎn)拖動(dòng)來(lái)實(shí)現(xiàn)增刪改,個(gè)人覺(jué)得這個(gè)功能挺強(qiáng)大的。
Demo
下面我們來(lái)基于jstree插件來(lái)實(shí)現(xiàn)無(wú)限分級(jí)數(shù)據(jù)操作。以區(qū)域數(shù)據(jù)操作為例,用Code First的方式來(lái)編寫(xiě)demo代碼。
創(chuàng)建Region實(shí)體
為了配合插件自動(dòng)生成的節(jié)點(diǎn)id,我們這里使用的Node和ParentNode來(lái)存儲(chǔ)上下級(jí)關(guān)系(而不是上面說(shuō)的id和parentid,但是實(shí)際效果是一樣的)。
/// <summary> /// 區(qū)域 /// </summary> public class Region { /// <summary> /// 主鍵id /// </summary> public int Id { get; set; } /// <summary> /// 名稱(chēng) /// </summary> public string Name { get; set; } /// <summary> /// 節(jié)點(diǎn) /// </summary> public string Node { get; set; } /// <summary> /// 父節(jié)點(diǎn) /// </summary> public string ParentNode { get; set; } }
滿(mǎn)足jstree插件的數(shù)據(jù)對(duì)象Dto
為了適應(yīng)jstree插件的數(shù)據(jù)要求,我們需要把上面的數(shù)據(jù)轉(zhuǎn)換成樹(shù)狀的數(shù)據(jù)對(duì)象。
/// <summary> /// Dto /// </summary> public class RegionsTreeOutput { /// <summary> /// Id /// </summary> public int RegionsId { get; set; } /// <summary> /// tree顯示文本(對(duì)應(yīng)region的name) /// </summary> public string text { get; set; } /// <summary> /// tree的id(對(duì)應(yīng)Node) /// </summary> public string id { get; set; } /// <summary> /// 子節(jié)點(diǎn)數(shù)據(jù)(此屬性就體現(xiàn)的數(shù)據(jù)的層級(jí)關(guān)系) /// </summary> public List<RegionsTreeOutput> children { get; set; } }
數(shù)據(jù)轉(zhuǎn)換
#region GetRegionTree 初始化數(shù)據(jù)獲取 的輔助方法 public RegionsTreeOutput LoadRegions(string id, List<Region> inRegions, RegionsTreeOutput outRegions) { List<Region> regions = inRegions.Where(t => t.ParentNode == id).ToList(); if (outRegions == null)//加載父節(jié)點(diǎn) { outRegions = ToTreeData(regions[0]); LoadRegions(outRegions.id, inRegions, outRegions); } else//加載子節(jié)點(diǎn) { outRegions.children = ToTreesData(regions); if (regions.Count > 0) { for (int i = 0; i < regions.Count; i++) { LoadRegions(regions[i].Node, inRegions, outRegions.children[i]);//遞歸調(diào)用 } } } return outRegions; } public RegionsTreeOutput ToTreeData(Region region) { var treeData = new RegionsTreeOutput(); treeData.id = region.Node; treeData.text = region.Name; treeData.RegionsId = region.Id; return treeData; } public List<RegionsTreeOutput> ToTreesData(List<Region> listRegion) { var regions = new List<RegionsTreeOutput>(); for (int i = 0; i < listRegion.Count; i++) { regions.Add(ToTreeData(listRegion[i])); } return regions; } #endregion
初始化獲取轉(zhuǎn)換后的數(shù)據(jù)
/// <summary> /// 初始化數(shù)據(jù)獲取 /// </summary> /// <returns></returns> public JsonResult GetResultData() { TreeDbContext db = new TreeDbContext(); var regions = db.Regions.Where(t => true).ToList(); var regionObj = LoadRegions("-1", regions, null); return Json(regionObj); }
以上后臺(tái)的數(shù)據(jù)差不多就完成了。
前臺(tái)數(shù)據(jù)加載
$(function () { $.post("/Home/GetResultData", null, function (sData) { treeObj = $('#jstree_demo').jstree({ //, "checkbox" 'plugins': ["contextmenu", "dnd", "search", "state", "types", "wholerow"], 'core': { "animation": 0, "check_callback": true, 'force_text': true, "themes": { "stripes": true }, 'data': sData }, "types": { "default": { "icon": "fa fa-folder icon-state-warning icon-lg" }, "file": { "icon": "fa fa-file icon-state-warning icon-lg" } }, "contextmenu": { select_node: false, show_at_node: true, items: function (o, cb) { //因?yàn)檫@里我們之后需要定義多個(gè)項(xiàng),所以通過(guò)對(duì)象的方式返回 var actions = {}; //添加一個(gè)"新增"右鍵菜單 actions.create = {//這里的create其實(shí)闊以隨意命名,關(guān)鍵是里面的 這里面的 action回調(diào)方法 "separator_before": false,//Create這一項(xiàng)在分割線之前 "separator_after": true,//Create這一項(xiàng)在分割線之后 "_disabled": false, //false表示 create 這一項(xiàng)可以使用; true表示不能使用 "label": "新增", //Create這一項(xiàng)的名稱(chēng) 可自定義 "action": function (data) { //點(diǎn)擊Create這一項(xiàng)觸發(fā)該方法,這理還是蠻有用的 var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference);//獲得當(dāng)前節(jié)點(diǎn),可以拿到當(dāng)前節(jié)點(diǎn)所有屬性 //新加節(jié)點(diǎn),以下三行代碼注釋掉就不會(huì)添加節(jié)點(diǎn) inst.create_node(obj, {}, "last", function (new_node) { setTimeout(function () { inst.edit(new_node); }, 0);//新加節(jié)點(diǎn)后觸發(fā) 重命名方法,即 創(chuàng)建節(jié)點(diǎn)完成后可以立即重命名節(jié)點(diǎn) }); } }; if (o.id != "0001")//屏蔽對(duì)根節(jié)點(diǎn)的操作 “0001”改成根節(jié)點(diǎn)對(duì)應(yīng)的真是id { //添加一個(gè)"重命名"右鍵菜單 actions.rename = { "separator_before": false, "separator_after": false, "_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")), "label": "重命名", "action": function (data) { var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference); inst.edit(obj); } } //添加一個(gè)"刪除"右鍵菜單 actions.delete = { "separator_before": false, "icon": false, "separator_after": false, "_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")), "label": "刪除", "action": function (data) { var inst = $.jstree.reference(data.reference), obj = inst.get_node(data.reference); if (inst.is_selected(obj)) { inst.delete_node(inst.get_selected()); } else { inst.delete_node(obj); } } }; } return actions;//返回右鍵菜單項(xiàng) } }, }); }); });
其他操作
//刪除節(jié)點(diǎn) $('#jstree_demo').on('delete_node.jstree', function (e, data) { var id = data.node.original.RegionsId; $.ajax({ type: "get", url: "/Home/DeleteRegion?id=" + id, success: function (sData) { } }); }); //移動(dòng)節(jié)點(diǎn) $('#jstree_demo').on('move_node.jstree', function (e, data) { saveRegions(data); }); //修改名 $('#jstree_demo').on('rename_node.jstree', function (e, data) { saveRegions(data); }); //保存 function saveRegions(data) { var id = data.node.original.RegionsId; var name = data.node.text;//修改后的name //var oldName = data.old;//原name //var pNode = $('#jstree_demo').jstree().get_node(data.node.parent).original.RegionsId; var josnData = { "Id": id, "Node": data.node.id, "ParentNode": data.node.parent, "Name": name }; $.ajax({ url: "/Home/SaveRegions", data: josnData, success: function (sData) { data.node.original.RegionsId = sData; data.node.state.opened = false;//是否展開(kāi) } }); }
當(dāng)然,記得修改或是刪除要取RegionsId這個(gè)對(duì)應(yīng)后臺(tái)實(shí)體的ID。
通過(guò)按鈕來(lái)操作增刪改
function createTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } sel = sel[0]; sel = ref.create_node(sel, { "type": "file" }); if (sel) { ref.edit(sel); } }; function renameTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } sel = sel[0]; ref.edit(sel, function () { }); }; function deleteTree() { var ref = $('#jstree_demo').jstree(true), sel = ref.get_selected(); if (!sel.length) { return false; } ref.delete_node(sel); };
如果大家想了解詳情請(qǐng)下載源碼:
http://xiazai.jb51.net/201605/yuanma/TreeDemo(jb51.net).rar
關(guān)于無(wú)限分級(jí)和tree結(jié)構(gòu)數(shù)據(jù)增刪改的相關(guān)知識(shí)就給大家介紹到這里,希望對(duì)大家有所幫助!
相關(guān)文章
淺析Ajax后臺(tái)success傳來(lái)json數(shù)據(jù)的問(wèn)題
最近在使用JQuery的ajax方法時(shí),需要返回的數(shù)據(jù)為json數(shù)據(jù),在success返回中數(shù)據(jù)處理會(huì)根據(jù)返回方式不同會(huì)采用不同的方式來(lái)生成json數(shù)據(jù)。下面小編給大家介紹下在$.ajax方法中應(yīng)該是如何來(lái)處理的2016-10-10Ajax獲得站點(diǎn)文件內(nèi)容實(shí)例不涉及服務(wù)器
選擇一部著作,會(huì)通過(guò) Ajax 實(shí)時(shí)獲得相關(guān)的名字,一個(gè)簡(jiǎn)單的不涉及服務(wù)器的Ajax實(shí)例,需要的朋友可以參考下2014-05-05如何利用Ajax實(shí)現(xiàn)地區(qū)三級(jí)聯(lián)動(dòng)詳解
這篇文章主要給大家介紹了關(guān)于如何利用Ajax實(shí)現(xiàn)地區(qū)三級(jí)聯(lián)動(dòng)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12jquery ajax 向后臺(tái)傳遞數(shù)組參數(shù)示例
在JS中向后臺(tái)傳遞數(shù)組參數(shù),如果數(shù)組中放的是對(duì)象類(lèi)型,傳遞到后臺(tái)是顯示的只能是對(duì)象字符串--[object Object],具體的原因及解決方法如下,有類(lèi)似問(wèn)題的朋友可以參考下2013-07-07完美解決ajax訪問(wèn)遇到Session失效的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決ajax訪問(wèn)遇到Session失效的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06php+ajax實(shí)現(xiàn)帶進(jìn)度條的大數(shù)據(jù)排隊(duì)導(dǎo)出思路以及源碼
最近在做一個(gè)項(xiàng)目,我們現(xiàn)在有很多數(shù)據(jù),分表存放,項(xiàng)目要求在導(dǎo)出的時(shí)候需要有進(jìn)度條。經(jīng)過(guò)一番思索,完成了一下內(nèi)容,分享給大家。最后面有完整代碼。2014-05-05ajax請(qǐng)求攜帶自定義請(qǐng)求頭header(跨域和同域)案例實(shí)戰(zhàn)教程
這篇文章主要介紹了ajax請(qǐng)求攜帶自定義請(qǐng)求頭header(跨域和同域)案例實(shí)戰(zhàn)教程,ajax請(qǐng)求是有同源策略的,雖然可以應(yīng)用CORS等手段來(lái)實(shí)現(xiàn)跨域,但是這并不是說(shuō)這樣就是“同源”了,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10