ExtJS4利根据登录后不同的角色分配不同的树形菜单

继续我的上一篇，设置好cookie后，将他们取出来


代码如下:

var userName = Ext.util.Cookies.get('userName');
var userAuthority = Ext.util.Cookies.get('userAuthority');//0,1,2

接下来就可以用了


代码如下:

//树形菜单根据不同权限显示
var treeUrl='../store/ccTree'+userAuthority+'.json';

var treeStore = Ext.create('Ext.data.TreeStore', {

proxy:{
type:'ajax',
url:treeUrl
}
});

我的树形菜单从本地读取，名字分别为ccTree0.json~ccTree2.json

建立树形菜单的时候只要用这个treeStore就行了,下面省略了部分代码


代码如下:

//树形菜单

var menuTree=Ext.create('Ext.tree.Panel', {
// title: 'Simple Tree',
width: 200,
height: 650,
useArrows:true,
store: treeStore,//在这里引用
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
itemclick: function(view,rec,el,index,e) {
// alert(rec.id);
if(rec.raw.id=="01"){//对点了第一个的操作，其他类似

下面贴下json的内容以供参考


代码如下:

[
{id:"01",text:"第一个",expanded:false,leaf:true,"children":[

],url:'login.html'},
{id:"02",text:"第二个",expanded:true,"children":[
{id:"021",text:"第三个",leaf:true},
{id:"022",text:"第四个",leaf:true}

]},
{id:"03",text:"第五个",expanded:true,"children":[
{id:"031",text:"第六个",leaf:true},
{id:"032",text:"第七个",leaf:true}

]}

]

以上只是我自己想出来的一种实现用户分类的方法。。。有更好的方法请留言。。谢谢

赞 (0)

相关推荐

  • js 通过cookie实现刷新不变化树形菜单

    通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单. 菜单的HTML结构: <div class="treemenu"> <ul> <li> <a href="#" id="treemenu_a_1">一级菜单一</a> <div class="submenu" id="submenu_1"> <

  • json+jQuery实现的无限级树形菜单效果代码

    json+jQuery实现的无限级树形菜单效果代码

    本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 一个简单的js树形菜单

    一个简单的js树形菜单

    我练习一下,以免不时之需. 树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已. 上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了. 给个例子: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

  • 利用原生JS自动生成文章标题树的实例

    实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello

  • JS+CSS简单树形菜单实现方法

    JS+CSS简单树形菜单实现方法

    本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下

  • javascript实现在下拉列表中显示多级树形菜单的方法

    javascript实现在下拉列表中显示多级树形菜单的方法

    本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • JS无限极树形菜单,json格式、数组格式通用示例

    修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • javascript 树形导航菜单实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 用JS做的简单的可折叠的两级树形菜单

    复制代码 代码如下: <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <hrad> <metahttp-equiv="content-type"content="text/html;char

  • JS+CSS实现TreeMenu二级树形菜单完整实例

    JS+CSS实现TreeMenu二级树形菜单完整实例

    本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &

随机推荐