最近做项目对Ext Tree做了一些简单应用,进行一个简单总结,与大家分享。
之前使用dTree,这个JS短小精悍,功能也不逊色,特别是它的cookie记录功能,让我们省了不少的事,不过缺点就是不支持异步查询。后来转换到了Ext Tree上。下面是一些应用场景和总结。欢迎大家指导。
1、同步树:
创建TreePanel,设置属性,添加一个根节点,并展开树。
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'treeDiv',
autoScroll:true,
autoHeight:true,
animate:true,
enableDD:true,
loader: new Tree.TreeLoader({
dataUrl:'tree.do'
})
});
// set the root node
var root=new Ext.tree.TreeNode({
id : "root",
text : "操作列表"
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
root.select();
2、异步树:
为同步树树添加异步子节点,并指定其连接地址。
node.on('expand', getSubTree);
指定展开节点时如何触发异步查询
function appendToRoot(root, n){
var roots = document.getElementsByName(n.id);
//alert(roots.length);
if(roots != null){
for(var i = 0; i < roots.length; i++){
var rr = roots[i].value;
if(rr == null || rr.length == 0){
continue;
}
//alert(rr);
var id_ = rr.split(",")[0];
var text_ = rr.split(",")[1];
var node = null;
var hasChild = rr.split(",")[2];
var isLeaf = (hasChild == "true") ? false : true;
node = new Ext.tree.AsyncTreeNode({
id: id_,
text : text_,
href : "Handle.do?id=" + id_ ,
hrefTarget : "main",
leaf : isLeaf,
children : [{
text : 'loading',
iconCls : 'loading',
leaf : false
}]
});
node.on('expand', getSubTree);
root.appendChild(node);
}
}
}
异步查找子节点。
function getSubTree(node){
if(node.firstChild.text=='loading'){
Ext.Ajax.request({
url: 'tree.do',
params: {node : node.id},
method: 'POST',
timeout: 60*1000, //1分钟
success: function(v){
//成功返回
var myData = eval(v.responseText); // 得到服务器返回的json串
if(v.responseText == null || myData.length == 0){
node.firstChild.remove();
return;
}
for(var i = 0; i < myData.length; i++){
var cnode = new Ext.tree.AsyncTreeNode({
id : myData[i].id,
text : myData[i].text,
leaf : myData[i].isLeaf,
href : "Handle.do?id=" + myData[i].id,
hrefTarget : TARGET,
children : [{
//添加子节点,如果服务器返回tl[i].leaf为true则孩子节点将无法显示
text : 'loading',
iconCls: 'loading',
leaf:true
}]
});
cnode.on('expand',getSubTree);
node.appendChild(cnode);
}
node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
},
// 失败
failure: function(){
alert("获取子节点出错");
}
});
}
}
服务器端的代码片段:
public List<Map<String, Object>> getSubTree(String id, String type) {
try {
List<Map<String, Object>> retList = new ArrayList<Map<String, Object>>();
List<ChnTreeNode> list = getManage().getRankingManage().getChilds(id);
for(ChnTreeNode node : list) {
Map<String, Object> tree = new HashMap<String, Object>();
String nodeType = node.getType();
if(filterNode(nodeType, type)){
continue;
}
//节点的id
tree.put("id", node.getId());
//节点显示单位名
tree.put("text", node.getText());
//是否是叶子节点
tree.put("isLeaf", Boolean.valueOf(node.isLeaf()));
//类型
tree.put("type", nodeType);
//将这个生成叶子节点对应的MAP加到单位list里
retList.add(tree);
}
return retList;
} catch (Exception e) {
log.error("获取子节点列表失败:" + e.getMessage());
return null;
}
}
public static boolean filterNode(String nodeType, String type) {
if("1".equals(type)){
return false;
}else{
int type_ = Integer.parseInt(type);
if(nodeType.substring(type_-2, type_-1).equals("1")){
return false;
}else{
return true;
}
}
}
public JSONArray getModuleTree(String id, String type) {
List<Map<String, Object>> list = this.getSubTree(id, type);
if (list == null) {
return null;
}
//转换这个list让他变成json格式
JSONArray jsonArray = JSONArray.fromObject(list);
return jsonArray;
}
public ActionForward tree(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("node");
String type = request.getParameter("filter");
JSONArray jsonArray = getModuleTree(id, type);
response.setContentType("text/json; charset=GBK");
try {
response.getWriter().print(jsonArray);
} catch (IOException e) {
log.error("输出json失败" + e.getMessage());
return null;
}
return null;
}
3、自定义节点属性:
从2中的服务器端代码看到我们自定义了type属性,这样返回的JSON字符串,就可以获得这个属性设置到树的TreeNode中,那么我们如何取得这个属性呢,可以用这样的代码:
node.attributes.type
4、复选框支持:
经常有这样的应用场景,就是我们的树节点是支持多选的,这时候我们可以为树节点添加checked属性,监听复选事件,可以用下面的代码:
node.on('checkchange', checkChange);
...
function checkChange(node, checked){
//node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}
上面的操作还能够实现点选父节点时,将所有它的子节点也选择。如何获得复选框的值呢,请看5.
5、递归取值:
下面的方法是采用递归函数的方式遍历整个节点子树,将所有值保存到了Array中,不知Ext Tree有没有提供这样的功能,如果有,请大家一定要告诉我,谢谢!
function handleSelect(node, chnIds){
if(node.attributes.checked){
if(!contains(chnIds, node.id)){
chnIds.push(node.id);
}
return;
}else{
node.eachChild(function(child) {
handleSelect(child, chnIds);
});
}
}
6、remove的问题:
先看一段代码:
var children = root.childNodes;
for(var i = 0; i < children.length; i++){
root.removeChild(children[i]);
}
如果使用上面的代码,我们会发现删除总是会出现逻辑问题,最开始我也很是疑惑,明明length为3,为什么只执行两次呢,原来是删除的同时,root节点孩子的数目和每个孩子所处的下标都是变化的,我们可以用这段代码来代替:
while(root.firstChild){
root.removeChild(root.firstChild);
}
7、TreeFilter的应用:
TreeFilter可以实现按条件过滤的功能,树的节点在展示的时候,会考虑TreeFilter的过滤来决定显示那些节点,隐藏那些节点,它的用法很简单:
var filter = new Ext.tree.TreeFilter(tree, {
clearBlank: true,
autoClear: true
});
filter.filterBy(function(n){
if(n.id.substring(0, 1) == "N"){
return false;
}else{
return true;
}
});
上面的代码会过滤掉所有id以字母N开头的节点。
8、注意事项:
对于异步树节点,如果不同节点可能来自不同数据表的时候,如果我们利用表的主键做ID,我们要防止节点的ID重复,可以在在取得的主键ID前面增加字符串做标识,后台再截取。
9、问题:
点击历史的记录,这个对于异步树有点难度,大家是怎么做的呢?
对节点的页面级的缓存
参考:
http://beckrabbit.iteye.com/blog/132995
http://kingapex.iteye.com/blog/150806
http://www.iteye.com/topic/133269
http://www.easyjf.com/bbs.ejf?cmd=appShow&id=5734416
http://jstang.5d6d.com/thread-844-1-1.html
分享到:
相关推荐
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
EXT tree 使用 实例 最新 EXT使用实例,很漂亮。
一个不错Ext Tree 自己去下个EXT2.0库吧
ext tree 与ssh2的结合,主要演示ext在ssh2中的使用
用ext + xml文件 完成 ext tree panel 树结构。延迟加载,支持 多选 单选。前后台数据交互使用的是 json串,挺不错的
一个关于extTree的应用,点击会弹出界面啊,等等
EXT TREE 扩展CHECKBOX所需JS loader方法中添加: baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI }
NULL 博文链接:https://scmky.iteye.com/blog/1174740
自己编写的EXT例子,grid、tree从数据库读取数据动态显示,并进行分页。可以动态更换主题,并存入cookies中。
关于Ext Tree Panel,相关的知识文档
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext tree json 例子(不含EXT包)
ext的tree两个拖拽例子,话不多说,详见代码
Ext tree 实现的是一棵异步加载的Tree,完整Demo项目,导入Eclipse就可以运行
在extjs中加载大量树节点时会卡死,用于解决大量数据加载。
ext 学习笔记 ext 学习笔记 ext 学习笔记
Ext 带多选框的Tree
Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径...支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail.com
自己写的小例子 博文链接:https://zhengkaifl.iteye.com/blog/841338