编写SSH选课系统记录——bootstrap-table父子表的实现以及x-editable的使用

在编写选课系统的过程中，在如何展现课程对象和课程安排对象之间的关系这一方面，我采用了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