zTree 優(yōu)秀的jquery樹插件,文檔詳細(xì)，渲染快

使用方法：

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"],//異步加載子節(jié)點(diǎn)時(shí)自動傳入的參數(shù)type: "get",},check: {enable: true,chkStyle: "checkbox",chkboxType: { "Y": "", "N": "" }},view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom,selectedMulti: false},};$.fn.zTree.init($("#treeCarInfo"), setting);

后臺接口返回?cái)?shù)據(jù)示例：

4、加入鼠標(biāo)移動到顯示的自定義按鈕

　　

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 () {//按鈕點(diǎn)擊事件 });};function removeHoverDom(treeId, treeNode) {$("#callBtn_" treeNode.id).unbind().remove();$("#callBtn_space_" treeNode.id).unbind().remove();};

?

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

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的zTree 优秀的jquery树插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。