DWZ横向导航实现动态左菜单树(基于zTree插件)
来源:互联网 发布:java的集成开发环境 编辑:程序博客网 时间:2024/05/19 01:10
此篇文章是基于ztree实现,若是dwz与ztree未整合,请先按照《DWZ和zTree整合(实现版)》文章整合。
先上图片:
顶部菜单异步加载:
- //加载顶部菜单
- $.post("topMenu!topMenu.action",{},function(result){
- var json = eval('(' + result + ')');
- var tm='<ul>';
- $.each(json, function(i,item){
- if(i==0){
- tm+='<li class="selected"><a href="javascript:void(0)" onclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';
- }else{
- tm+='<li><a href="javascript:void(0)" onclick="changeMenu(this,'+item.id+',\''+item.name+'\')"><span>'+item.name+'</span></a></li>';
- }
- });
- tm+="</ul>";
- $("#navMenu").html(tm);
- });
- $("#navMenu").html(tm);
- });
子菜单树加载:
- var subMenuSetting = {
- async: {
- enable: true,//启用异步加载
- url:"tree!asyncTree.action", //异步请求地址
- dataType:"text",
- autoParam:["id"] //需要传递的参数,为你在ztree中定义的参数名称
- },
- data:{ // 必须使用data
- simpleData : {
- enable : true,
- idKey : "id", // id编号命名 默认
- pIdKey : "pId", // 父id编号命名 默认
- rootPId : -1 // 用于修正根节点父节点数据,即pIdKey 指定的属性值
- }
- },
- view: {
- dblClickExpand: false,
- showLine: true,
- selectedMulti: false,
- expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
- },
- callback: {
- onAsyncSuccess: onAsyncSuccess
- }
- };
- function onAsyncSuccess(event, treeId, treeNode, msg) {
- initUI($('#'+treeId));
- }
- function changeMenu(obj,id,name){
- //设置点击横向菜单后横向菜单的样式
- $('#navMenu ul li').each(function(idx){
- $('#navMenu ul li').removeClass();
- });
- $(obj).parent().addClass("selected");
- //加载树
- $.post("topMenu!topSubTree.action",{id:id},function(result){
- var json = eval('(' + result + ')');
- $.fn.zTree.init($("#ztreedemo"), subMenuSetting, json);
- initUI($('#ztreedemo'));
- });
- }
转自:http://njkf-hp.iteye.com/blog/1965218?utm_source=tuicool
0 0
- DWZ横向导航实现动态左菜单树(基于zTree插件)
- [已完成,附上实现方式]DWZ横向导航实现动态左菜单树
- DWZ 动态生成树菜单
- zTree树插件--树形菜单
- DWZ 树形导航菜单
- jquery ui 实现横向导航菜单
- 基于jQuery的zTree树插件实现筛选
- zTree树插件动态加载
- 横向导航二级菜单
- 横向导航菜单
- 动态菜单DWZ
- NET 利用 jquery+ztree 实现 角色权限设置(以树结构显示导航菜单)
- 在dwz中使用ZTree 树形插件
- 使用zTree实现导航树、angular实现数据动态绑定功能
- 美观的导航菜单 -- JQuery实现,支持横向, 竖向
- 多级菜单的横向导航通过非递归方式实现
- Android 自定义横向ListView实现无限级菜单导航类目
- Js+CSS横向导航菜单
- POJ 1932 XYZZY 判正环
- CGLayer和CALayer的区别
- C#多线程编程
- 模态弹出框里的内容可以复制,不可以编辑的方法
- iptables 的防火墙正常运行时间和安全性 使用此高效应用程序设置并维护 Linux 防火墙
- DWZ横向导航实现动态左菜单树(基于zTree插件)
- CWT大逃亡 escape题解
- Java http get与post请求
- MySQL 5.6 for Windows 解压缩版配置安装
- NSTimer与NSRunLoop的关系分析
- iOS7 UITextViewDidChange - crashes
- oracle恢复删除的数据
- Samsung手机ClipboardUIManager引起的内存泄漏
- ubuntu 14.04 更新源