在线ext tree demo,右键菜单,拖动排序,Qtip显示,各种皮肤自由更换

整理了前段时间写的东东

写了一个ext tree demo放上来.

提供的主要功能为:

1.动态树的生成.使用了一个tree utils,对树结构进行统一的处理.

使用的生成树的数据库表结构为:

 

DROP TABLE IF EXISTS `example_ext_tree`;


CREATE TABLE `example_ext_tree` (


  `id` varchar(32) NOT NULL default '',


  `name` varchar(100) default NULL,


  `href` varchar(255) default NULL,


  `order_index` int(10) unsigned zerofill NOT NULL,


  `target` varchar(50) default NULL,


  `parent_id` varchar(32) default NULL,


  PRIMARY KEY  (`id`),


  KEY `parent_id` (`parent_id`),


  KEY `order_index` (`order_index`),


  CONSTRAINT `example_ext_tree_ibfk_1` FOREIGN KEY (`parent_id`) REFERENCES `example_ext_tree` (`id`)


) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

2.右键菜单进行树的维护,对树节点的增删改.

  老话题了,拿出来重新做一下,主要添加了了节点Qtip提示,以及在节点上传递更多的其它参数,比如当前登录用户的ID.

 

3.可以通过拖动对树进行排序,改变父子关系等.

 

似乎也是个老话题了,对ext Tree拖动时,主要使用到了方法:

tree.on('movenode', function(tree, node, oldParent, newParent, index) {
            Ext.Ajax.request( {
                url :base.path + 'xuser/extTreeAction!move.do',
                params : {
                    nodeId :node.id,
                    oldParentId :oldParent.id,
                    newParentId :newParent.id,
                    index :index
                }
            });
        });

 

 

将以上信息传入后台,就可以进行树的拖动排序了.

 

4.用户角色授权.

一个用户可以有多种角色,很老的话题了,权限系统的基本要求.

为免去麻烦,不需要用户登录,直接进后台,加用户.

再写了把用户注册拉进来.

 

5.使用带checkbox的Ext.Tree进行角色授权.

   说白了也就是一个角色可以访问多少节点.然后在用户登录的时候,只展现用户可以访问的节点.记得我做的第一个项目使用Struts-menu的时候,就做了这样的实现,现在只是拿到Ext上面来实现.

6.对用户部门的管理,一个用户可以分布在多个部门中.

同时,生成了完整的用户部门树,供调用~~

例子访问地址:带右键功能可拖动排序加角色授权的完整Ext Tree访问地址

两个测试用户分别为admin/123456,guest/123456

例子代码: demo中使用到的部分代码贴图