百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

前端-你要的炫酷下拉框Bootstrap-Select来了

sinye56 2024-10-25 16:28 3 浏览 0 评论

断断续续，把流水统计模块做完了，今天正好上线了，主要供内部使用^^

回头一想，虽然只是一个小功能，但是涉及到的部门和技术还不少呢。

  • 和源库源表所在的组了解数据接口

  • 找架构组，完成配置实现数据分表映射单表全量同步，以及增量同步

  • 我这边需要监听增量同步的Kafka消息，实现数据及时同步，添加一些定时器，保证数据每天统计更新等等

  • 画界面，包括明细以及统计信息的表格展示和图表展示，使用了bootstrap， highchart以及一会要介绍的bootstrap-select

界面这块，后面有时间还需要优化调整。

Bootstrap-Select

鉴于在已有的框架下使用的是JQuery和Bootstrap，又要用到绑定数据源的下拉框，那就非Bootstrap-Select莫属了。

Bootstrap-Select是一个可以Bootstrap效果的JQuery插件。

官方网站：http://silviomoreto.github.io/bootstrap-select/

Github地址：https://github.com/silviomoreto/bootstrap-select

如何使用Bootstrap-Select

下载JS和CSS

  • 如果你需要将js和css文件下载到本地可以到http://www.bootcdn.cn/bootstrap-select/找你需要的版本，然后分别下载bootstrap-select.min.css和bootstrap-select.min.js

  • 如果你希望通过在线访问的形式，就可以在head标签添加地址即可比如类似下图所示

引用JS和CSS

在<head>标签中加上如图所示

编写页面代码

有了前面的工作，我们就可以在页面里添加下拉框控件了，很简单

<select id="testSelect" class="selectpicker show-tick form-control" data-width="250px" data-live-search="true">

  • selectpicker、show-tick和form-control都是样式，data-width是设置的宽度，从而保证下拉框不会出现宽度抖动的情况

  • data-live-search设置为true，表示支持搜索功能，即可以从所有的下拉选项中筛选你搜索的项

  • 这里的value="-1"是人为加上的

  • 如果你想实现默认情况下拉框不显示任何值并给出一个虚化的提示信息，可以在select中加上data-first-option="false" title='请选择需要查询的合作方'

  • 通过foreach标签遍历从后台取出的selectItems值，然后显示为一个个选项

下面展示的搜索的功能，直接输入，bootstrap-select会立即筛选会候选项

添加监听事件

有时候我们使用下拉框不仅仅是需要展示，我们需要使用它的监听事件，比如change，当选中一个新的选项，我们希望展示的数据会跟随选项值更新，这时候我们需要利用到函数change，好比这样

$("#testSelect").change(function() {

怎么样，是不是很简单，又很好用，你学会了？

相关推荐

RHEL8和CentOS8怎么重启网络

本文主要讲解如何重启RHEL8或者CentOS8网络以及如何解决RHEL8和CentOS8系统的网络管理服务报错，当我们安装好RHEL8或者CentOS8，重启启动网络时，会出现以下报错：...

Linux 内、外网双网卡路由配置

1.路由信息的影响Linux系统中如果有多张网卡的情况下，如果路由信息配置不正确，...

Linux——centos7修改网卡名

修改网卡名这个操作可能平时用不太上，可作为了解。修改网卡默认名从ens33改成eth01.首先修改网卡配置文件名（建议将原配置文件进行备份）...

CentOS7下修改网卡名称为ethX的操作方法

?Linux操作系统的网卡设备的传统命名方式是eth0、eth1、eth2等，而CentOS7提供了不同的命名规则，默认是基于固件、拓扑、位置信息来分配。这样做的优点是命名全自动的、可预知的...

Linux 网卡名称enss33修改为eth0

一、CentOS修改/etc/sysconfig/grub文件（修改前先备份）为GRUB_CMDLINE_LINUX变量增加2个参数（net.ifnames=0biosdevname=0），修改完成...

CentOS下双网卡绑定，实现带宽飞速

方式一1.新建/etc/sysconfig/network-scripts/ifcfg-bond0文件DEVICE=bond0IPADDR=191.3.60.1NETMASK=255.255.2...

linux 双网卡双网段设置路由转发

背景网络情况linux双网卡:网卡A(ens3)和网卡B(...

Linux-VMware设置网卡保持激活

Linux系统只有在激活网卡的状态下才能去连接网络，进行网络通讯。修改配置文件（永久激活网卡）...

VMware虚拟机三种网络模式

01.VMware虚拟机三种网络模式由于linux目前很热门，越来越多的人在学习linux，但是买一台服务放家里来学习，实在是很浪费。那么如何解决这个问题？虚拟机软件是很好的选择，常用的虚拟机软件有v...

Rocky Linux 9/CentOS Stream 9修改网卡配置/自动修改主机名(实操)

推荐...

2023年最新版 linux克隆虚拟机 解决网卡uuid重复问题

问题描述1、克隆了虚拟机，两台虚拟机里面的ip以及网卡的uuid都是一样的2、ip好改，但是uuid如何改呢？解决问题1、每台主机应该保证网卡的UUID是唯一的，避免后面网络通信有问题...

Linux网卡的Vlan配置，你可能不了解的玩法

如果服务器上连的交换机端口已经预先设置了TRUNK,并允许特定的VLAN可以通过，那么服务器的网卡在配置时就必须指定所属的VLAN，否则就不通了，这种情形在虚拟化部署时较常见。例如在一个办公环境中，办...

Centos7 网卡绑定

1、切换到指定目录#备份网卡数据cd/etc/sysconfig/network-scriptscpifcfg-enp5s0f0ifcfg-enp5s0f0.bak...

Linux搭建nginx+keepalived 高可用(主备+双主模式)

一：keepalived简介反向代理及负载均衡参考：...

Linux下Route 路由指令使用详解

linuxroute命令用于显示和操作IP路由表。要实现两个不同子网之间的通信，需要一台连接两个网络的路由器，或者同时位于两个网络的网关来实现。在Linux系统中，设置路由通常是为了解决以下问题：该...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表