bootstrap select2 php,JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。
一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果:
一、特性效果
1、多选效果
可以设置最多只能选几个
2、图文结合的效果
3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)
输入内容前
输入空格搜索出全部
滚动条滑动到底部自动加载剩余项
输入文本动态去后台过滤
更高级的用法如:
其实使用起来也不难,就是一个拼html的过程。
二、代码示例
1、多选效果
select2的多选很简单,设置一个属性就好了。
用户管理
角色管理
部门管理
菜单管理
订单查询
订单导入
订单删除
订单撤销
基础数据维护
//多选
$("#sel_menu2").select2({
tags: true,
maximumSelectionLength: 3 //最多能够选择的个数
});
2、图文结合的效果
用户管理
角色管理
部门管理
菜单管理
订单查询
订单导入
订单删除
订单撤销
基础数据维护
$(function () {
//带图片
$("#sel_menu").select2({
templateResult: formatState,
templateSelection: formatState
});
});
function formatState(state) {
if (!state.id) { return state.text; }
var $state = $(
' ' + state.text + ''
);
return $state;
};
3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)
请选择
$(function () {
//远程筛选
$("#sel_menu3").select2({
ajax: {
url: "/Home/GetProvinces",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 10) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepoProvince, // omitted for brevity, see the source of this page
templateSelection: formatRepoProvince // omitted for brevity, see the source of this page
});
});
function formatRepoProvince(repo) {
if (repo.loading) return repo.text;
var markup = "
";
return markup;
}
这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。
后台对应的方法如下:
public List lstProvince = new List() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" };
public JsonResult GetProvinces(string q, string page)
{
var lstRes = new List();
for (var i = 0; i < 30; i++)
{
var oProvince = new Province();
oProvince.id = i;
oProvince.name = lstProvince[i];
lstRes.Add(oProvince);
}
if (!string.IsNullOrEmpty(q.Trim()))
{
lstRes = lstRes.Where(x => x.name.Contains(q)).ToList();
}
var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
return Json(new { items = lstCurPageRes, total_count = lstRes.Count }, JsonRequestBehavior.AllowGet);
}
上面说了这么多,那么我们在选中select2的选项之后如何取值和赋值呢?
1、获取选中的值
var oMenuIcon = $("#txt_menuicon_web").select2({
placeholder: "请选择菜单图标",
templateResult: oInit.formatState,
templateSelection: oInit.formatState
});
oMenuIcon.val();
2、设置select2的选中值
var oMenuIcon = $("#txt_menuicon_web").select2({
placeholder: "请选择菜单图标",
templateResult: oInit.formatState,
templateSelection: oInit.formatState
});
oMenuIcon.val("CA").trigger("change");
以上就是关于select2的一些特性效果介绍,希望对大家的学习有所帮助。
bootstrap select2 php,JS组件Bootstrap Select2使用方法详解相关推荐
- vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中 ...
- 基于js对象,操作属性、方法详解
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...
- js中转换json对象方法详解及使用案例
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
- JS继承的6种方法详解以及优缺点对比
1. 原型链继承 方法 我们知道构造函数.原型对象和实例的关系:每个构造函数都有一个原型对象,原型对象(.prototype)的constructor属性指向构造函数,而实例的 __proto__指向 ...
- JS创建对象模式7种方法详解
创建对象的几种模式 虽然Object构造函数或者字面量,都可以用来创建对象,但这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的代码, 于是,工厂模式诞生了 1 工厂模式 工厂模式是广为人 ...
- JS中的JSON.Stringify 方法详解
在大厂的前端面试过程中,JSON.Stringify常常被问到,那么能够熟练的运用,掌握就必不可少. 那么,到底什么是 JSON.stringify 方法? 方法基本介绍 JSON.stringify ...
- Vue进阶(贰零壹):JS合并两个数组方法详解
文章目录 一.前言 二.实现 2.1 concat 2.2 for循环 2.3 apply 2.4 ...拓展符 三.拓展阅读 一.前言 项目开发过程中,将两个数组合并成为一个的情况十分常见.比如: ...
- java 气泡图_D3.js实现散点图和气泡图的方法详解
前言 小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表 ...
- bootstrap table php,Bootstrap Table使用方法详解
bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前 ...
最新文章
- HDU 1540 Tunnel Warfare 线段树区间合并
- 阿里巴巴开源 Sentinel,进一步完善 Dubbo 生态
- 极乐科技CEO应邀出席2017微信小程序生态课
- 云漫圈 | 腾讯面试,我竟然输给了final关键字
- Android第三十三期 - Dialog的应用
- ORACLE 分页SQL
- 使用vim编辑编译c51程序
- 基于人脸识别实现课堂抬头率检测
- cad一键卸载工具叫什么_CAD专用卸载修复工具,一键完全彻底卸载删除CAD软件的专用卸载工具...
- 如何让计算机自动重启,Win7电脑定时重启怎么设置?Win7电脑定时关机怎么设置?...
- matlab中clear;close;clc的作用说明
- aardio - 伪装进程测试
- Java实现 蓝桥杯 算法训练 Balloons in a Box
- 跨境电商面临“寒冬”考验,如何转型升级入局新赛道(Starday)
- 《嵌入式系统设计师教程》读后感:2.6嵌入式系统电源
- Linux7/Centos7磁盘分区、格式化及LVM管理
- 咸鱼笔记—Socket 通信
- 宝塔下安装nodejs
- 【Kafka笔记】5.Kafka 多线程消费消息
- 《利用Python进行数据分析》笔记记录第六章——数据载入、存储及文件格式