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

本文介绍了在开发SSH选课系统时,如何利用bootstrap-table的父子表功能展示课程与课程安排的关系,以及在管理员端如何结合x-editable插件进行行内编辑。管理员可以通过模态框添加、修改和删除课程安排,而学生端则展示已排课的课程信息。在实现过程中,解决了添加数据时的同步问题,并强调了在查询数据时要确保课程和课程安排的关联性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值