select2使用小结
做项目考虑到使用的便捷,要用到select2,就研究了一下,做个小结,防止忘记。本文内容是建立在NFine框架上的,使用的MVC三层架构。本人很少写文章,学习的知识也过少,不知道能不能表达准确,如有错误,望指正,谢谢
select2参考网站:https://select2.org/
效果:
1.首先要在视图加入引用:
<link href="~/Content/js/select2/select2.min.css" rel="stylesheet" />
<script src="~/Content/js/select2/select2.min.js"></script>
这里的地址是我的文件目录。
2.在视图中添加方法:
$("#F_AreaId").bindSelect({
url: "/AreaManage/MyArea/GetTreeSelectJson"
}); //在判断选择框中是否已经有信息时,该段代码用于显示已有信息 $("#F_AreaId").select2({ //使用select2
language: 'zh-CN',
ajax: {
url: "/AreaManage/MyArea/GetTreeSelect2", //文件夹名称/控制器名称/方法名
dataType: 'json',
delay: 250,
cache: true
},
placeholder: '请选择地区',
minimumInputLength: 1 });
$("#F_AreaId").change();
如果程序有修改、查看信息的功能,此时要对数据进行判断。
3.控制器中方法:
MVC中将数据存储,调用等都进行了分层,控制器来与其他层进行交互,这样比较有条理
[HttpGet]
[HandlerAjaxOnly]
public ActionResult GetTreeSelectJson()
{ var data = areaApp.GetList();
var treeList = new List<TreeSelectModel>();
foreach (AreaEntity item in data)
{
TreeSelectModel treeModel = new TreeSelectModel();
treeModel.id = item.F_Id;
treeModel.text = item.F_Area;
treeModel.parentId = "";
treeModel.data = item;
treeList.Add(treeModel);
}
return Content(treeList.TreeSelectJson());
}
select2中默认数据属性为id,text如:var
data = [{ id: 0, text:
'abc'
}, { id: 1, text:
'qwe'
}
];
所以我们要把数据格式转换为id,text
public ActionResult GetTreeSelect2(string term)
{ var datas = areaApp.GetListSelect2(term);
var obj = from r in datas
select new
{
id = r.F_Id,
text = r.F_Area
};
var data = new { results = obj };
return Content(data.ToJson());
}
4.具体操作类applaction:
public List<AreaEntity> GetList()
{
return areaRepository.IQueryable().Where(t=>t.F_DeleteMark!=true).OrderBy(t => t.F_CreatorTime).ToList();
}
AreaEntity实体用于存储数据
public List<AreaEntity> GetListSelect2(string keyword)
{
return areaRepository.IQueryable().Where(t => t.F_Area.Contains(keyword)&& t.F_DeleteMark != true).OrderBy(t => t.F_CreatorTime).ToList();
}
areaRepository为Area的表仓库,指定对表的操作,这里t.F_Area.Contains(keyword)是为了在输入时对数据进行查询。
select2使用小结的更多相关文章
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- 与select2有关的知识点总结
1.多选下拉框设置提示 var datass = [ { id:0, text: '你好' }, { id:1, text: '好久不见' }, { id:2, text: '好想你' } ]; va ...
- 从零开始编写自己的C#框架(26)——小结
一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...
- Python自然语言处理工具小结
Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...
- java单向加密算法小结(2)--MD5哈希算法
上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...
- 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList
最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...
- iOS--->微信支付小结
iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...
- iOS 之UITextFiled/UITextView小结
一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...
随机推荐
- solr7.5--win10--部署使用
2018年8月份学习使用solr,当时下载的版本是solr7.5,写这篇博文的时候是2019年3月份,solr此时已经出到了8.0版本.一个大版本的变迁肯定有很多的改动,暂时还未研究就不赘述了. 此篇 ...
- 解决本地SqlServer无法连接远程服务器数据库,错误10060
本地SqlServer 连不上服务器的数据库环境,错误信息如下图,折腾来折腾去,最终还是解决了 第一步 查看服务器本地端口是否已经打开,查看方法:首先向C:\Windows\System32文件夹添加 ...
- Shell-仅保留最近3天的备份文件: find . -name "*.sql" -mtime +3 -ls -exec rm {} \;
Code: find . -name "*.sql" -mtime +3 -ls -exec rm {} \;
- input子系统 KeyPad-Touch上报数据格式与机制【转】
转自:https://www.cnblogs.com/0822vaj/p/4185634.html -------------------------------------------------- ...
- 游记-HNOI2019
Day -1 最后一场考试依旧没有ak(达成成就:\(\mathrm{OI}\) 生涯 AK 次数仅一次) Day 0 听dalao们说现在做题已经没有意义了,不如多口胡几道题,拓展视野 虽然很抗拒但 ...
- windows cmd下作MD5校验
CertUtil -hashfile C:\xxx.tar MD5 此命令不仅可以做MD5哈希算法校验,还支持其他的哈希算法,具体如下: CertUtil -hashfile 文件路径 [算法] 支持 ...
- LeetCode 7. Reverse Integer(c语言版)
题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123Output: 321 Ex ...
- 在Vue中使用样式
##使用class样式 一共四种方式在注释中有解释 <!DOCTYPE html> <html> <head> <meta charset="utf ...
- vue 图片地址错误处理
<img src="/logo.png" :onerror="defaultImg"> data() { return { defaultImg: ...
- PHP斐波那契数列有点不明白有哪位大佬能给讲讲思想以及实现过程
function Fibonacci($n){ if($n <= 0) { return 0; }elseif($n == 1) { ...