前端页面——揭开级联查询的面纱-白红宇

前端页面——揭开级联查询的面纱

阅读量：4262 次

发布时间：2019-05-26

本文共 4991 字，大约阅读时间需要 16 分钟。

最近，小编一直在做高校平台的的项目，致力于让全国乃至全球的大学都能够使用，我负责的是学生选课的模块，从中学到了很多，自身也得到了历练。今天我就跟大家分享一下自己的项目经验。

-1什么是级联查询

也许有人还不知道级联查询是什么，那么我们来解释一下。比如说我们在淘宝或者京东上要添加一个自己的收货地址，那么当我们选择省份的时候，它会自动将本省的城市列出来，当我们选择好市以后，它又会把该市所包含的区都列出来，这个效果就是级联查询。

- 2如何实现

我们知道了什么是级联查询，那么怎么才能实现这个效果呢?
不要着急，我们一点点来。首先，我介绍的是通过MVC实现的，至于什么是MVC，大家可以看。我们来做两个下拉框，一个是课程性质，另一个开课学院，根据不同的课程性质来加载不同的开课学院。

> 第一步

首先在视图中添加HTML代码（两个下拉框）

课程性质：@*课程性质下拉文本框*@开课学院：@*开课学院下拉文本框*@

> 第二步( 添加JS代码)

window.onload = function () {
       // 选择课程性质之后，触发该事件    $('#cp').combobox({        onChange: function (newValue, oldValue) {
               // 开课学院，使用新的URL重新载入列表数据            $('#on').combobox('reload', '/Common/LoadOrganizationsByProperty?strProperty=' + newValue);         }    });}

> 第三步（控制器中添加方法）
找到自己相应的Controller，然后添加加载的方法。（本例是在CommonController中）

public class CommonController : Controller    {        //        // GET: /选课学生统计/        public ActionResult Index()        {            return View();        }        //根据课程性质，加载相应的开课学院        //此方法为本地加载的假数据，我们也可以通过调用后台去数据库中查询        public JsonResult LoadOrganizationsByProperty(string strProperty)        {            List
   
     lsorganizations = null;            if (strProperty == "人文社科")            {                lsorganizations = new List
    
     ();                SetGradeViewModel o1 = new SetGradeViewModel();                o1.OrganizationID = Guid.NewGuid();                o1.OrganizationName = "文学院";                lsorganizations.Add(o1);                SetGradeViewModel o3 = new SetGradeViewModel();                o3.OrganizationID = Guid.NewGuid();                o3.OrganizationName = "社会发展学院";                lsorganizations.Add(o3);                SetGradeViewModel o4 = new SetGradeViewModel();                o4.OrganizationID = Guid.NewGuid();                o4.OrganizationName = "外国语学院";                lsorganizations.Add(o4);                SetGradeViewModel o13 = new SetGradeViewModel();                o13.OrganizationID = Guid.NewGuid();                o13.OrganizationName = "民族学";                lsorganizations.Add(o13);                SetGradeViewModel o14 = new SetGradeViewModel();                o14.OrganizationID =Guid.NewGuid();                o14.OrganizationName = "教育学院";                lsorganizations.Add(o14);            }            else if (strProperty == "艺术体育" )            {                lsorganizations = new List
     
      ();                SetGradeViewModel o8 = new SetGradeViewModel();                o8.OrganizationID = Guid.NewGuid();                o8.OrganizationName = "美术学院";                lsorganizations.Add(o8);                SetGradeViewModel o10 = new SetGradeViewModel();                o10.OrganizationID =Guid.NewGuid();                o10.OrganizationName = "体育学院";                lsorganizations.Add(o10);                SetGradeViewModel o12 = new SetGradeViewModel();                o12.OrganizationID = Guid.NewGuid();                o12.OrganizationName = "音乐学院";                lsorganizations.Add(o12);            }            else if (strProperty == "自然科学" )            {                lsorganizations = new List
      
       ();                SetGradeViewModel o9 = new SetGradeViewModel();                o9.OrganizationID =Guid.NewGuid();                o9.OrganizationName = "化学与材料科学学院";                lsorganizations.Add(o9);                SetGradeViewModel o11 = new SetGradeViewModel();                o11.OrganizationID =Guid.NewGuid();                o11.OrganizationName = "生命科学学院";                lsorganizations.Add(o11);                SetGradeViewModel o2 = new SetGradeViewModel();                o2.OrganizationID = new Guid();                o2.OrganizationName = "经济学院";                lsorganizations.Add(o2);                SetGradeViewModel o5 = new SetGradeViewModel();                o5.OrganizationID = Guid.NewGuid();                o5.OrganizationName = "管理学院";                lsorganizations.Add(o5);                SetGradeViewModel o6 = new SetGradeViewModel();                o6.OrganizationID =Guid.NewGuid();                o6.OrganizationName = "数学与信息科学学院";                lsorganizations.Add(o6);                SetGradeViewModel o7 = new SetGradeViewModel();                o7.OrganizationID = Guid.NewGuid();                o7.OrganizationName = "信息学院物理与电子";                lsorganizations.Add(o7);                SetGradeViewModel o15 = new SetGradeViewModel();                o15.OrganizationID = Guid.NewGuid();                o15.OrganizationName = "建筑工程学院";                lsorganizations.Add(o15);            }             else            {                SetGradeViewModel o16 = new SetGradeViewModel();                o16.OrganizationID = Guid.NewGuid();                o16.OrganizationName = "全部";                lsorganizations.Add(o16);            }            return Json(lsorganizations, JsonRequestBehavior.AllowGet);        }    }