繁体   English   中英

使用javascript对象的多选树

multi-select tree using javascript object

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想使用Java脚本对象创建带有复选框的树,数据采用以下格式,格式如下

<id, name, parent_id>

例如:

1   A  -1 
2   B   1
3   C   2
4   d   2 
5   e   2

parent_id是一个“ id”,它引用具有该特定“ id”的父对象

1 个回复

我对此有一个裂缝,这就是我的想法。 我注释了所有代码,以便您可以遵循逻辑。 希望这可以帮助您学习。

 var data = [{ label: "3138 | Root Organization | -1", selected: true, value: "3138" }, { label: "3140 | Company X | 3138", selected: false, value: "3140" }, { label: "3148 | Corporate | 3140", selected: false, value: "3148" }]; var nodes = {}, tree = []; // construct the map of nodes and the tree structure // by looping over the data data.forEach(function(d) { // split the label based on <spaces>|<spaces> and // create a node object with the relevant properties var parts = d.label.split(/\\s+\\|\\s+/), node = { id: parts[0], name: parts[1], parentId: parts[2], children: [] }, parentNode; // if there is no parent, this must be a top level // node, so add it to our tree array. if (node.parentId === "-1") { tree.push(node); } else { // otherwise, the parent must be an existing node // so just add this node to its children parentNode = nodes[node.parentId]; if (parentNode) { parentNode.children.push(node); } } // store this node in the map by id so we can // look it up easily nodes[node.id] = node; }); // the function that recursively draws the tree // params: // element: (string|DOMElement|jQuery) the element to // append the tree to // tree: (node[]) the array of nodes to draw // at the current level function drawTree(element, tree) { var $ul = $('<ul>'); tree.forEach(function(node) { var $li = $('<li>'); $li.text(node.name); // if this node has children, draw them inside // the current <li> if (node.children.length !== 0) { drawTree($li, node.children); } $ul.append($li); }); $ul.appendTo(element); } // invoke the function with the tree data drawTree('#out', tree); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="out"></div> 

1 使用具有多选择字段的数组创建JavaScript对象

您好,我想创建一个JavaScript对象来存储从某些字段捕获的值。 我有动态字段,用户可以在其中向页面添加更多字段。 我可以使用以下代码捕获并将字段存储在对象中。 最近,我不得不在动态字段中添加一个名为“方法”的&lt;select&gt;字段,该字段允许用户在下拉菜单中选择多 ...

2 使用 javascript 动态标记多选

我正在尝试使用从 ajax 函数接收到的动态数据来标记我拥有的多项选择。 数据没问题,它以数组形式出现,但我无法将其设置为选择值。 按照照片和代码。 下图是我的多选。 下图是我收到的数据: 到目前为止我尝试过的: json.idChaveDepartamento 是我正在接收的数据,我正在 ...

3 使用 JavaScript 将对象数组转换为树数组对象

我有这些数据,我想将其转换为具有良好性能的树数据每个对象都有children属性,其中包含元素的id 。 检查下面的代码输入: 预期输出: 我尝试使用map和find方法来更新children属性的详细信息,但无法进一步达到预期的结果。 我需要一些建议或指南来解决这个问题https://re ...

5 使用 JSON.stringify 将 JavaScript 对象转换为树

我最近一直在使用treeify将嵌套的 JSON 对象显示为树,就像 Linux CLI 工具tree的输出。 只有JSON.stringify才能JSON.stringify相同的结果吗? 我知道 JSON.stringify 接受 3 个参数:值、 替换器和空间( MDN JSON.strin ...

6 使用javascript重新创建Cognos树对象

我正在尝试通过使用javascript重新创建默认的Cognos树来帮助我的BI团队。 完成此操作后,我计划在Cognos报表中创建一个新的HTML框,然后将javascript粘贴到其中,从而重新创建树。 由于对Cognos的经验很少,我目前处于停滞状态,很乐意提供任何建议或解决方案。 ...

8 使用JavaScript将对象的JSON数组转换为nasted json树

我有一个API,该API返回对象的JSON数组。 需要根据每个节点中的“父对象”将其转换为父/子关系中的嵌套JSON数组。 如果“ parientid”为null,则它将是根节点,而其他将是该父节点的子节点。 以下是我从API获得的示例JSON数组。 我想将其转换为基于每个对象中“ Parent ...

10 使用用于树视图节点的shift键的多选

我想使用shiftkey为树视图选择多个节点,如下图所示 如何获取第一个单击的节点索引,然后单击Shift键节点索引。 我试过下面的代码片段 我可以有任何示例代码或任何线索如何做到这一点? 提前致谢!!!!! ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM