zTree 优秀的jquery树插件,文档详细,渲染快

使用方法:

1、引用zTree的js和css文件  

<link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.exedit.min.js"></script>

2、ztree的html为

<ul id="treeInfo" class="ztree"></ul>

  需加Class:ztree;

3、初始化树

 

        var setting = {

            async: {
enable: true,
url: "",//后台接口地址
autoParam: ["id", "nextType"],//异步加载子节点时自动传入的参数
type: "get",
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "", "N": "" }
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
}; $.fn.zTree.init($("#treeCarInfo"), setting);

后台接口返回数据示例:

4、加入鼠标移动到显示的自定义按钮

  

function addHoverDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
if ($("#callBtn_" + treeNode.id).length > 0) return;
var editStr = "<span id='callBtn_space_" + treeNode.id + "' > </span>"
+ "<button type='button' class='btn callbtn' id='callBtn_" + treeNode.id
+ "' title='" + treeNode.name + "' onfocus='this.blur();'>按钮</button>";
aObj.append(editStr);
var btn = $("#callBtn_" + treeNode.id);
if (btn) btn.bind("click", function () {
//按钮点击事件
});
};
function removeHoverDom(treeId, treeNode) {
$("#callBtn_" + treeNode.id).unbind().remove();
$("#callBtn_space_" + treeNode.id).unbind().remove();
};

5、文档地址http://www.treejs.cn/v3/api.php

zTree 优秀的jquery树插件的更多相关文章

  1. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  2. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  3. 15+优秀的jQuery视差插件

    jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...

  4. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  5. JQuery树插件——ztree

    API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...

  6. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  7. 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

    效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...

  8. zTree -- jQuery 树插件

    http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...

  9. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

随机推荐

  1. 在 Ubuntu 上安装 TensorFlow (官方文档的翻译)

    本指南介绍了如何在 Ubuntu 上安装 TensorFlow.这些指令也可能对其他 Linux 变体起作用, 但是我们只在Ubuntu 14.04 或更高版本上测试了(我们只支持)  这些指令. 一 ...

  2. oracle10g和oracle11g导入导出数据区别

    其中flxuser为用户名,flxuser为密码,file值为导入到数据库中的备份文件. oracle10g和oracle11g导入导出数据的命令方式大有不同: oracle10g导入数据: imp  ...

  3. table滑块

    我们做table时,常常想做一个滑块的移动效果,来让app显得更加生动,原理很简单,废话不说,直接上code public class AnimationActivity extends AppCom ...

  4. 读书笔记(06) - 语法基础 - JavaScript高级程序设计

    写在开头 本篇是小红书笔记的第六篇,也许你会奇怪第六篇笔记才写语法基础,笔者是不是穿越了. 答案当然是没有,笔者在此分享自己的阅读心得,不少人翻书都是从头开始,结果永远就只在前几章. 对此,笔者换了随 ...

  5. nginx介绍(二) - 默认配置

    前言 前面, 在浏览器中, 输入linux 的ip, 出现了以下页面: 那这个页面在哪里呢? 一. 工具 notepad++ 在进入主题之前, 先来介绍下, 一会使用到的工具. 在notepad++里 ...

  6. leetcode — longest-palindromic-substring

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/longest-palindromic-substri ...

  7. kong+konga

    kong+kongau 注意kong1.0与之前版本API发生了很大的改动,所以是不兼容的,kongav0.14.0是匹配kong1.0+的,不兼容1.0之前的.可以根据自己的需求进行选择. kong ...

  8. DataAnnotations - InverseProperty Attribute:

    DataAnnotations - InverseProperty Attribute: We have seen in the Code-First Convention section that ...

  9. Hibernate学习(三)———— 一对多映射关系

    序言 前面两节讲了hibernate的两个配置文件和hello world!.还有hibernate的一级缓存和三种状态,基本上hibernate就懂一点了,从这章起开始一个很重要的知识点,hiber ...

  10. 我对alias的重新认识:通过alias让rm更安全

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html rm的悲剧总是发生在不经意之间,所以无论是在shell脚本中还 ...