jQuery MiniUI

标题: mini-tree 如何将选中的节点添加到另一个空树 [打印本页]

作者: 沐熙111 时间: 2016-8-26 14:26:45 标题: mini-tree 如何将选中的节点添加到另一个空树

本帖最后由沐熙111 于 2016-8-26 14:26 编辑

左侧的tree 从后台读取的，将选择的节点添加到右侧的菜单，有什么好的实现方法吗

作者: dforce 时间: 2016-8-26 15:17:04

http://www.miniui.com/demo/#src=tree/between.html
参考示例

作者: 沐熙111 时间: 2016-8-26 15:26:56

dforce 发表于 2016-8-26 15:17
http://www.miniui.com/demo/#src=tree/between.html
参考示例

如果右侧没有父节点怎么像里添加

作者: dforce 时间: 2016-8-26 16:15:16

沐熙111 发表于 2016-8-26 15:26
如果右侧没有父节点怎么像里添加

tree.getRootNode()可以获取虚拟根节点

作者: 沐熙111 时间: 2016-8-26 17:29:08

本帖最后由沐熙111 于 2016-8-26 17:31 编辑

dforce 发表于 2016-8-26 16:15
tree.getRootNode()可以获取虚拟根节点

现在可以添加了，可是为什么多选的时候如果不选中父节点下的全部就不能check到

作者: felt 时间: 2016-8-29 09:19:55

沐熙111 发表于 2016-8-26 17:29
现在可以添加了，可是为什么多选的时候如果不选中父节点下的全部就不能check到

请详细说明你的问题

作者: 沐熙111 时间: 2016-8-29 10:19:02

felt 发表于 2016-8-29 09:19
请详细说明你的问题

var node =leftTree.getCheckedNodes(true); 用这个获取选中的节点的时候，如果只选叶节点，这个方法是不管用的，只能是在父节点前勾选，才能取到值

作者: felt 时间: 2016-8-29 11:15:43

沐熙111 发表于 2016-8-29 10:19
var node =leftTree.getCheckedNodes(true); 用这个获取选中的节点的时候，如果只选叶节点，这个方法是 ...

getCheckedNodes
不加参数，只获取check选中的节点
true,包括父节点
false,不包括父节点

作者: 沐熙111 时间: 2016-8-29 14:01:26

felt 发表于 2016-8-29 11:15
getCheckedNodes
不加参数，只获取check选中的节点
true,包括父节点

父节点展开就不执行js ，父节点闭合才执行，是在不明白怎么回事

作者: felt 时间: 2016-8-29 14:55:16

沐熙111 发表于 2016-8-29 14:01
父节点展开就不执行js ，父节点闭合才执行，是在不明白怎么回事

还是不明白你到底什么问题，请提供简单html重现问题

作者: 沐熙111 时间: 2016-8-29 15:35:47

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="${ctx }/static/miniui/scripts/boot.js" type="text/javascript"></script>
<style type="text/css">
td{height: 30px;}
</style>
</head>
<body>
<form id="form1" method="post">
<div>
<strong>角色管理</strong> <br>
<hr color="#808080" style="height: 4px">
<p>
<span style="color: #999999;">角色管理 ></span><span> 编辑角色</span>
</p>
<input id="id1" type="mini-hidden">
<table>
<tr>
<td>从下列位置选择菜单：</td>
<td></td>
<td>配置菜单：</td>
</tr>
<tr>
<td>
<div style="border-style: solid; border-width: 2px; border-color: #D3D3D3; width: 200px; height: 300px; float: left; position: relative;"
id="">
<a class="mini-button" onclick="checkAll" style="width:150px;">全选</a>

<ul id="leftTree" class="mini-tree" url="${ctx}/leftMenu" style="width:300px;padding:5px;"
   textField="text" idField="id" parentField="pid"
resultAsTree="false"
   checkRecursive="true"  autoCheckParent="false"
   showCheckBox="true"
   >
