写一个jQuery 双向选择穿梭框 树状结构数据 选择文本穿梭不要复选框
时间: 2024-04-11 12:28:28 浏览: 9
好的,以下是一个基于 jQuery 的双向选择穿梭框,使用树状结构数据,不带复选框的选择文本穿梭功能:
HTML:
```html
<div class="transfer-panel">
<div class="left-panel">
<h3>可选项</h3>
<ul id="tree" class="tree"></ul>
</div>
<div class="right-panel">
<h3>已选项</h3>
<ul id="selected-items" class="selected-items"></ul>
</div>
</div>
```
CSS:
```css
.transfer-panel {
display: flex;
justify-content: space-between;
align-items: center;
}
.tree,
.selected-items {
list-style: none;
padding: 0;
}
.tree li,
.selected-items li {
margin-bottom: 5px;
}
.tree li span {
cursor: pointer;
}
.right-panel {
margin-left: 20px;
}
```
JavaScript:
```javascript
$(document).ready(function() {
// 树状结构数据示例
var treeData = [
{
text: "节点1",
children: [
{ text: "子节点1" },
{ text: "子节点2" },
{ text: "子节点3" }
]
},
{
text: "节点2",
children: [
{ text: "子节点4" },
{ text: "子节点5" },
{ text: "子节点6" }
]
},
{
text: "节点3",
children: [
{ text: "子节点7" },
{ text: "子节点8" },
{ text: "子节点9" }
]
}
];
// 渲染树状结构数据
function renderTree($parent, data) {
$.each(data, function(index, item) {
var $li = $("<li>");
var $span = $("<span>").text(item.text);
$li.append($span);
if (item.children && item.children.length > 0) {
var $ul = $("<ul>");
$li.append($ul);
renderTree($ul, item.children);
}
$parent.append($li);
});
}
// 树节点点击事件处理
function handleNodeClick() {
$(".tree li span").on("click", function() {
var $this = $(this);
if ($this.hasClass("selected")) {
// 取消选中状态
$this.removeClass("selected");
$this.closest("li").appendTo("#tree");
} else {
// 添加选中状态
$this.addClass("selected");
$this.closest("li").appendTo("#selected-items");
}
});
}
// 初始化穿梭框
function initTransferPanel() {
// 渲染树状结构数据
renderTree($("#tree"), treeData);
// 绑定树节点点击事件处理
handleNodeClick();
}
initTransferPanel();
});
```
这个代码会创建一个双向选择穿梭框,左侧是可选项树状结构数据,右侧是已选项列表。通过点击树节点,可以将选中的节点从可选项移到已选项,或者从已选项移到可选项。没有复选框,选择是通过点击文本实现的。
希望对你有帮助!如果有其他问题,请继续提问。