做项目考虑到使用的便捷,要用到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使用小结的更多相关文章

  1. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

  2. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

  3. 与select2有关的知识点总结

    1.多选下拉框设置提示 var datass = [ { id:0, text: '你好' }, { id:1, text: '好久不见' }, { id:2, text: '好想你' } ]; va ...

  4. 从零开始编写自己的C#框架(26)——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  5. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  6. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  7. 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  8. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  9. iOS 之UITextFiled/UITextView小结

    一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...

随机推荐

  1. solr7.5--win10--部署使用

    2018年8月份学习使用solr,当时下载的版本是solr7.5,写这篇博文的时候是2019年3月份,solr此时已经出到了8.0版本.一个大版本的变迁肯定有很多的改动,暂时还未研究就不赘述了. 此篇 ...

  2. 解决本地SqlServer无法连接远程服务器数据库,错误10060

    本地SqlServer 连不上服务器的数据库环境,错误信息如下图,折腾来折腾去,最终还是解决了 第一步 查看服务器本地端口是否已经打开,查看方法:首先向C:\Windows\System32文件夹添加 ...

  3. Shell-仅保留最近3天的备份文件: find . -name "*.sql" -mtime +3 -ls -exec rm {} \;

    Code: find . -name "*.sql" -mtime +3 -ls -exec rm {} \;

  4. input子系统 KeyPad-Touch上报数据格式与机制【转】

    转自:https://www.cnblogs.com/0822vaj/p/4185634.html -------------------------------------------------- ...

  5. 游记-HNOI2019

    Day -1 最后一场考试依旧没有ak(达成成就:\(\mathrm{OI}\) 生涯 AK 次数仅一次) Day 0 听dalao们说现在做题已经没有意义了,不如多口胡几道题,拓展视野 虽然很抗拒但 ...

  6. windows cmd下作MD5校验

    CertUtil -hashfile C:\xxx.tar MD5 此命令不仅可以做MD5哈希算法校验,还支持其他的哈希算法,具体如下: CertUtil -hashfile 文件路径 [算法] 支持 ...

  7. LeetCode 7. Reverse Integer(c语言版)

    题目: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123Output: 321 Ex ...

  8. 在Vue中使用样式

    ##使用class样式 一共四种方式在注释中有解释 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  9. vue 图片地址错误处理

    <img src="/logo.png" :onerror="defaultImg"> data() { return { defaultImg: ...

  10. PHP斐波那契数列有点不明白有哪位大佬能给讲讲思想以及实现过程

    function Fibonacci($n){         if($n <= 0) {             return 0;         }elseif($n == 1) {    ...