jQuery MiniUI

标题: 请教一个关于mini-tree的问题？ [打印本页]
作者: sampson    时间: 2017-10-26 10:07:35     标题: 请教一个关于mini-tree的问题？

当我点击一个父节点过后，我如何得到父节点和子节点的值（idField、textField）
作者: dforce    时间: 2017-10-26 11:34:10

可以监听节点点击事件
tree.on("nodeclick",function(e){
       var node=e.node;  //点击的这个节点
       var pNode=tree.getParentNode(node)  //获取这个节点的父节点
       var cNodes=tree.getChildNodes(node)  //获取这个节点子节点集合
})
作者: sampson    时间: 2017-10-26 14:48:00

本帖最后由 sampson 于 2017-10-26 14:49 编辑
dforce 发表于 2017-10-26 11:34
可以监听节点点击事件
tree.on("nodeclick",function(e){
       var node=e.node;  //点击的这个节点

为什么我第一次点击的时候并没有触发监听事件，只有第二次点击才会有输出
  1.                         <div class="mini-fit">   
  2.                                 <ul id="groupTree" class="mini-tree" url="${base }/bdmodel/tables.txt" style="width: 100%; height: 100%;" onnodeclick="addDIv"
  3.                                         showTreeIcon="true" parentField="pid" textField="text" idField="id" resultAsTree="false" expandOnNodeClick="false">
  4.                                 </ul>
  5.                         </div>
复制代码
  1. function addDIv(e) {
  2.         groupTree.on("nodeclick",function(e){
  3.                var node=e.node;  //点击的这个节点
  4.                //var pNode=groupTree.getParentNode(node)  //获取这个节点的父节点
  5.                var cNodes=groupTree.getChildNodes(node)  //获取这个节点子节点集合
  6.                console.log("11111111");
  7.                console.log("pNode: " + "["+node.id + ","+ node.text + "]");
  8.                for(var i =0 ; i < cNodes.length;i++){
  9.                        console.log("2222222");
  10.                        console.log("cNodes: " +"["+ cNodes[i].id + "," + cNodes[i].text + "]");
  11.                }
  12.                
  13.         });
  14. }
复制代码
作者: dforce    时间: 2017-10-26 15:36:29

sampson 发表于 2017-10-26 14:48
为什么我第一次点击的时候并没有触发监听事件，只有第二次点击才会有输出 ...

[attach]10062[/attach]这是我的测试例子，点击一次弹一次alert,没发现问题
如果你的树有问题，请提供类似的例子，能重现出问题即可。
作者: sampson    时间: 2017-10-27 08:25:13

dforce 发表于 2017-10-26 15:36
这是我的测试例子，点击一次弹一次alert,没发现问题
如果你的树有问题，请提供类似的例子，能重现出问题 ...

是我自己搞错了，借此在请教一个问题，现在我想点击mini-tree的节点过后，生成一个动态的div，里面放mini-listbox,可是为什么添加的数据并没有显示呢？
  1.         <div class="mini-fit">
  2.                                 <ul id="groupTree" class="mini-tree"
  3.                                         url="${base }/bdmodel/tables.txt"
  4.                                         style="width: 100%; height: 100%;" onnodeclick="addDIv"
  5.                                         showTreeIcon="true" parentField="pid" textField="text" idField="id"
  6.                                         resultAsTree="false" expandOnNodeClick="false">
  7.                                 </ul>
  8.                         </div>
  9.                 </div>


  12.                 <div>
  13.                         <!-- showCollapseButton="true" -->
  14.                         <div id="fatherNode" class="mini-fit">

  16.                                
  17.                                
  18.                         </div>
  19.                 </div>
复制代码
  1. function addDIv(e) {
  2.         if(e.isLeaf){
  3.                 mini.alert("请选择父节点!!!");
  4.         }else{
  5.                 var data="[{id: 'GWBH', text: '编号'},{id: 'YXJGDM', text: '代码'},{id: 'NBJGH', text: '机构号'},{id: 'JRXKZH', text: '许可证号'},{id: 'GWZL', text: '种类'},{id: 'GWMC', text: '名称'},{id: 'GWSM', text: '说明'},{id: 'GWZT', text: '状态'},{id: 'CJRQ', text: '日期'}]";
  6.                 console.log("data: " + data);
  7.                 var count = $("#fatherNode").children().length;
  8.                 $("#fatherNode").append("<div id=\"tableName"+ count + "\" class=\"drag draggable\">" +
  9.                                 "<div class=\"mini-toolbar\">表名</div>" +
  10.                                 "<div id=\"listbox" + count +"\" class=\"mini-listbox\"" +
  11.                                         "style=\"width: 100%; height: 100%;\"" +
  12.                                         "data=\""+ data +"\""+
  13.                                         " showCheckBox=\"true\" multiSelect=\"true\">"+
  14.                                         "<div property=\"columns\">"+
  15.                                                 "<div header=\"列值\" headerAlign=\"center\" field=\"id\"></div>"+
  16.                                                 "<div header=\"列名\" headerAlign=\"center\" field=\"text\"></div>"+
  17.                                         "</div>" +
  18.                                 "</div>" +
  19.                         + "</div>");
  20.         }
  21. }
复制代码
作者: felt    时间: 2017-10-27 10:08:27

sampson 发表于 2017-10-27 08:25
是我自己搞错了，借此在请教一个问题，现在我想点击mini-tree的节点过后，生成一个动态的div，里面放mini ...

1 listbox的高度设置auto
2 添加完html后调用mini.parse()来解析成MiniUI控件



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2