简单Ztree的实现————不连接数据库版
Ztree可以去官网去下载相应的版本和API，我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题，稍后我会在博客中写JS的异步问题，
我这里用的是MVC4.0,好了正文开始，上代码
namespace ZtreeDemo.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
} public ActionResult Edit()
{
var list = GetData();
return Json(list, JsonRequestBehavior.AllowGet);
} [NonAction]
public List<Tree> GetData()
{
List<Tree> tree = new List<Tree>();
tree.Add(new Tree { id = 1, pId = 0, name = "蔬菜", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
tree.Add(new Tree { id = 2, pId = 0, name = "动物", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
tree.Add(new Tree { id = 3, pId = 0, name = "人类", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
tree.Add(new Tree { id = 4, pId = 1, name = "茄子", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
return tree;
} } public class Tree
{
public int id { get; set; }
public int pId { get; set; }
public string name { get; set; }
public string icon { get; set; }
}
}
这里我就不在解释了，类等我都没去规划，直接在这里写了，比较方便。接下来是视图代码，视图上我用的是ajax获取数据，
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - Custom Icon </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="~/Script/css/demo.css" rel="stylesheet" />
<link href="~/Script/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Script/jquery-1.4.4.min.js"></script>
<script src="~/Script/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
var tree;
$(function () {
$.ajax({
type: "Get",
url: "@Url.Action("Edit","Home")",
//async: false,
success: function (data) {
tree = data;
$.fn.zTree.init($("#treeDemo"), setting, tree);
}
});
})
var setting = {
data: {
simpleData: {
enable: true
}
}
};
//var zNodes = [
// { id: 1, pId: 0, name: "展开、折叠 自定义图标不同", open: false, iconOpen: "../Script/css/zTreeStyle/img/diy/1_open.png", iconClose: "../Script/css/zTreeStyle/img/diy/1_close.png" },
// { id: 11, pId: 1, name: "叶子节点1", icon: "../Script/css/zTreeStyle/img/diy/2.png" },
// { id: 12, pId: 1, name: "叶子节点2", icon: "../Script/css/zTreeStyle/img/diy/3.png" },
// { id: 13, pId: 1, name: "叶子节点3", icon: "../Script/css/zTreeStyle/img/diy/5.png" },
// { id: 2, pId: 0, name: "展开、折叠 自定义图标相同", open: true, icon: "../Script/css/zTreeStyle/img/diy/4.png" },
// { id: 21, pId: 2, name: "叶子节点1", icon: "../Script/css/zTreeStyle/img/diy/6.png" },
// { id: 22, pId: 2, name: "叶子节点2", icon: "../Script/css/zTreeStyle/img/diy/7.png" },
// { id: 23, pId: 2, name: "叶子节点3", icon: "../Script/css/zTreeStyle/img/diy/8.png" },
// { id: 3, pId: 0, name: "不使用自定义图标", open: true },
// { id: 31, pId: 3, name: "叶子节点1" },
// { id: 32, pId: 3, name: "叶子节点2" },
// { id: 33, pId: 3, name: "叶子节点3" }
//];
//$(document).ready(function () {
// $.fn.zTree.init($("#treeDemo"), setting, Data);
//});
</script>
</head>
<body>
<h1>自定义图标 -- icon 属性</h1>
<h6>[ 文件路径: core/custom_icon.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title">
<h2>1、setting 配置信息说明</h2>
<ul class="list">
<li>自定义图标不需要对 setting 进行特殊配置</li>
</ul>
</li>
<li class="title">
<h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li>利用 节点数据的 icon / iconOpen / iconClose 属性实现自定义图标</li>
<li class="highlight_red">详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title">
<h2>3、其他说明</h2>
<ul class="list">
<li class="highlight_red">由于时间关系，例子直接采用 png 图片，如果需要解决 ie6 下 png 图片的透明问题，请针对 ie6 制作特殊的 gif 图片或者利用 css filter 解决</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
好了，这就是一个简单的树形菜单，我之前没用过Ztree,因为明天不用上班，就研究学习下，这只是个入门级的，有时间的话我会规整下Ztree返回Json对应数据格式的通用方法以及扩展Ztree的其他比较好的功能通用方法给大家，基本的效果如下：
本文摘自:http://www.cnblogs.com/liunianmoshi/articles/2998915.html#undefined
简单Ztree的实现————不连接数据库版的更多相关文章
- form 登陆跳转页面练习（未连接数据库）和连接数据库版
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...
- Ztree手风琴效果(第三版)
第一版:点击一级目录展开,再点击时不能收回 第二版:点击一级目录展开,再点击时可以收回 第三版:优化样式,修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错) <%@ page lang ...
- 如何写一个简单的HTTP服务器（重做版）
最近几天用C++重新写了之前的HTTP服务器,对以前的代码进行改进.新的HTTP服务器采用Reactor模式,有多个线程并且每个线程有一个EventLoop,主程序将任务分发到每个线程,其中采用的是轮 ...
- 最新最最最简单的Axure傻瓜式破解版教程(带下载地址)
Axure 破解版下载 下载地址在文章末尾 Axure是什么? Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prot ...
- 自己动手写一个简单的MVC框架（第二版）
一.ASP.NET MVC核心机制回顾 在ASP.NET MVC中,最核心的当属“路由系统”,而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在这个System.W ...
- 一个简单的PHP登录演示(SESSION版 与 COOKIE版)
//==============COOKIE版本的简单登录================ if ($_GET[out]){ setcookie('id',''); setcookie('pw','' ...
- 简单OS（ucos超级精简版）——裸调度器【worldsing笔记】
简单原则少ROM,少RAM,任务完成就让出CPU,调度器描述: 1.按最大任务数轮番调度: 2.任务调用延时接口将让出CPU使用权,进入下一个任务调度: 3.用户任务都处于延时或是不使用CPU运行Id ...
- 简单的猜数字（JAVA版）
按书上的样例来操作的. 不过,书上提到的BUG,我没有在看下一章时就解决了哈.. 从网上查找的删除数组元素的方法. 其实,将数据结构更改为ARRAYLIST,可能更简单.:) GameHelper.j ...
随机推荐
- Python序列化之json与pickle
1.json介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Progra ...
- 烂泥：SQL Server 2005数据库安装
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 为了能更好的利用服务器,所以打算把该业务进行迁移.因为该业务比较特殊,需要服务器上有相应的硬件支持,所以打算直接升级该服务器目前的操作系统.目前公司服务 ...
- x01.os.15: 看上去很美
张碧晨在韩国学的不是技巧,而是基本功:气息!声音由气息托着,似真声而不是真声,似假声又不是假声,所以才能在动听的地方唱得更动听.编程也是一样,基本功很重要:内存!所谓的黑客高手,攻击的一大手段,便是利 ...
- 中科院分词ICTCLAS导入用户词典后分词结果一样？
package ICTCLAS.I3S.Test; import java.io.UnsupportedEncodingException; import ICTCLAS.I3S.AC.ICTCLAS ...
- iTOP-4412嵌入式开发板ioremap控制GPIO寄存器
转自迅为电子技术论坛:http://bbs.topeetboard.com GPIO 的寄存器通过 ioremap函数转换之后,可以通过直接控制虚拟地址来控制物理地址(寄存器的实际地址),这样就实现 ...
- MMORPG大型游戏设计与开发（客户端架构 part10 of vegine）
界面是游戏中必不可少的一部分,就算你进入游戏没有看到什么UI窗口,你也不必着急,因为多多少少都会有隐藏着的界面等你去体验.一个好的UI大部分应该归功于设计的人与提供美术支持的人员,因为他们是直接设计U ...
- storm集群搭建
安装环境: 虚拟操作系统:centOS7 64位 2台 IP地址为192.168.1.10 192.168.1.11 内存:1GB内存 zookeeper版本 :3.4.6 Storm版本:0. ...
- Windows环境下Android Studio v1.0安装教程
Windows环境下Android Studio v1.0安装教程 准备工具 JDK安装包. 要求:JDK 7以及以上版本. Android Studio安装文件. Windows: exe(包含SD ...
- TeamTalk源码分析之login_server
login_server是TeamTalk的登录服务器,负责分配一个负载较小的MsgServer给客户端使用,按照新版TeamTalk完整部署教程来配置的话,login_server的服务端口就是80 ...
- NOIP2012pj文化之旅[floyd]
描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次,即如果他学习了某种文化,则他就不能到达其他有这种文化的国家.不同的国家可能有相同的文化.不同文化的国家 ...