下拉框的查询
下拉框的查询
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:VS、下拉框的查询
作者:盘耀海
撰写时间:撰写时间:2019年04月18日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在老师MVC教学中学习下拉框数据绑定的知识,在联表查询的基础上加入查询表的字段(绿色箭头)进行条件筛选(红色箭头)
判断学院、年级、班级、学号是否存在,存在则进行条件筛选。
在控制器查询学生的信息后分别查询下拉框需要的数据:查询学院信息(学院下拉框数据)、通过学院ID查询年级信息(年级下拉框数据)、通过年级ID查询班级信息(班级下拉框数据)。查询的数据分别用id、text赋值便于方法的封装
public ActionResult SELAcademe(){ var listAcademe = from tbAcademe in myModel.SYS_Academe select new{ id=tbAcademe.AcademeID, text=tbAcademe.AcademeName}; return Json(listAcademe, JsonRequestBehavior.AllowGet);} |
public ActionResult SELGradeByAcademeID(int AcademeID){ var list = from tbGrade in myModel.SYS_Grade where tbGrade.AcademeID == AcademeID select new{ id=tbGrade.GradeID, text=tbGrade.GradeName}; return Json(list, JsonRequestBehavior.AllowGet);} |
public ActionResult SELClassByGradeID(int GradeID){ var listClass = (from tbClass in myModel.SYS_Class where tbClass.GradeID == GradeID select new id = tbClass.ClassID, text = tbClass.ClassName}).ToList(); return Json(listClass, JsonRequestBehavior.AllowGet);} |
查询出数据后在视图中写多条件查询的方法:获取下拉框的值给定义的变量赋值;
function tabStudentSearch() { var AcademeID = $("#sltAcademe").val();——学院下拉框ID var GradeID = $("#sltGrade").val();——年级下拉框ID var ClassID = $("#sltClass").val();——班级下拉框ID var strNum = $("#StudentNum").val().trim();——学号ID — — —判断数据是否为空— — — — if (AcademeID != null && GradeID == null && ClassID == null) { GradeID = 0;ClassID = 0;} else if (AcademeID != null && GradeID != null && ClassID == null) { ClassID = 0; } TabStudent = layuiTable.reload("tabStudent", { url: "SELStudent",——查询数据接口,方法调用时,表格渲染时url要去掉 page: { curr: 1 },——重定向返回第一页数据 where: { AcademeID: AcademeID, GradeID: GradeID, ClassID: ClassID, StudentNum: strNum }});} |
下拉框方法的封装(封装在js文件中): function SELStudentInfor (id, url){ $.get(url, function (data) {——通过get的方法获取控制器查询的数据、传入数据data $("#" + id).empty();——清空下拉框数据 $("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>"); $.each(data, function (i) {——通过each的方法遍历数据 $("#" + id).append("<option value=" + data[i].id + ">" + data[i].text + "</option>"); });});} — —append的方法下拉框数据绑定— — |
调用封装好的方法要在视图中引用,
<script src="~/Content/js/FZfuntion.js"></script>
下拉框数据在页面加载时(表格模块加载前)调用效率更高,(方法调用时id和url要对应)(绿色箭头)否则数据无法绑定。
多条件查询时把方法调用至表格模块加载处(红色箭头),表格重载的url与表格渲染的url相同,需要去掉表格渲染的url(蓝色箭头),否则无法获取数据。
学院下拉框值改变触发的事件: $("#sltAcademe").change(function () { var AcademeID = $("#sltAcademe").val(); — —当下拉框值发生改变时年级班级下拉框的值清空— — $("#sltGrade").empty(); $("#sltClass").empty(); SELStudentInfor ("sltGrade", "SELGradeByAcademeID?AcademeID=" + AcademeID); }); |
年级下拉框值改变触发的事件: $("#sltGrade").change(function () { var GradeID = $("#sltGrade").val(); SELStudentInfor ("sltClass", "SELClassByGradeID?GradeID=" + GradeID); }); |