浏览 9367 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-20
http://www.smellcode.cn/index.php/javascript/jiyuext20dehanyoucheckboxdetree/
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-02-20
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
感谢分享，这一句很关键！ |
| 返回顶楼 | |
|
发表时间：2008-02-23
引用 mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊 你其实可以用最简单的树来实现，不用什么extend<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
var tree = null;
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'xmmapjson.json'
}),
rootVisible: false
});
tree.on('checkchange', function(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);
});
}, tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'root'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
var fn = function() {
alert(tree.getChecked('id'));
};
</script>
</head>
<body scroll="no">
<b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
<input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
</body>
</html>
这是json数组： [
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
|
| 返回顶楼 | |
|
发表时间：2008-03-19
smellcode 写道 引用 mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊 你其实可以用最简单的树来实现，不用什么extend<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
var tree = null;
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'xmmapjson.json'
}),
rootVisible: false
});
tree.on('checkchange', function(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);
});
}, tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'root'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
var fn = function() {
alert(tree.getChecked('id'));
};
</script>
</head>
<body scroll="no">
<b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
<input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
</body>
</html>
这是json数组： [
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b |
| 返回顶楼 | |
|
发表时间：2008-06-15
我也写了一个复选框的树
但是我想 知道怎么实现、特定情况下把页面变成灰色 就是不可以对chenked 或是当前这棵树进行操作。 |
| 返回顶楼 | |
|
发表时间：2008-06-28
你的JSON数据组是怎么样生成的啊
|
| 返回顶楼 | |
|
发表时间：2008-08-09
小蚯蚓 写道
smellcode 写道
引用
mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊
你其实可以用最简单的树来实现，不用什么extend<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../support/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
var tree = null;
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'xmmapjson.json'
}),
rootVisible: false
});
tree.on('checkchange', function(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);
});
}, tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'root'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
var fn = function() {
alert(tree.getChecked('id'));
};
</script>
</head>
<body scroll="no">
<b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>
<input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" />
</body>
</html>
这是json数组： [
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b 你把animate:false, 看看。就可以啦！
|
| 返回顶楼 | |
|
发表时间：2008-08-09
ie出不来，firebox可以，但是中为不显示
|
| 返回顶楼 | |