</ul>
</div>
</td>
<td align="center">
<a class="mini-button" onclick="addMenu" style="width:60px;">添加》</a>
<br><br>
<a class="mini-button" onclick="deleteMenu" style="width:60px;">《删除</a>
<td>
<div style="border-style: solid; border-width: 2px; border-color: #D3D3D3; width: 200px; height: 300px; float: left; position: relative;"
id="">


<ul id="leftTree1" class="mini-tree" style="width:300px;padding:5px;"
   textField="text" idField="id" parentField="pid"
   resultAsTree="false" autoCheckParent="true"
checkRecursive="true"  showCheckBox="true"
>
</ul>
</div>
</td>
</tr>
</table>
</div>
<hr color="#808080" style="height: 1px">
<div style="text-align:center;padding:10px;">
<a class="mini-button" onclick="onDelete" style="width:150px;">删除</a>
</div>
</form>

</body>
<script type="text/javascript">
mini.parse();
var form = new mini.Form("form1");
var leftTree = mini.get("leftTree");
var leftTree1=mini.get("leftTree1");
var root =leftTree.getRootNode();
var root1 =leftTree1.getRootNode();//获得虚拟根节点
function addMenu(){

        alert("====addMenu");
        var nodes =leftTree.getCheckedNodes(true);//获取Check选中的多个节点  false不包含父节点
        alert(nodes);

        alert("====addMenu11111");
        leftTree1.addNodes(nodes,root1);
        leftTree.removeNodes(nodes);

   }

   function deleteMenu(){
   //获取选中项删除
   var nodes =leftTree1.getCheckedNodes(true);
   leftTree1.removeNodes(nodes);
   }
</script>
</html>

我这个是从后台读的数据  你找一个文本读信息应该就可以

作者: felt 时间: 2016-8-29 15:47:20

沐熙111 发表于 2016-8-29 15:35
td{height: 30px;}

你是选中的又有父节点，又有子节点吧
你现在是要遵循怎样的规则来添加

如果是父节点，那么获取到选中节点会带有children字段，你可以把chlidren字段删掉，一般使用是要么只添加父节点，或只添加子节点

作者: 沐熙111 时间: 2016-8-29 15:58:52

felt 发表于 2016-8-29 15:47
你是选中的又有父节点，又有子节点吧
你现在是要遵循怎样的规则来添加

如果选中了父节点下的一个子节点，那么需要将父节点和选中的子节点都添加到另一个树

作者: felt 时间: 2016-8-29 17:15:15

沐熙111 发表于 2016-8-29 15:58
如果选中了父节点下的一个子节点，那么需要将父节点和选中的子节点都添加到另一个树 ...

var nodes = leftTree.getCheckedNodes();
      $(nodes).each(function (i, item) {
         delete item.children;
         item.expanded = false;
      })
      var items = mini.listToTree(nodes,"children", "id", "pid");
      leftTree1.addNodes(items, root1);

作者: 沐熙111 时间: 2016-9-1 11:40:57

felt 发表于 2016-8-29 17:15
var nodes = leftTree.getCheckedNodes();
$(nodes).each(function (i, item) {
de ...

delete item.children;
右侧的树显示对了，但是左侧的树的节点也被全部删除了，操作的是一直是左树的对象，所以左树的对象会跟着变吗？

作者: felt 时间: 2016-9-1 12:55:51

沐熙111 发表于 2016-9-1 11:40
delete item.children;
右侧的树显示对了，但是左侧的树的节点也被全部删除了，操作的是一直是左树的对 ...

是的
可以克隆一下数据再操作
var nodes = leftTree.getCheckedNodes();
var cloneNodes=mini.clone(nodes);
      $(cloneNodes).each(function (i, item) {
         delete item.children;
         item.expanded = false;
      })
      var items = mini.listToTree(cloneNodes,"children", "id", "pid");
      leftTree1.addNodes(items, root1);

作者: 沐熙111 时间: 2016-9-1 15:30:14

felt 发表于 2016-9-1 12:55
是的
可以克隆一下数据再操作
var nodes = leftTree.getCheckedNodes();

ok 谢谢

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)