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.mzph.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。 根据测区…