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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...