四级联动框实现筛选查询

联动框是我们经常会用到的一个小功能，比较方便简单，但我们这里要在数据库里查询筛选数据，所以会有一点点不太一样，但原理还是不变，两级联动以及我们现在说的四级联动或者更多级，总的来说原理都是一样的，这只是个代码量的问题。

原理和要点：根据前一个（或第一个）下拉框中选择到的内容作为条件拿到数据库中进行搜索查询，查询到后返回数据，但要注意如果是作为回填数据的下拉框需要将异步传输改为同步传输（$.ajaxSettings.async = false;），因为异步传输是同时进行的，所以就会出现前面的数据返回值还没有查询到后面的已经处理完了，这样的结果就是回填数据时后面的数据为空，但在控制台输出返回值却有数据，而同步传输是按前后顺序进行的；

封装JS函数

function select(url, id, Data) {

$.get(url, Data, function (data) {

var str = "";

$.each(data, function (index, value) {

str += '<option value="'+ value.id+'">'+value.text+'</option>'

})

$("#"+id).empty();

$("#"+id).append('<option value="0">…请选择…</option>' + str)

})

};

由于我们要做四级联动，而且JS代码基本都是一样的，所以为了方便使用我们封装一个函数，并传给它三个值，分别是控制器方法的地址、和下拉框的ID、还有前一个选择到的条件ID（指的是数据库中给的ID）传的时候要以键值对的形式，如果是第一个下拉框则不需要传第三个参数，传前两个就行；

//模态框学院联动专业

function ganged() {

var StudentIDTxt = $("#selectM1").val();

//调用刚刚封装的函数 //控制器中的地址 //下拉框ID //传到方法的名称：前一个的ID

select("/BaselnfoManage/Grade/inquire", "selectM2", { AcademyId: StudentIDTxt });

MajorInGrade();

}

//模态框专业联动年级

function MajorInGrade() {

var StudentIDTxt = $("#selectM2").val();

select("/BaselnfoManage/Class/MajorInGrade", "selectM3", { MajorId: StudentIDTxt });

GradeInClass();

}

//模态框年级联动班级

function GradeInClass() {

var selectMajor = $("#selectM3").val();

select("/BaselnfoManage/Student/GradeInClass", "selectM4", { GradeId: selectMajor });

}

要注意的是传到控制器的名称一定要一致

#region 年级联动班级

public ActionResult GradeInClass(int? GradeId)

{

//创建变量将数据库中表格的外键等于传来的ID作为条件用了查询

var GradeCount = myModel.Class.Where(o => o.GradeID == GradeId);

var GradeInClass = from tb in GradeCount

select new

{

//重命名方便前面封装的函数回填数据

id = tb.ClassID,

text=tb.ClassName

};

return Json(GradeInClass,JsonRequestBehavior.AllowGet);

}

#endregion

想要实现筛选数据只需要在查询数据库数据时添加一个判断语句

if(GradeId != null&& GradeId > 0)

{

StudentLing = StudentLing.Where(o => o.GradeID == GradeId);

}

如果还有什么疑问可以留言，我能解答的都会一一解答，如果有更好的方法也欢迎评论留言，感谢！

四级联动框实现筛选查询相关推荐

四级联动(品名、材质、规格、产地)和自动完成的功能
具体功能: 实现品名.材质.规格.产地的四级联动,并且在品名.材质.规格.产地输入字时会显示下拉框,实现模糊检索,当输入'品名'时,隐藏的品名code会自动带出,当把品名删掉一个或者几个字使其不完全时 ...
laravel在线教育开发__四级联动（地区选择）
在线教育开发之四级联动为了实现地区的四级联动选择,可以使用ajax提交数据到控制器,控制器接收数据之后查询pid对应的area. 1.生成地区数据表,需要四级联动表源码请添+Q1143157804( ...
vue 四级联动地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第二: 数据封装情况,详见代码部分 data中的 data; 满足以上2 ...
前端HTML+JS实现四级联动
第一次写博客,为了更好的记录自己做项目遇到的问题和解决方法. 最近在做一个项目,其中一个功能需要实现四级联动.联动功能是一个比较常用的功能,实现的方式有很多,下面分享一个比较清晰简单的方法. 实现效果 ...
通用四级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-09-03 Blog: http://shaoyun.cnblogs.com/ 前面的文 ...
FM实现F4帮助系列三：弹出框多筛选…
FM实现F4帮助系列三:弹出框多筛选条件的搜索帮助(根据搜索帮助筛选字段) 函数:F4IF_GET_SHLP_DESCR F4IF_START_VALUE_REQUEST 效果图: 本例子代码: 找 ...
html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
php用ajax方式实现四级联动
使用ajax方式实现了下简单的四级联动, 数据库: 以下为前台代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <titl ...
MySql百万数据0秒筛选查询
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. [x1]点击查看提示 [x2]各种系列的教程 [x3]视频教程分析最终还是通过索引方式来优化的需要注意千万级数据还不可使用本 ...

四级联动框实现筛选查询

四级联动框实现筛选查询相关推荐

最新文章

热门文章