简单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 ...

随机推荐

JVM探索之——内存管理（一）
本系列的第一篇文章,预计本系列最后面会有两三个案例. Java与C.C++不一样Java不需要Coder进行手动内存管理,而这一切都交给JVM进行自动内存管理,这从某种程度上来说也减轻了我们Coder ...
mysql避免重复插入的三种方法
在开发中,我们经常遇到这样的需求,如果插入的数据不存在就插入存在就更新(或者不做任何操作).mysql的insert就提供了此功能,不需要我们在自己的业务逻辑代码上做处理.直接用mysql提供的功能来 ...
C语言数据库编程
----摘自个人C语言数据库项目报告 3.4逻辑结构的SQL语句实现创建基本表: 3.4-1建立商品表: create table goods(goods_id int primary key,go ...
KVM 介绍（2）：CPU 和内存虚拟化
学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...
[转]jqGrid 属性、事件全集
本文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070 以下是jqGrid 最常用的属性和事件,经过一段时间的整理,终于弄的差不多了 ...
js的event.srcElement与event.target（触发事件对象）
IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...
u3d_Shader_effects笔记4 BRDF
1.英文意思 bidirectional reflectance distribution function bidirectional :双向的 reflectance :反射 distributi ...
memcache的安装和使用
Memcache Memcached是一个高性能的分布式缓存系统.memcached自身不会实现分布式,分布式是由程序来实现的. Memcached一旦安装之后,自身进行管理!预申请一个很大的内存空间 ...
[No00000F]Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全
一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或 ...
[No000009]学习重要还是经营人脉重要？
大说数人的朋友圈都是这样的:雪中送炭的寥寥无几,锦上添花的大多数人连你自己都不认识,碰到倒霉的时候还能遇到落进下石的.人脉是很重要,可相对自身的学习来说,就没有想象中那么重要了. 有一次在北大讲座,遇 ...

简单Ztree的实现————不连接数据库版

简单Ztree的实现————不连接数据库版的更多相关文章

随机推荐

热门专题