使用 jsTree,如果该父项是 selected/highlighted,我如何将新项目添加到现有父项的子组中?
Using jsTree, how could I add a new item to the subgroup of an existing parent, if that parent is selected/highlighted?
<script>
$(function () {
@{
var rootGroup = Model.Groups.FirstOrDefault(group => group.ParentGroupId == null);
}
let selectedGroup = "";
let selectedNode = null;
let groups = {};
@foreach(var group in Model.Groups) {
@:groups["@group.GroupId"] = { delete:false ,id: "@group.GroupId", parent: "@group.ParentGroupId", name: "@group.Title", order: "@group.OrderNum" };
}
$('#groupTree').jstree({
"checkbox": { "three_state": false },
"core": {
"check_callback": true,
'data': [
@foreach (var item in Model.Groups) {
@if (item.ParentGroupId == null)
{
@:{ "id": "@item.GroupId", "parent": "#", "text": "@item.Title", "state": { "disabled": true } },
}
else
{
@:{ "id": "@item.GroupId", "parent": "@item.ParentGroupId", "text": "@item.Title" },
}
}
],
"themes": {
"icons": false
},
},
"plugins": ["themes","dnd"]
}).on('loaded.jstree', function () {
$("#groupTree").jstree("open_all");
}).on("select_node.jstree", function (evt, data) {
$("#group-name-input").val(groups[data.node.id].name);
selectedGroup = data.node.id;
selectedNode = data.node;
$("#group-name-input").prop('disabled', false);
$("#save-group-button").prop('disabled', false);
$("#delete-group-button").prop('disabled', false);
}).on("move_node.jstree", function (evt, data) {
groups[data.node.id].parent = data.parent;
groups[data.node.id].order = data.position;
$("#SerializedGroupInformation").val(JSON.stringify(groups));
})
$("#save-group-button").click(function () {
if (selectedGroup != "") {
groups[selectedGroup].name = $("#group-name-input").val();
$("#groupTree").jstree('rename_node', selectedNode, $("#group-name-input").val());
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
}
})
$("#delete-group-button").click(function () {
if (selectedNode.children.length > 0) {
swal({
title: 'Error!',
text: 'The group can not have any children.',
icon: 'error'
});
return;
}
groups[selectedGroup].delete = true;
$("#groupTree").jstree('delete_node', selectedNode);
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
})
$("#new-group-button").click(function () {
var name = $("#new-group-input").val();
var group = { name: name, order: "0", id: "", parent:"" }
var node = { id: name, text: name };
$('#groupTree').jstree('create_node', "@rootGroup.GroupId", node, 'last');
groups[name] = group;
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
$("#new-group-input").val("");
})
});
</script>
考虑到上面的代码,如何将新组作为子节点添加到选定的父节点?我没有这样做。谁能帮忙?我是开发新手,我不愿意承认 JS 不是我的强项……但是 :)
我已经尝试了很多事情并将继续这样做,但这是原始代码,我没有尝试解决这个问题。提前致谢!
这里有一个演示,演示如何向选定的父级添加新项目:
查看:
<div id="jstree">
</div>
<button id="create">create button</button>
js代码:
@section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
var managerTeam = [{
"id": "m1",
"text": "M1",
"children": [{
"id": "m2",
"parent": "m1",
"text": "M2"
}, {
"id": "t1",
"parent": "m1",
"text": "T1"
}, {
"id": "m3",
"parent": "m1",
"text": "M3",
"children": [{
"id": "t2",
"parent": "m3",
"text": "T2"
}, {
"id": "t3",
"parent": "m3",
"text": "T3"
}],
"state": { "opened": true }
}],
"state": { "opened": true }
}];
$('#create').on('click', function () {
var position = 'inside';
var newNode = { state: "open", data: "New nooooode!" };
var parent = $('#jstree').jstree('get_selected')[0];
$('#jstree')
.jstree({
"core": {
"check_callback": true
}
})
.create_node(parent, newNode, position, false, false);
});
});
</script>
}
结果:
<script>
$(function () {
@{
var rootGroup = Model.Groups.FirstOrDefault(group => group.ParentGroupId == null);
}
let selectedGroup = "";
let selectedNode = null;
let groups = {};
@foreach(var group in Model.Groups) {
@:groups["@group.GroupId"] = { delete:false ,id: "@group.GroupId", parent: "@group.ParentGroupId", name: "@group.Title", order: "@group.OrderNum" };
}
$('#groupTree').jstree({
"checkbox": { "three_state": false },
"core": {
"check_callback": true,
'data': [
@foreach (var item in Model.Groups) {
@if (item.ParentGroupId == null)
{
@:{ "id": "@item.GroupId", "parent": "#", "text": "@item.Title", "state": { "disabled": true } },
}
else
{
@:{ "id": "@item.GroupId", "parent": "@item.ParentGroupId", "text": "@item.Title" },
}
}
],
"themes": {
"icons": false
},
},
"plugins": ["themes","dnd"]
}).on('loaded.jstree', function () {
$("#groupTree").jstree("open_all");
}).on("select_node.jstree", function (evt, data) {
$("#group-name-input").val(groups[data.node.id].name);
selectedGroup = data.node.id;
selectedNode = data.node;
$("#group-name-input").prop('disabled', false);
$("#save-group-button").prop('disabled', false);
$("#delete-group-button").prop('disabled', false);
}).on("move_node.jstree", function (evt, data) {
groups[data.node.id].parent = data.parent;
groups[data.node.id].order = data.position;
$("#SerializedGroupInformation").val(JSON.stringify(groups));
})
$("#save-group-button").click(function () {
if (selectedGroup != "") {
groups[selectedGroup].name = $("#group-name-input").val();
$("#groupTree").jstree('rename_node', selectedNode, $("#group-name-input").val());
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
}
})
$("#delete-group-button").click(function () {
if (selectedNode.children.length > 0) {
swal({
title: 'Error!',
text: 'The group can not have any children.',
icon: 'error'
});
return;
}
groups[selectedGroup].delete = true;
$("#groupTree").jstree('delete_node', selectedNode);
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
})
$("#new-group-button").click(function () {
var name = $("#new-group-input").val();
var group = { name: name, order: "0", id: "", parent:"" }
var node = { id: name, text: name };
$('#groupTree').jstree('create_node', "@rootGroup.GroupId", node, 'last');
groups[name] = group;
$("#SerializedGroupInformation").val(JSON.stringify(groups));
$("#group-name-input").prop('disabled', true);
$("#save-group-button").prop('disabled', true);
$("#delete-group-button").prop('disabled', true);
$("#group-name-input").val("");
$("#new-group-input").val("");
})
});
</script>
考虑到上面的代码,如何将新组作为子节点添加到选定的父节点?我没有这样做。谁能帮忙?我是开发新手,我不愿意承认 JS 不是我的强项……但是 :)
我已经尝试了很多事情并将继续这样做,但这是原始代码,我没有尝试解决这个问题。提前致谢!
这里有一个演示,演示如何向选定的父级添加新项目: 查看:
<div id="jstree">
</div>
<button id="create">create button</button>
js代码:
@section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
var managerTeam = [{
"id": "m1",
"text": "M1",
"children": [{
"id": "m2",
"parent": "m1",
"text": "M2"
}, {
"id": "t1",
"parent": "m1",
"text": "T1"
}, {
"id": "m3",
"parent": "m1",
"text": "M3",
"children": [{
"id": "t2",
"parent": "m3",
"text": "T2"
}, {
"id": "t3",
"parent": "m3",
"text": "T3"
}],
"state": { "opened": true }
}],
"state": { "opened": true }
}];
$('#create').on('click', function () {
var position = 'inside';
var newNode = { state: "open", data: "New nooooode!" };
var parent = $('#jstree').jstree('get_selected')[0];
$('#jstree')
.jstree({
"core": {
"check_callback": true
}
})
.create_node(parent, newNode, position, false, false);
});
});
</script>
}
结果: