zTree 优秀的jquery树插件
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树插件的更多相关文章
- zTree -- jQuery 树插件 使用方法与例子
简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- 15+优秀的jQuery视差插件
jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...
- 顶级jQuery树插件
顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...
- JQuery树插件——ztree
API与Demo:http://www.treejs.cn/v3/api.php 使用插件,第一步依然是引入: <link rel="stylesheet" href=&qu ...
- ASP.NET MVC jQuery 树插件在项目中使用方法(一)
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件
效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...
- zTree -- jQuery 树插件
http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
随机推荐
- 在 Ubuntu 上安装 TensorFlow (官方文档的翻译)
本指南介绍了如何在 Ubuntu 上安装 TensorFlow.这些指令也可能对其他 Linux 变体起作用, 但是我们只在Ubuntu 14.04 或更高版本上测试了(我们只支持) 这些指令. 一 ...
- oracle10g和oracle11g导入导出数据区别
其中flxuser为用户名,flxuser为密码,file值为导入到数据库中的备份文件. oracle10g和oracle11g导入导出数据的命令方式大有不同: oracle10g导入数据: imp ...
- table滑块
我们做table时,常常想做一个滑块的移动效果,来让app显得更加生动,原理很简单,废话不说,直接上code public class AnimationActivity extends AppCom ...
- 读书笔记(06) - 语法基础 - JavaScript高级程序设计
写在开头 本篇是小红书笔记的第六篇,也许你会奇怪第六篇笔记才写语法基础,笔者是不是穿越了. 答案当然是没有,笔者在此分享自己的阅读心得,不少人翻书都是从头开始,结果永远就只在前几章. 对此,笔者换了随 ...
- nginx介绍(二) - 默认配置
前言 前面, 在浏览器中, 输入linux 的ip, 出现了以下页面: 那这个页面在哪里呢? 一. 工具 notepad++ 在进入主题之前, 先来介绍下, 一会使用到的工具. 在notepad++里 ...
- leetcode — longest-palindromic-substring
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/longest-palindromic-substri ...
- kong+konga
kong+kongau 注意kong1.0与之前版本API发生了很大的改动,所以是不兼容的,kongav0.14.0是匹配kong1.0+的,不兼容1.0之前的.可以根据自己的需求进行选择. kong ...
- DataAnnotations - InverseProperty Attribute:
DataAnnotations - InverseProperty Attribute: We have seen in the Code-First Convention section that ...
- Hibernate学习(三)———— 一对多映射关系
序言 前面两节讲了hibernate的两个配置文件和hello world!.还有hibernate的一级缓存和三种状态,基本上hibernate就懂一点了,从这章起开始一个很重要的知识点,hiber ...
- 我对alias的重新认识:通过alias让rm更安全
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html rm的悲剧总是发生在不经意之间,所以无论是在shell脚本中还 ...