Ztree之初涉——简单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的其他比较好的功能通用方法给大家，基本的效果如下：

稍后我会写下关于Ztree引发的Js异步的问题文章地址http://www.cnblogs.com/liunianmoshi/articles/2998965.html

Ztree之初涉——简单Ztree的实现相关推荐

mysql 实现ztree_简单Ztree的实现————不连接数据库版
Ztree可以去官网去下载相应的版本和API,我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题,稍后我会在博客中写JS的异步问题, 我这里用的是MVC4.0,好了正文开始,上代码 ...
java ztree json_java递归实现ztree树结构数据展示
//获得zTree结构的数据(测试AuthInfo) @RequestMapping("/getAuthInfoTree.action") public void getAuthI ...
ZTree学习(三)，ztree树扩展
一,扩展要求真的是没有对比就没有伤害.如果只是单纯的按照ztree的api去异步加载树结构,那么就会使左图那个样子. 特点:1,所有的节点前面均会有radio(因为设置的是radio:"a ...
JQuery ZTree简单使用
JQuery ZTree简单使用 @(JavaScript)[jQuery, ztree, 入门] JQuery ZTree简单使用基本概述案例使用标准json数据构造ztree 使用简单jso ...
zTree的简单用法
[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE.FireFox.Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例 ...
JQ插件Ztree的简单使用
这里来使用前端插件帮助我们实现功能模块表中在前端实现文件树的展示官方学习 Ztree官方网站 Ztree的简单学习 1.Ztree是什么? zTree 是一个依靠 jQuery 实现的多功能 &qu ...
jQuery zTree几种常用的使用方式
最近在用这个ztree进行项目中的某些功能的开发.所以这里就随笔记录一下.顺便为我那菜的无地自容地JavaScript做点笔记. 什么是 ZTree 官方简介: zTree 是一个依靠 jQuery ...
zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
artDialog、Ztree 初体验
近期正在接触OA系统,并且有使用了几个插件,今天就简单介绍下我在项目中如何使用这两个插件. artDialog:弹窗插件(官网) Ztree:树形插件(官网) 先上个图的两个插件的结合应用: 一 ...

Ztree之初涉——简单Ztree的实现

Ztree之初涉——简单Ztree的实现相关推荐

最新文章

热门文章