jQuery MiniUI

标题: onDrawNode 方法里面我想过滤掉某些指定的节点 [打印本页]

作者: caicai0328 时间: 2012-7-10 14:38:56 标题: onDrawNode 方法里面我想过滤掉某些指定的节点

在属性节点被加载的时候，对调用这个方法逐个遍历所有的节点，我想在这个过程中删除掉某些节点怎么操作呢？

作者: niko 时间: 2012-7-10 17:58:25

参考这个例子：
http://miniui.com/demo/#src=buttonedit/selectTree.html

弹出选择树部分代码

作者: caicai0328 时间: 2012-7-12 16:05:08

niko 发表于 2012-7-10 17:58
参考这个例子：
http://miniui.com/demo/#src=buttonedit/selectTree.html

好想没有我要的东西呢？function onDrawNode(e){
var tree = e.sender;
var node = e.node;
var type=node.t;
   if(type!=0){
   var iconName="tree-node-"+type;
   e.iconCls = iconName;
}  我是想在这个方法里面动态设置节点的类型图片同时删除掉某些类型的节点

作者: factory 时间: 2012-7-12 16:23:03

caicai0328 发表于 2012-7-12 16:05
好想没有我要的东西呢？function onDrawNode(e){
var tree = e.sender;
var node = e.node;

你照着这个例子上，写个生成树的时候把你需要删除的节点过滤掉不就可以了么

作者: caicai0328 时间: 2012-7-12 18:36:39

factory 发表于 2012-7-12 16:23
你照着这个例子上，写个生成树的时候把你需要删除的节点过滤掉不就可以了么 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建树形</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

<script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
<link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />

</head>
<body>
<h1>创建树形</h1>

<h4>方式三：Javascript对象</h4>
<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;"
      showTreeIcon="true" textField="n" idField="id" nodesField="c"  onnodeselect="nodeselect" >
</ul>

<script type="text/javascript">
      mini.parse();

      var tree3 = mini.get("tree3");

tree3.filter(function(node){
if(node.n=="Tree") return true;
});

      tree3.loadData([
         { id: "lists", n: "Lists", expanded: false,
            c: [
         { id: "datagrid", n: "DataGrid" ,
c: [
{ n:"叶子节点231",id:"dada",t:"类型",kk:"可以"},
{ text:"叶子节点232"},
{  text:"叶子节点233"},
{  text:"叶子节点234"}
]
},

         { id: "tree", n: "Tree" ,
c: [
{ name:"叶子节点231",

},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
]},
         { id: "treegrid", n: "TreeGrid ",
c: [
{ name:"叶子节点231"},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
] }
         ]
                  }

      ]);

</script>

<div class="description">
      <h3>Description</h3>
      <p>
      </p>
</div>
</body>
</html>写了这么个例子  整个树都没了？

作者: niko 时间: 2012-7-13 10:14:56

过滤树示例：
http://www.miniui.com/demo/#src=tree/filtertree.html

作者: caicai0328 时间: 2012-7-13 16:16:35

niko 发表于 2012-7-13 10:14
过滤树示例：
http://www.miniui.com/demo/#src=tree/filtertree.html

我按照的这个例子的

<script type="text/javascript">
      mini.parse();

      var tree3 = mini.get("tree3");

   tree3.filter(function (node) {
                  var text = node.text ? node.text.toLowerCase() : "";
                  if (text.indexOf("layouts") != -1) {
                     return true;
                  }
            });

      tree3.loadData([
         { id: "lists", text: "Lists", expanded: false,
            children: [
         { id: "datagrid", text: "DataGrid" },
         { id: "tree", text: "Tree" },
         { id: "treegrid", text: "TreeGrid " }
         ]
                  },
         { id: "layouts", text: "Layouts", expanded: false,
            children: [
         { id: "panel", text: "Panel" },
         { id: "splitter", text: "Splitter" },
         { id: "layout", text: "Layout " }
         ]
         },
         { id: "navigations", text: "Navigations", expanded: false,
            children: [
         { id: "pager", text: "Pager" },
         { id: "tabs", text: "Tabs" },
         { id: "navbar", text: "NavBar" },
         { id: "menu", text: "Menu" }
         ]
         }
      ]);

</script>

SCRIPT438: 对象不支持“filter”属性或方法
createtree - 副本 - 副本.html, 行27 字符8
说之没有这个属性方法
我下载了最新的UI包做的例子  好想也不行呢？

作者: niko 时间: 2012-7-13 20:12:53

var tree3 = mini.get("tree3");
你是否id定义和获取的不对啊

作者: caicai0328 时间: 2012-7-13 23:44:57

niko 发表于 2012-7-13 20:12
var tree3 = mini.get("tree3");
你是否id定义和获取的不对啊

这个是没问题的啊
我就在原有的demo上做的例子啊

作者: niko 时间: 2012-7-14 09:58:08

tree3.filter(function(node){
if(node.n=="Tree") return true;
});
放loadData后面

作者: caicai0328 时间: 2012-7-14 20:36:01

niko 发表于 2012-7-14 09:58
tree3.filter(function(node){
if(node.n=="Tree") return true;
});

我试了还是不行呢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建树形</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

<script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../scripts/miniui/miniui.js" type="text/javascript"></script><link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
<link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
   <script src="../../scripts/boot.js" type="text/javascript"></script>

</head>
<body>
<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;"
      showTreeIcon="true" textField="text" idField="id" >
</ul>

<script type="text/javascript">
      mini.parse();

      var tree3 = mini.get("tree3");

      tree3.loadData([
         { id: "lists", text: "Lists", expanded: false,
            children: [
         { id: "datagrid", text: "DataGrid" },
         { id: "tree", text: "Tree" },
         { id: "treegrid", text: "TreeGrid " }
         ]
                  },
         { id: "layouts", text: "Layouts", expanded: false,
            children: [
         { id: "panel", text: "Panel" },
         { id: "splitter", text: "Splitter" },
         { id: "layout", text: "Layout " }
         ]
         },
         { id: "navigations", text: "Navigations", expanded: false,
            children: [
         { id: "pager", text: "Pager" },
         { id: "tabs", text: "Tabs" },
         { id: "navbar", text: "NavBar" },
         { id: "menu", text: "Menu" }
         ]
         }
      ]);

         tree3.filter(function (node) {
                  var text = node.text;// ? node.text.toLowerCase() : "";
                  if (text== "Pager") {
                     return true;
                  }
            });
</script>

<div class="description">
      <h3>Description</h3>
      <p>
      </p>
</div>
</body>
</html>
这是完整代码  请你帮忙看下子  谢谢了  备注：我做的例子是在最新版的里面做的

作者: caicai0328 时间: 2012-7-14 20:44:29

caicai0328 发表于 2012-7-14 20:36
我试了还是不行呢

我通过IE的debug 方式看了变量tree 里面并没有filter 方法呢？

作者: niko 时间: 2012-7-16 09:38:46

更新版本

作者: caicai0328 时间: 2012-7-16 22:17:15

niko 发表于 2012-7-16 09:38
更新版本

我用的是最新的版本啊 ~~~~(>_<)~~~~

作者: niko 时间: 2012-7-17 09:21:51

过滤树节点示例：
http://www.miniui.com/demo/#src=tree/filtertree.html

你看下你的下载包内，是否有此示例。

作者: caicai0328 时间: 2012-7-17 16:27:46

niko 发表于 2012-7-17 09:21
过滤树节点示例：
http://www.miniui.com/demo/#src=tree/filtertree.html

你好，我下载的是7-11号更新的，没有看到这个对应的实例 ui for java 的

作者: niko 时间: 2012-7-17 16:37:36

有的，路径是：miniui_java\WebContent\demo\tree\filtertree.html

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