extjs 扩展树，带复选框，能联动

功能说明：1 菜单为后台读取数据，异步加载生成。
2 菜单后边的功能列表为读取数据库生成。
3 当选中菜单时候可以级联选中 其后边的所有功能。
4 当选中功能时候，若功能对应的菜单未选中，则自动选中菜单。
5 非叶子节点也可以设置显示复选框，这样的例子网上有。
不知道大家对这颗树感觉如何？

评论

9 楼 cnwong 2010-09-08  

不错的文章，

8 楼 艾建锋 2010-08-25  

kidiaoer 写道

你好，请我能讲解一下你的这个系统里面的权限是怎么实现的吗？如果不介意的话，能不能给提供源码供我参考一下。那样的话我将万分感激。如果不方便的话，那就算了。

1权限跟用户的角色关联，跟用户的角色组关联。or的关系。
2每个菜单的下面的功能，可以自定义（存取到数据库）。每个功能在界面上会对应一个按钮。按钮初始化为hide，当用户用这儿功能的时候，则show。权限控制可以写个js。对于有权限控制的页面，只需要导入这个js。调研里面的函数即可。

7 楼 艾建锋 2010-08-25  

fooky 写道

很不错，做权限管理很好，异步加载菜单数据和其后面的从数据库读取的功能点同时显示这个创意不错。我想知道怎么实现的

1后台读取数据库，这部分自己搞定。2你要分析以前贴过的那两个js文件

6 楼 kidiaoer 2010-08-24  

你好，请我能讲解一下你的这个系统里面的权限是怎么实现的吗？如果不介意的话，能不能给提供源码供我参考一下。那样的话我将万分感激。如果不方便的话，那就算了。

5 楼 fooky 2010-07-19  

很不错，做权限管理很好，异步加载菜单数据和其后面的从数据库读取的功能点同时显示这个创意不错。我想知道怎么实现的

4 楼 艾建锋 2009-09-15  

yehuijia 写道

你好！
   最近也在研究用EXTJS做权限管理模块，
   看到你的界面，比较吻合我现在的需求，
   如果楼主有时间，能否针对这块内容做点补充！
   上传点可具参考性的JS代码，可以否！
   感谢！
  

Ext.tree.TreeCheckNodeUI = function() {
// 'multiple':多选; 'single':单选; 'cascade':级联多选
this.checkModel = 'multiple';

// only leaf can checked
this.onlyLeafCheckable = false;

Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};


Ext
.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {

renderElements : function(n, a, targetNode, bulkRender) {
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
this.onlyLeafCheckable = tree.onlyLeafCheckable || false;

// add some indent caching, this helps performance when
// rendering a large tree
this.indentMarkup = n.parentNode ? n.parentNode.ui
.getChildIndent() : '';
var href = a.href ? a.href : Ext.isGecko ? "" : "#";

//var cb = (!this.onlyLeafCheckable || a.leaf);

// //////////////////////////////////////////////////
var cb = a.leaf;// 作用是当节点为叶子节点的时候显示复选框，其他时候不显示
var resourcesStr = "";// 子菜单下面的权限
//alert("11"+n.attributes.resources+"22");
if (n.attributes.resources != "") {
// 子菜单下面的权限store
var resourcesStroe = new Ext.data.SimpleStore( {
data : eval(n.attributes.resources),
fields : ["id", "name", "checked"]
});
for (var i = 0;i < resourcesStroe.getCount(); i++) {
var record = resourcesStroe.getAt(i);
resourcesStr += "<input class='x-tree-node-cb' onclick=resCheckChange(this,'"+n.id+"') name=res"
+ n.id
+ " id = '"
+ record.get("id") + "' type='checkbox' ";
if (record.get("checked")) {
resourcesStr += "checked=true/>"
+ record.get("name");
} else {
resourcesStr += "/>" + record.get("name");
}
}
}
// alert(resourcesStr)

var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="',
n.id,
'" class="x-tree-node-el x-tree-node-leaf x-unselectable ',
a.cls,
'" unselectable="on">',
'<span class="x-tree-node-indent">',
this.indentMarkup,
"</span>",
'<img src="',
this.emptyIcon,
'" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="',
a.icon || this.emptyIcon,
'" class="x-tree-node-icon',
(a.icon ? " x-tree-node-inline-icon" : ""),
(a.iconCls ? " " + a.iconCls : ""),
'" unselectable="on" />',
cb
? ('<input class="x-tree-node-cb" type="checkbox" name="'+n.id+'" ' + (a.checked
? 'checked="checked" />'
: '/>'))
: '',
'<a hidefocus="on" class="x-tree-node-anchor" href="',
href,
'" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "",
'><span unselectable="on">',
n.text,
"</span></a><div style='display:inline; position:absolute;left:180px'>"
+ resourcesStr + "</div></div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"].join('');

var nel;
if (bulkRender !== true && n.nextSibling
&& (nel = n.nextSibling.ui.getEl())) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel,
buf);
} else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd",
targetNode, buf);
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
Ext.fly(this.checkbox).on('click',
this.check.createDelegate(this, [null]));
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
},

// private
check : function(checked) {
var n = this.node;
if (checked === null) {
checked = this.checkbox.checked;
} else {
this.checkbox.checked = checked;
}
// 自定义，当选中叶子节点的时候，其后面的资源checkbox全都选中
var allChecks = Ext.getDoc().dom.getElementsByTagName("input");
for(var i = 0;i < allChecks.length;i ++){
var check = allChecks[i];
if(check.name == "res"+n.id){
check.checked = checked;
}
}
n.attributes.checked = checked;
//tree.fireEvent('check', n, checked);
}
});

