记一次eleTree 数据构造和前端应用的问题（难点 递归构造树结构，Layui Table根据点击数结构进行更新，添加，删除）

 

 界面如上图 主要碰到的问题是递归构造结构树的问题，构造结构树可以分为构造字符串和构造对象两种方式

 

我选择的是用构造对象的方式代码如下

public class Tree
{
public Tree() {
this.children = new HashSet<Tree>(); //重点在这个地方  如果不实例化 到时候赋值回报错 提示children 为NULL

}
public string id { get; set; }
public string label { get; set; }
public string isknowledge { get; set; }
public ICollection<Tree> children { get; set; }
public bool disabled { get; set; }

}

核心函数

//递归解决父节点的问题
public void TreeNode(Tree tree, string ParentID, string knowledgeid, string label,string isknowledge_) {
string Res = "";

if (tree.id == ParentID)
{
Tree tree_ = new Tree();
tree_.id = knowledgeid;
tree_.label = label;
tree_.disabled = false;
tree_.isknowledge = isknowledge_;

tree.children.Add(tree_);
}
else {
if (tree.children.Count > 0)
{
foreach (Tree item in tree.children)
{
TreeNode(item, ParentID, knowledgeid, label, isknowledge_);
}
}

}



}

第二个问题就是如果配置好LayuiTable的数据 在前端更新或者删除的时候 其实Table有自己的缓存数据，且缓存数据并不会根据你的修改而变动，需要自己去修改

例如当我们删除一个TR节点，其实想让Table重新加载，加载数据如果没变动，看起来节点被删除了，但是原始数据还在

核心方法是 删除节点需要删除缓存数据，那么怎么修改该缓存数据呢？

其实Table有一个table.cache["Table"] 方法 其中Table是你的lay-filter 标记

我们需要在更新或者删除数据后 去改变table.cache["Table"] 中的数据才行 代码如下：

$.each($('.layui-table').eq(2).find("tbody").find("tr"), function (i, v) {
console.log($(v).find("td").eq(1).find("div").eq(0).text())
var dom_kid = $(v).find("td").eq(1).find("div").eq(0).text();

if (data.id == dom_kid) {
//删除
$(v).remove()
//删除DaTaTab
data_chach.forEach((k, s) => {
if (k.id == dom_kid) {
//delete data[s];
data_chach.splice(s, 1); //删除或者修改数据
//需要更新到Table的缓存值o
table.reload('Table', {
data: data_chach,
done: function (res, curr, count) {
this.data = data_chach; //非常重要，不然会出现bug
}

})
}
console.log(data)

})
//删除存在的自定义数据
Data_Tab.forEach((k, s) => {
if (k[0].kid == dom_kid) {
delete Data_Tab[s];
}

})
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var form = layui.form;
form.render();

})
}

 

})

 

以上就是我遇到的比较头疼的问题，查了好久，特此记录下以备不时之需。