下拉框的查询

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：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的方法下拉框数据绑定— —

调用封装好的方法要在视图中引用，

下拉框数据在页面加载时（表格模块加载前）调用效率更高，（方法调用时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);

});

下拉框的查询

下拉框的查询

猜你喜欢