在编写选课系统的过程中,在如何展现课程对象和课程安排对象之间的关系这一方面,我采用了bootstrap-table中的父子表来实现。
考虑到自己学校的课程安排情况:同一个课程,会在不同的地点上课(机房/教室),有可能是两个老师授课,且一般都是一堂课持续两节(别的学院的实验课会持续整个半天)。
故一个课程可以对应多个课程安排。可以是在不同的地点、不同的时间、或者不同的老师。
我记得我们选选修课时,是可以看到所有的课程安排的。但是由于一门课有多个课程安排,我不能把课程安排表查询得到的条目,直接显示在学生选课页面。
我想到的一个方法是,将条目合并,比如说把一个课程的两个课程安排:
{ctime:周一第1,2节 ,clocation:数媒楼303,tname:王达}
{ctime: 周二第3,4节,clocation:2a202,tname:张牟}
合并成
{cday: 周一第1,2节/周二第3,4节 ,clocation:2a202/数媒楼303,tname:王达/张牟}
这样显示。
但是第一:我并不知道该如何正确又简洁地实现
第二:这样显示并不清晰明了
故我还是采用了bootstrap中的父子表来实现。
那么在学生端和管理员端,对于课程安排的操作不尽相同。学生只需要查看即可,而管理员需要对课程安排进行修改、添加或者删除。
所以我在管理员端采用bootstrap modal 模态框踢弹出子表的形式(和bootstrap-table的父子表设置没有关系),并且在模态框中采用x-editable插件来进行行内编辑。而在学生端,仅更改初始化bootstrap-table的参数:detailView: true, 来实现父子表。
1、管理员进行课程安排的操作。
其实我本来没想那么多,只是觉得x-editable方便且样式不错,那就用吧。结果给自己挖了个坑,因为我突然意识到该怎样用bootstrap-table和x-editable联合进行添加数据(当然不能使用弹框)?
自己鼓捣了一会,想出了一种方法,用户点击添加按钮,先在子表内添加一行数据,并相应地在数据库中添加一行数据(设置默认值),然后使得用户能够利用x-editable进行该排课信息的修改。
初始化主表,定义排课按钮的事件。
$('#tb_departments').bootstrapTable({
url: 'allCourse', //请求后台的URL(*)
method: 'get', //请求方式(*)
detailView: false, //父子表,为true会在父数据前添加 “+”
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
// queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
// strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "tid", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
columns: [{
checkbox: true,
}, {
field: 'cid',
title: '课程编号'
}, {
field: 'cname',
title: '课程名称'
}, {
field: 'ctype',
title: '课程类别'
},{
field: 'cacademy',
title: '开课学院'
},{
field: 'ccredit',
title: '学分'
},{
title: '操作',
field: 'operate',
align: 'center',
valign: 'middle',
width: '12%',
formatter: aFormatter, //自定义方法,添加操作按钮
//可以为该列绑定事件,如下所示,每个按钮绑定了事件
events:{
//编辑课程信息
'click #edit': function (e, value, row, index) {
console.log("haha ");
console.log(value);
console.log(row.cid);
console.log(index);
//动态控制模态框的显示内容,为模态框的按钮动态的绑定事件,包括删除事件和执行事件,
$('#editModal').modal();
$("#myModalLabel").text("修改信息");
$('.modal-body input[name = cid]').val(row.cid).attr("disabled",true);
$('.modal-body input[name = cname]').val(row.cname);
$('.modal-body input[name = ctype]').val(row.ctype);
$('.modal-body input[name = cacademy]').val(row.cacademy);
$('.modal-body input[name = ccredit]').val(row.ccredit);
//点击保存按钮
$("#btn_submit").on("click",function(){
var course