這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)無限分級和tree結(jié)構(gòu)數(shù)據(jù)增刪改的示例分析，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
漢源網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),漢源網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為漢源上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的漢源做網(wǎng)站的公司定做！
無限分級
很多時候我們不確定等級關(guān)系的層級，這個時候就需要用到無限分級了。
說到無限分級，又要扯到遞歸調(diào)用了。（據(jù)說頻繁遞歸是很耗性能的），在此我們需要先設(shè)計好表機(jī)構(gòu)，用來存儲無限分級的數(shù)據(jù)。當(dāng)然，以下都是自己搗鼓的結(jié)果，非標(biāo)準(zhǔn)。誰有更好的設(shè)計望不吝嗇賜教。
說來其實也簡單，就是一個ID和父ID的關(guān)系。
以此類推，Id需要是唯一的，ParenId需要是Id列里面存在即可。這樣我們就實現(xiàn)無限分級了，如果再加一列Sort排序就更完美了。
jstree插件
官方地址：https://www.jstree.com/
為什么要用這個插件？因為有方便的api給我們做數(shù)據(jù)綁定，且支持節(jié)點拖動來實現(xiàn)增刪改，個人覺得這個功能挺強(qiáng)大的。
Demo
下面我們來基于jstree插件來實現(xiàn)無限分級數(shù)據(jù)操作。以區(qū)域數(shù)據(jù)操作為例，用Code First的方式來編寫demo代碼。
創(chuàng)建Region實體
為了配合插件自動生成的節(jié)點id，我們這里使用的Node和ParentNode來存儲上下級關(guān)系（而不是上面說的id和parentid，但是實際效果是一樣的）。
////// 區(qū)域 /// public class Region { ////// 主鍵id /// public int Id { get; set; } ////// 名稱 /// public string Name { get; set; } ////// 節(jié)點 /// public string Node { get; set; } ////// 父節(jié)點 /// public string ParentNode { get; set; } }
滿足jstree插件的數(shù)據(jù)對象Dto
為了適應(yīng)jstree插件的數(shù)據(jù)要求，我們需要把上面的數(shù)據(jù)轉(zhuǎn)換成樹狀的數(shù)據(jù)對象。
////// Dto /// public class RegionsTreeOutput { ////// Id /// public int RegionsId { get; set; } ////// tree顯示文本（對應(yīng)region的name） /// public string text { get; set; } ////// tree的id（對應(yīng)Node） /// public string id { get; set; } ////// 子節(jié)點數(shù)據(jù)（此屬性就體現(xiàn)的數(shù)據(jù)的層級關(guān)系） /// public Listchildren { get; set; } }
數(shù)據(jù)轉(zhuǎn)換
#region GetRegionTree 初始化數(shù)據(jù)獲取 的輔助方法 public RegionsTreeOutput LoadRegions(string id, ListinRegions, RegionsTreeOutput outRegions) { List regions = inRegions.Where(t => t.ParentNode == id).ToList(); if (outRegions == null)//加載父節(jié)點 { outRegions = ToTreeData(regions[0]); LoadRegions(outRegions.id, inRegions, outRegions); } else//加載子節(jié)點 { 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 ToTreesData(List listRegion) { var regions = new List (); for (int i = 0; i < listRegion.Count; i++) { regions.Add(ToTreeData(listRegion[i])); } return regions; } #endregion
初始化獲取轉(zhuǎn)換后的數(shù)據(jù)
////// 初始化數(shù)據(jù)獲取 /// ///public JsonResult GetResultData() { TreeDbContext db = new TreeDbContext(); var regions = db.Regions.Where(t => true).ToList(); var regionObj = LoadRegions("-1", regions, null); return Json(regionObj); }
以上后臺的數(shù)據(jù)差不多就完成了。
前臺數(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) {
//因為這里我們之后需要定義多個項,所以通過對象的方式返回
var actions = {};
//添加一個"新增"右鍵菜單
actions.create = {//這里的create其實闊以隨意命名,關(guān)鍵是里面的 這里面的 action回調(diào)方法
"separator_before": false,//Create這一項在分割線之前
"separator_after": true,//Create這一項在分割線之后
"_disabled": false, //false表示 create 這一項可以使用; true表示不能使用
"label": "新增", //Create這一項的名稱 可自定義
"action": function (data) { //點擊Create這一項觸發(fā)該方法,這理還是蠻有用的
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//獲得當(dāng)前節(jié)點,可以拿到當(dāng)前節(jié)點所有屬性
//新加節(jié)點,以下三行代碼注釋掉就不會添加節(jié)點
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); }, 0);//新加節(jié)點后觸發(fā) 重命名方法,即 創(chuàng)建節(jié)點完成后可以立即重命名節(jié)點
});
}
};
if (o.id != "0001")//屏蔽對根節(jié)點的操作 “0001”改成根節(jié)點對應(yīng)的真是id
{
//添加一個"重命名"右鍵菜單
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);
}
}
//添加一個"刪除"右鍵菜單
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;//返回右鍵菜單項
}
},
});
});
});其他操作
//刪除節(jié)點
$('#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) {
}
});
});
//移動節(jié)點
$('#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;//是否展開
}
});
}當(dāng)然，記得修改或是刪除要取RegionsId這個對應(yīng)后臺實體的ID。
通過按鈕來操作增刪改
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);
};上述就是小編為大家分享的無限分級和tree結(jié)構(gòu)數(shù)據(jù)增刪改的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
