08.LoT.UI 前后臺通用框架分解系列之——多樣的Tag選擇器

LOT.UI分解系列匯總:http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI開源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

這個必須說下,本來是用Bootstrap-Select做的,很漂亮,正好后臺也是Bootstrap。后來發現不能滿足需求標簽有則選,沒則添加?而Bootstrap-Select的文本框是不可以手動輸入的==》so,用了Select2,這個可以不依賴Bootstrap

兩種我都做了Demo,至于取舍就看你自己了~

先看在LoT.UI里面的應用效果圖:

Bootstrap-Select:(諸如權限分配,菜單分配都可以用)

--------------------------------------------------------------------------------------------------------------------------------------------------------

Select2:(通用,但丑了點。可后期美化)

----------------------------------------------------------------------------------------------------------------------------------------------------------

Bootstrap-Select 演示(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/select.html)

BootStrap-Select我這邊就不具體說了,demo里面有演示,這邊說下Select2

核心代碼(https://github.com/dunitian/LoTCodeBase/blob/master/LoTUI/Manager/Demo/select2.html)

1.樣式部分:

2.HTML部分

3.Script部分

完整代碼:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><link href="/open/select2/select2.min.css" rel="stylesheet" />
</head>
<body><select style="width:50%;" id="lot-tagSelect" multiple><optgroup label="SQL"><option>MySql</option><option>Sqlite</option><option>SQLServer</option></optgroup><optgroup label="Other"><option>C#</option><option>EF</option><option>MVC</option><option>Dapper</option><option>Ado.Net</option></optgroup></select><button id="btn">獲取選中項的值</button><script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script src="/open/select2/select2.min.js"></script><script type="text/javascript">$('#lot-tagSelect').select2({tags: true,tokenSeparators: [',', ' ']});$('#btn').click(function () {var ids = $.map($('#lot-tagSelect').select2("data"), function (row) {return row.text;});alert(ids.join(','));});</script>
</body>
</html>

開源組件:

https://github.com/silviomoreto/bootstrap-select

https://github.com/select2/select2

作者:毒逆天
出處:https://www.cnblogs.com/dotnetcrazy
打賞:18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z
本文版權歸作者和博客園共有。歡迎轉載,但必須保留此段聲明,且在文章頁面明顯位置給出原文連接!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/284520.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/284520.shtml
英文地址,請注明出處:http://en.pswp.cn/news/284520.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

jquery文檔加載完畢后執行的幾種寫法

2019獨角獸企業重金招聘Python工程師標準>>> 1.js文檔加載完畢 標簽內 οnlοad"test()"window.οnlοadfunction(){}2.jquery文檔加載完畢 //方式1 $(document).ready(function(){//TODO }); //方式2 $(function(){//TODO }) //方式3 $(function($){//TO…

新型基礎測繪與實景三維中國建設技術文件【3】基礎地理實體空間身份編碼規則

基礎地理實體是新型基礎測繪產品體系中的核心成果&#xff0c;是推動基礎測繪工作轉型升級的關鍵。與現有的測繪地理信息數據不同&#xff0c;基礎地理實體具有多粒度、多模態、多層次&#xff0c;以及搭載結構化、半結構化和非結構化多樣化信息的鮮明特點。 基礎地理實體空間…

oracle 表 視圖 存儲過程 序列 job

table 表--delete tabledrop table Test1;-- Create tablecreate table TEST1(ID NUMBER,T_NAME VARCHAR2(100),DT DATE);-- 添加注釋comment on column TEST1.T_NAME is 名稱;--添加age字段alter table Test1 add (age NUMBER(8));--刪除字段alter table TABLE_NAME …

[轉]Docker 大勢已去,Podman 即將崛起

Podman Podman 什么是Podman&#xff1f;Podman和Docker的主要區別是什么&#xff1f;Podman的使用與docker有什么區別&#xff1f;Podman 常用命令 容器鏡像部署 PodmanPodman 加速器使用 Podman 運行一個容器列出運行的容器檢查正在運行的容器查看一個運行中容器的日志查看一…

基于Kubernetes v1.24.0的集群搭建(一)

一、寫在前面 K8S 1.24作為一個很重要的版本更新&#xff0c;它為我們提供了很多重要功能。該版本涉及46項增強功能&#xff1a;其中14項已升級為穩定版&#xff0c;15項進入beta階段&#xff0c;13項則剛剛進入alpha階段。此外&#xff0c;另有2項功能被棄用、2項功能被刪除。…

mvc設計模式和mvc框架的區別

一組概念需要先理解&#xff0c;因為后面需要用&#xff1a; 架構&#xff1a;簡單的說架構就是一個藍圖&#xff0c;是一種設計方案&#xff0c;將客戶的不同需求抽象成為抽象組件&#xff0c;并且能夠描述這些抽象組件之間的通信和調用。 框架&#xff1a;軟件框架是項目軟件…

新型基礎測繪與實景三維中國建設技術文件【4】基礎地理實體數據元數據

基礎地理實體數據是新型基礎測繪產品體系中的核心成果&#xff0c;為實現該數據的規范化管理和使用&#xff0c;編制基礎地理實體數據元數據技術文件。本文件規定了基礎地理實體數據元數據的基本要求和元數據內容&#xff0c;適用于二維表達形式、三維表達形式基礎地理實體數據…

思科三層交換機充當路由器實現全網互通

轉載于:https://blog.51cto.com/13568840/2059797

劍指offer編程題Java實現——面試題3二維數組中的查找

題目描述 在一個二維數組中&#xff0c;每一行都按照從左到右遞增的順序排序&#xff0c;每一列都按照從上到下遞增的順序排序。請完成一個函數&#xff0c;輸入這樣的一個二維數組和一個整數&#xff0c;判斷數組中是否含有該整數。下面是我實現的代碼&#xff0c;修改下類名(…

mpvue開發小程序分享朋友圈無法自定義標題解決方法

在node_modules里面找到mpvue&#xff0c;手動修改一下mpvue這個包下的index.js文件 // 用戶點擊右上角分享 到朋友圈 onShareTimeline: rootVueVM.$options.onShareTimeline? function (options) { return callHook$1(rootVueVM, onShareTimeline, options); } : null,找到 L…

【ArcGIS Pro微課1000例】0020:ArcGIS Pro中河流(曲線)、湖泊(水體色)圖例制作案例教程

相關閱讀:【ArcGIS微課1000例】0032:ArcGIS中河流(曲線)、湖泊(水體色)圖例制作案例教程 河流、湖泊的樣式設置功能在ArcGIS Pro得到了延續,本文講解ArcGIS Pro中河流湖泊圖例的設置方法。 《ArcGIS Pro從入門到精通系列精品教程(微課版)》專欄包括完整的實驗數據包,…

swift學習選pizza項目

2019獨角獸企業重金招聘Python工程師標準>>> 原文: https://makeapppie.com/2014/09/18/swift-swift-implementing-picker-views/ 效果: 步驟: 新建iOS single view application 名字為SwiftPickerViewPizzaDemo, 打開main storyboard選中view controoler, 右上角, …

Windows 11 新版 25163 推送!任務欄全新菜單、應用商店更新、文件資源管理器大量修復...

面向 Dev 頻道的 Windows 預覽體驗成員&#xff0c;微軟現已推送 Windows 11 預覽版 Build 25163。主要變化1.微軟宣布為 Windows 11 任務欄引入全新溢出體驗&#xff0c;當任務欄上的應用程序圖標或窗口達到任務欄容量上限時&#xff0c;將啟用全新溢出菜單。2.微軟更新了 Mic…

shell中source與sh區別

shell中使用source conf.sh&#xff0c;是直接運行conf.sh的命令&#xff0c;不創建子shell&#xff0c;類似與html中include&#xff0c;而sh是則創建子shell&#xff0c;子shell里面 的變量父shell無法使用&#xff0c;對環境變量的修改也不影響父shell。父shell中的局部變量…

[轉]Web3 是去中心化的“騙局”?

作者 | InvisibleUp 譯者 | 彎月 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; Web3 不是去中心化。 雖然我覺得這一點很明顯&#xff0c;根本不需要通過一篇文章來說明&#xff0c;但我也是迫不得已&#xff0c;因為突然之間各大科技巨頭&#xff0c;比如 Redd…

實景三維建設背景下,三維GIS面臨哪些挑戰?

2021年8月26日&#xff0c;自然資源部印發《實景三維中國建設技術大綱&#xff08;2021版&#xff09;》&#xff0c;明確指出“實景三維中國建設是落實數字中國、平安中國、數字經濟戰略的重要舉措&#xff0c;是落實國家新型基礎設施建設的具體部署&#xff0c;是服務生態文明…

無需編碼,自動實現“異步 Request-Reply”模式

前言上次&#xff0c;我們雖然用代碼實現了“異步 Request-Reply 模式”&#xff0c;但是需要為每一個長時間操作 API 實現一個對應的 AsyncXXX 操作。其實&#xff0c;可以嘗試用 Source Generators 減少這種重復性勞動。實現思路Controller 類必須是partial,這樣才能為它額外…

Kotlin Weekly 中文周報

Kotlin Weekly 中文周報 —— 25 Kotlin 開發中文周報 文章 使用 Kotlin 中的 takeIf &#xff08;zhuanlan.zhihu.com&#xff09; 在 Kotlin 的標準函數中有個 takeIf 函數&#xff0c;你是否了解這個函數呢&#xff1f;它是否只是漂亮點的 if 語句呢&#xff1f; Kotlin 的…

第一次玩,試試手(標題)

Hello Blog&#xff01;&#xff01;轉載于:https://blog.51cto.com/10999994/1786094

【CASS精品教程】CASS9.1生成標準圖幅案例教程

在CASS中,可以很方便的生成標準圖幅,如50*50。本文演示cass中,根據測區范圍標準圖幅生成過程。 一、圖幅預覽: 二、圖幅生成 打開測區范圍,如下圖所示: 點擊【繪圖處理】→【批量分幅】→【格網建立】,如下圖所示: 選擇比例尺500,直接回車。 選擇圖幅50*50。 根據測區…