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)是为了在输入时对数据进行查询。