无法使用 ExtDnd5 对节点进行排序,只能设置为子节点
Can't sort nodes with ExtDnd5, only set as child
我想将 FancyTree 与 table 和 dnd5 扩展一起使用。但是当我拖动一个节点时,我只能将它放在另一个节点中,而不是在两个节点之间,在相同的深度级别上。
我尝试将我的代码与示例进行比较,但找不到任何差异。这是我的代码:
HTML Table 标记。
table- 类 用于 Bootstrap。
@Model.TableId 适用于 MVC5 Razor。
两者,应该是无关紧要的,问题仍然存在,当我删除 Bootstrap 类.
<table class="treeTableControl table table-bordered table-striped table-hover" id="treetable_@Model.TableId">
<colgroup>
<col width="30px" />
<col width="30px" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th> </th>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
init() {
var me = this;
me.tableid = me.$tree.data("tableid");
me.treeTableData = CSB32["treeTableData_" + me.tableid];
me.$tree.fancytree({
checkbox: true,
titleTabbable: true,
source: me.treeTableData,
extensions: ["table", "gridnav", "dnd5", "edit"],
table: {
checkboxColumnIdx: 0,
nodeColumnIdx: 2
},
renderColumns: function (event, data) {
var node = data.node;
var $tdList = $(node.tr).find(">td");
$tdList.eq(1)
.text(node.getIndexHier())
.addClass("alignRight");
},
dnd5: {
preventVoidMoves: false,
preventRecursion: true,
autoExpandMS: 400,
dragStart: function (node, data) {
return true;
},
dragEnter: function (node, data) {
return true;
},
dragDrop: function (node, data) {
data.otherNode.moveTo(node, data.hitMode);
}
},
edit: {
triggerStart: ["f2", "dblclick"],
close: function (event, data) {
if (data.save && data.isNew) {
me.$tree.trigger("nodeCommand", { cmd: "addSibling" });
}
}
}
});
}
我的示例源数据
{"children":[{"key":1000010,"title":"TG 628s 4-Port ETH Switch ","children":[]},
{"key":1000008,"title":"4400 Series WLAN Controller","children":[
{"key":1000009,"title":"CISCO 3845","children":[]},
{"key":1000007,"title":"10/100/1000Base-T LX","children":[]}]},
{"key":1000011,"title":"Test Product","children":[]}],"columns":[]}
Here I try to move #3 between #1 and #2, but I can only add the node as child
好的,我在尝试创建 JSFiddle 时发现了错误。我的 jQuery 版本太旧了。使用 3.x 我可以根据需要对节点进行排序。
我想将 FancyTree 与 table 和 dnd5 扩展一起使用。但是当我拖动一个节点时,我只能将它放在另一个节点中,而不是在两个节点之间,在相同的深度级别上。
我尝试将我的代码与示例进行比较,但找不到任何差异。这是我的代码:
HTML Table 标记。 table- 类 用于 Bootstrap。 @Model.TableId 适用于 MVC5 Razor。 两者,应该是无关紧要的,问题仍然存在,当我删除 Bootstrap 类.
<table class="treeTableControl table table-bordered table-striped table-hover" id="treetable_@Model.TableId">
<colgroup>
<col width="30px" />
<col width="30px" />
<col width="*" />
</colgroup>
<thead>
<tr>
<th> </th>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JavaScript
init() {
var me = this;
me.tableid = me.$tree.data("tableid");
me.treeTableData = CSB32["treeTableData_" + me.tableid];
me.$tree.fancytree({
checkbox: true,
titleTabbable: true,
source: me.treeTableData,
extensions: ["table", "gridnav", "dnd5", "edit"],
table: {
checkboxColumnIdx: 0,
nodeColumnIdx: 2
},
renderColumns: function (event, data) {
var node = data.node;
var $tdList = $(node.tr).find(">td");
$tdList.eq(1)
.text(node.getIndexHier())
.addClass("alignRight");
},
dnd5: {
preventVoidMoves: false,
preventRecursion: true,
autoExpandMS: 400,
dragStart: function (node, data) {
return true;
},
dragEnter: function (node, data) {
return true;
},
dragDrop: function (node, data) {
data.otherNode.moveTo(node, data.hitMode);
}
},
edit: {
triggerStart: ["f2", "dblclick"],
close: function (event, data) {
if (data.save && data.isNew) {
me.$tree.trigger("nodeCommand", { cmd: "addSibling" });
}
}
}
});
}
我的示例源数据
{"children":[{"key":1000010,"title":"TG 628s 4-Port ETH Switch ","children":[]},
{"key":1000008,"title":"4400 Series WLAN Controller","children":[
{"key":1000009,"title":"CISCO 3845","children":[]},
{"key":1000007,"title":"10/100/1000Base-T LX","children":[]}]},
{"key":1000011,"title":"Test Product","children":[]}],"columns":[]}
Here I try to move #3 between #1 and #2, but I can only add the node as child
好的,我在尝试创建 JSFiddle 时发现了错误。我的 jQuery 版本太旧了。使用 3.x 我可以根据需要对节点进行排序。