如何用ext做出类似效果，用于权限分配？

Question

页面效果见附件，模块名和权限名都从数据库读出：

Answer 1

有一个树形的效果，发给你参考一下
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;

return {
    init : function(){
        // yui-ext tree
        var tree = new Tree.TreePanel({
            el:'tree',
            animate:true, 
            autoScroll:true,
            loader: new Tree.TreeLoader({dataUrl:'getTree.jsp'}),
            enableDD:true,
            containerScroll: true,
            dropConfig: {appendOnly:true}
        });

        // add a tree sorter in folder mode
        new Tree.TreeSorter(tree, {folderSort:true});

        // set the root node
        var root = new Tree.AsyncTreeNode({
            text: 'Ext JS', 
            draggable:false, // disable root node dragging
            id:'root'
        });
        tree.setRootNode(root);

        // render the tree
        tree.render();

        root.expand(false, /*no anim*/ false);

        //-------------------------------------------------------------

        // YUI tree            
        var tree2 = new Tree.TreePanel({
            el:'tree2',
            animate:true,
            autoScroll:true,
            //rootVisible: false,
            loader: new Ext.tree.TreeLoader({
                dataUrl:'getTree.jsp'
            }),
            containerScroll: true,
            enableDD:true,
            dropConfig: {appendOnly:true}
        });

        // add a tree sorter in folder mode
        new Tree.TreeSorter(tree2, {folderSort:true});

        // add the root node
        var root2 = new Tree.AsyncTreeNode({
            text: 'My Files', 
            draggable:false, 
            id:'root'
        });
        tree2.setRootNode(root2);
        tree2.render();

        root2.expand(false, /*no anim*/ false);
    }
};

}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

[color=red]getTree.jsp[/color]
<%@ page language="java" pageEncoding="utf-8"%>
<%
String node = request.getParameter("node");
System.out.println("get:" + node);
String json = "";
if ("root".equals(node)) {
json += "[{id:1,text:'节点1','leaf':false},{id:2,text:'节点2','leaf':false}]";
System.out.println("0");
} else if ("1".equals(node)) {
json += "[{id:11,text:'节点11',leaf:false},{id:12,text:'节点12',leaf:true}]";
System.out.println("1");
} else if ("2".equals(node)) {
json += "[{id:21,text:'节点21',leaf:true},{id:22,text:'节点22',leaf:true}]";
System.out.println("2");
} else if ("3".equals(node)) {
json += "[{id:111,text:'节点111',leaf:true},{id:112,text:'节点112',leaf:true}]";
System.out.println("3");
}
System.out.println(json);
out.println(json);
%>