以当前所学的项目为例,要实现学院、年级、以及班级的下拉框数据绑定,并将查询出来的数据返回到指定的id为tabStudent的表格中。(注:已添加Models层,控制器和页面已搭建完成)第一步准备画板要将框架和相关的样式通过html代码“画”出来。
使用label标签封装查询信息的字段,三个不赋值的select标签,三个字段数据查询后拼接到select,
给定一样的类是为了让标签平均各占一份,使布局的视觉效果更佳。因为点击查询会执行下拉框数据查询的方法,则使用按钮标签封装,类型为按钮,设置按钮样式即可。布局上利用table标签存放表格,然后layui初始化表格方可查询出数据。需引入layui插件,接下来写js代码部分。
首先声明会使用到的变量,如:
1 var tabStudent;
2 var layer, layuiTable;
为了减少代码书写错误,花费大量时间,最好写完一部分便执行测试一次,
学院下拉框数据绑定:createSelect(“searchAcademeID”,“selectAcademe”);
备注//已封装好的方法function createSelect(selectId, url){};
控制器:查询学院下拉框数据。
下拉框内容有id和对应的文本text俩字段,封装一个实体类SelectVo存放这俩字段,需要使用时“new”一下,在下拉框列表索引为0处拼接“—请选择—”项,最后在页面返回列表数据。
其实年级下拉框数据绑定思路也差不多,因为学院下拉框数据改变,会触发年级下拉框数据绑定,可以想到发生改变事件,也要获取学院ID。班级下拉框由学院和年级下拉框数据的绑定决定,当其中一个数改变要清空一下班级下拉框。