layui擴展組件zTreeSelectM,下拉樹多選

来源:https://www.cnblogs.com/zhongyl/archive/2019/12/17/12052972.html
-Advertisement-
Play Games

項目介紹 項目中需要用到下拉樹多選功能,找到兩個相關組件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持樹結構,wujiawei0926-treeselect不支持多選,於是乾脆仿照moret ...


  項目介紹

項目中需要用到下拉樹多選功能,找到兩個相關組件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-select-ext不支持樹結構,wujiawei0926-treeselect不支持多選,於是乾脆仿照moretop-layui-select-ext動手寫了一個組件,選擇zTree而沒有選擇layuiTree的主要原因是layuiTree暫不支持父子關係取消。
  渲染代碼
var _zTreeSelectM = zTreeSelectM({
    elem: '#zTreeSelectM',//元素容器【必填】          
    data: './json/1.json',//候選數據【必填】
    width: 600,  //設置了長度    
    selected: [3,6,29],//預設值            
    max: 3,//最多選中個數,預設5            
    name: 'field',//input的name 不設置與選擇器相同(去#.)
    delimiter: ',',//值的分隔符           
    field: { idName: 'id', titleName: 'name' },//候選項數據的鍵名 
    zTreeSetting: { //zTree設置
        check: {
            enable: true,
            chkboxType: { "Y": "", "N": "" }
        },
        data: {
            simpleData: {
                enable: false
            },
            key: {
                name: 'name',
                children: 'children'
            }
        }
    }
}); 

 

獲取選中數據代碼    
form.on('submit(demo)',function(data){    
 console.log('zTreeSelectM 當前選中的值名:',_zTreeSelectM.selected);
 console.log('zTreeSelectM 當前選中的值:',_zTreeSelectM.values);
 console.log('zTreeSelectM 當前選中的名:',_zTreeSelectM.names);      
  
   var formData = data.field;
   console.log('表單對象:',formData);
   return false;
})
 
//監聽重置按鈕
$('form').find(':reset').click(function(){
 $('form')[0].reset();
 _zTreeSelectM.set();//預設值
 return false;
});
$("#set").on('click',function(e){    
 _zTreeSelectM.set([4,7,13]);
 return false;
})

 


效果圖   碼雲演示 https://zyl0151_admin.gitee.io/ztreeselectm/ 碼雲下載
https://gitee.com/zyl0151_admin/zTreeSelectM
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近在學習react框架,之前一直都是用vue 開發,知道在vue 中知道如何配置一下相關的webpack 有助於開發,學react 過程中,我也在想這些該怎麼配置啊,所以就有這篇文章。 這篇文章主要是講 react-create-app 生成的項目利用 react-app-rewired 和 cu ...
  • 小程式APP生命周期需要先從app.js這個文件開始,App() 必須在 app.js 中調用,必須調用且只能調用一次,app.js中定義了一些應用的生命周期函數 onLaunch 當小程式初始化完成時,會觸發 onLaunch(全局只觸發一次) onShow 當小程式啟動,或從後臺進入前臺顯示,會 ...
  • 之前文章有寫到vue構造函數的實例化過程,只是對vue實例做了個粗略的描述,並沒有說明vue組件實例化的過程。本文主要對vue組件的實例化過程做一些簡要的描述。 組件的實例化與vue構造函數的實例化,大部分是類似的,vue的實例可以當做一個根組件,普通組件的實例化可以當做子組件。真實的DOM是一個樹 ...
  • DOM 樹 HTML 文檔的骨幹是標簽。 根據文檔對象模型(DOM),每個HTML標簽都是一個對象,同樣標簽內的文本也是一個對象。因此這些對象都可通過 JavaScript 操作 如果文檔中有空格(就像任何字元一樣),那麼它們將成為 DOM 中的文本節點,如果我們刪除它們,則不會有任何內容。 `` ...
  • HTML 網頁構成 摘要說明 結構(HTML) HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。 表現(CSS) CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現 ...
  • 工作中遇到一個問題 for迴圈,再把迴圈出來的ID再進行二次請求 這就導致一個問題 請求結果返回順序不一致 原因:非同步請求會把回調事件放入微任務事件隊列,巨集任務執行完畢再執行微任務,具體參考事件隊列機制 解決方法: 通過map方法進行迴圈請求 將非同步請求方法封裝起來,返回一個promise 這樣將會 ...
  • 項目源碼: 發佈鏈接: 使用文檔: 安裝環境 如果出現錯誤: 請執行以下命令,解決方法鏈接: 創建項目 基於模版 現有項目,初始化 編寫腳本 執行的腳本, "參考示例" 配置參數 、`zone_id` 你在cloudflare托管的功能變數名稱信息 使用 workers.dev 子功能變數名稱,即預設的: 使用自定 ...
  • 遮罩層效果相信是許多開發需求時候經常會碰到的一個情況,實現遮罩層效果的方式有很多種,下麵介紹最簡單的一種,利用CSS來實現遮罩 dom節點代碼: 1 <!-- 進度條遮罩 --> <t:div id="shade" styleClass="shade" > </t:div> CSS樣式代碼 1 .u ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...