zTree 優秀的jquery樹插件

来源:http://www.cnblogs.com/tangchun/archive/2017/12/21/8081613.html
-Advertisement-
Play Games

zTree 優秀的jquery樹插件,文檔詳細,渲染快 使用方法: 1、引用zTree的js和css文件 2、ztree的html為 需加Class:ztree; 3、初始化樹 後臺介面返回數據示例: 4、加入滑鼠移動到顯示的自定義按鈕 5、文檔地址 http://www.treejs.cn/v3/ ...


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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 避免誤導,先加一句:首先,得公眾號綁定開放平臺 這個問題困擾了我一早上,我嘗試了很多次獲取unionid都失敗。 微信的開發文檔上有說: 關於特殊場景下的靜默授權 1、上面已經提到,對於以snsapi_base為scope的網頁授權,就靜默授權的,用戶無感知; 2、對於已關註公眾號的用戶,如果用戶從 ...
  • 申請 Let’s Encrypt證書的原因: 現在阿裡雲等都有免費的 https 證書,為什麼還要申請這個呢(估計也是因為阿裡雲這些有免費證書的原因,所以 Let’s Encrypt 知道的人其實並不算太多)? 原因是公司最近接了很多微信小程式的單子,而小程式是必須要 https 的,申請了幾個後阿 ...
  • 1 導入之前先修改工程下相關文件 1.1 只需修改如下三個地方1.2 修改build.gradle文件 1.3 修改gradle/wrapper/gradle-wrapper.properties 1.4 修改app/build.gradle 2 導入修改後的工程 2.1 選擇File|New|Im ...
  • 這裡以自定義一個可以控制圓角顯示的ImageView控制項UpRoundImageView為例,展開說明。 1、/res/values/arrrs.xml 其中declare-styleable標簽的屬性name最好是自定義控制項的類名。 標簽attr的屬性name是自定義的;format:類型值,有多 ...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
  • Chrome Extension是什麼呢?簡而言之,就是Chrome擴展,它是基於Chrome瀏覽器的,我們可以理解它為一個獨立運行在Chrome瀏覽器下的APP,當然核心編程語言就是JavaScript咯,然後結合HTML以及CSS來開發。重點是,這個“APP”功能強大,可以獨自運行,亦可以與打開... ...
  • 在DOM操作里,createElement是創建一個新的節點,createDocumentFragment是創建一個文檔片段。 網上可以搜到的大部分都是說使用createDocumentFragment主要是因為避免因createElement多次添加到document.body引起的效率問題,比如 ...
  • 在我們平時做的很多網站項目中都會需要繪製各種各樣的二維矢量圖形。比如做城市地下管網的斷面圖、管線管點的坐標位置矢量標識圖、鑽孔位置或地層剖面圖等等。我們有很多種方法來繪製這些矢量圖(vml、canvas、svg等等),下麵我要介紹的是SVG繪圖語言,也是我在做項目中用到比較多的,僅以我的個人實戰經驗 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...