/**
* 资源复选框，选择改变事件.
* 当选中资源的时候，子菜单选中。
*/
function resCheckChange(obj,nodeId){
var allChecks = Ext.getDoc().dom.getElementsByTagName("input");
if(obj.checked){
for(var i = 0;i < allChecks.length;i ++){
var check = allChecks[i];
if(check.name == nodeId && !check.checked){
check.checked = true;
var node = Ext.getCmp("tree").getNodeById(nodeId);
node.attributes.checked = obj.checked;
}
}
}
}

3 楼 艾建锋 2009-09-15  

yehuijia 写道

你好！
   最近也在研究用EXTJS做权限管理模块，
   看到你的界面，比较吻合我现在的需求，
   如果楼主有时间，能否针对这块内容做点补充！
   上传点可具参考性的JS代码，可以否！
   感谢！
  

var roleId = "";
/**
* 生成角色分配权限的窗口
*/
function _resourcesRoleMge(row){
roleId = row.get("pk");

/**
* 左侧的菜单树
*/
var treeConfig = {
region : "center",
id:"tree",
collapsible : true,
border : false,
layout:"fit",// 自动填充
height:300,
width:200,
autoScroll :true,
frame:true,
enableDrag : false,
checkModel : 'cascade', // 对树的级联多选
onlyLeafCheckable : false, // 对树所有结点都可选
rootVisible : true, // 显示根节点
animate : true, // 有一种动态效果
enableDD : false,// true to enable drag and drop是否支持拖拽效果
loader : new Ext.tree.TreeLoader( {
// 请求的地址
url : basePath + "admin/resourcesrolemge.do",
baseParams :{key:"list",roleId:roleId},
baseAttrs : {
uiProvider : Ext.tree.TreeCheckNodeUI
},
listeners:{// 加载前变化参数
"beforeload":function(treeLoader, node) {
        this.baseParams.roleId = roleId;
}
}
}),
root : new Ext.tree.AsyncTreeNode( {
id : "00",
text : "菜单资源",
icon : basePath + "images/menuimages/totalMenu.png"
})
};
var tree = new Ext.tree.TreePanel(treeConfig);

var windowconfig = {
title : "给角色【"+row.get("wtroleName")+"】分配权限",
width : 500,
//autoHeight:true,
height : 400,
id : 'iwindow',
modal : true,
autoScroll : true,
layout : "fit",
items : [tree],
buttonAlign:"center",
buttons:[{
text:"提交",
handler:_subRoleRights
},{
text:"关闭",
style:"margin-left:15px;",
handler:function(){
Ext.getCmp("iwindow").close();
}
}]
}
var iwindow = new Ext.Window(windowconfig);
iwindow.show();
tree.expandAll();// 展开所有节点
}




// 定义一个store
var resourcesStore=new Ext.data.Store({
url:basePath+"admin/resources.do?key=list",
reader: new Ext.data.JsonReader({
totalProperty : 'results',
remoteSort : false,// 是否后台排序，会提交两个参数sort和dir
root : 'rows'
},[{
name:"wtresourceId"
},{
name:"wtresName"
},{
name:"wtresDescription"
}]
)
});

/**
* 获取数据并保存
* 获得的数据有  roleId
* 所有选中的子菜单的id
* 所有选中的资源id
*/
function _subRoleRights(){
    // 所有选中的子菜单的id
var checkedNodesIds = "";// 选中的节点id
var checkedNodes = Ext.getCmp("tree").getChecked();
for (var i = checkedNodes.length - 1 ;i >= 0 ; i--) {
var node = checkedNodes[i];
if (node.leaf) {// 去掉非叶子节点
checkedNodesIds += "," + node.id;
}
if(i == 0){
checkedNodesIds = checkedNodesIds.substring(1);
}
}
// 获得所有选中的资源id
var checkedResourcesIds = "";
// 这里利用dom
var checkedResources = document.getElementsByTagName('input');
// 移除未选中的
for(var i = checkedResources.length - 1 ;i >=0 ;i --){
var checkbox = checkedResources[i];
if(checkbox.type == "checkbox" &&
checkbox.checked){
checkedResourcesIds += "," + checkbox.id
}
if(i == 0){
checkedResourcesIds = checkedResourcesIds.substring(1);
}
}
// 提交数据后台
_saveData(roleId,checkedNodesIds,checkedResourcesIds);
}


/**
* 保存数据
*/
function _saveData(roleId,checkedNodesIds,checkedResourcesIds){
Ext.Ajax.request( {
url : basePath + "admin/resourcesrolemge.do?key=add",
params:{roleId:roleId,checkedNodesIds:checkedNodesIds,checkedResourcesIds:checkedResourcesIds},
method:"post",
success : function(response) {
Ext.MessageBox.alert(infoText, response.responseText);
Ext.getCmp("iwindow").destroy();
},
failure : function(response) {
Ext.MessageBox.alert(errorText,response.responseText);
}
});
}

2 楼 yehuijia 2009-09-02  

你好！
   最近也在研究用EXTJS做权限管理模块，
   看到你的界面，比较吻合我现在的需求，
   如果楼主有时间，能否针对这块内容做点补充！
   上传点可具参考性的JS代码，可以否！
   感谢！
  

1 楼 yehuijia 2009-09-02  

你好！
   
    最近一个项目正急着要做权限管理，
    项目页面部分用的是EXTJS的，在网上看到你的这篇文章，