2021-08-07

实现学校管理系统中专业页面的表格重载及模糊搜索

我们之前已经完成了学校管理系统中的一个学院页面了，现在我们继续来完成第二个页面，这个页面就是专业页面，同样也是有表格重载、模糊搜索、新增、修改、删除等操作，同样数据库早就创建好了并且也引入到jQuery中，我们可以直接开始了

1.

 

因为页面不同，所以同样我们需要先引入layui、bootstrap的css和JS插件，还需要jQuery的JS插件，jQuery插件需要在bootstrap之前引入，否则会出现一些报错，这样我们就完成了插件的引入

2.接着插件引入之后我们就要去布局了，我先给一个div标签并且给div添加一个类为container，这是布局最基本的元素，然后这个最大的div中要写入两部分，一部分是模糊搜索，另一部分是表格，这两部分分别用一个div来装，你们可以不用像我那样写那么多，可以就在div中放入一个label标签和input标签，这样比较简便，我写那么多只是让样式好看点，然后我们再去弄表格，给装表格的div添加row这个类，接着再在div中放一个div并添加一个类为col，这个类col和row好像是配套使用的，然后再在div中放入table表格，需要给表格两个属性，一个ID和一个lay-filter，这两个属性是后面表格渲染要用到的

3.

 

和学院页面一样，不一样的是学院的表头是一级表头，我们专业的表头是二级表头(多级表头)，这就需要用到rowspan和colspan，分别是单元格所占行数、单元格所占列数，默认都是1，所以我们要自己去设置了，接下来我们就要去弄表格了，我们先声明几个还没加载或初始化的模块，然后再通过layui.use（）这个方法来加载我们声明的模块，接着就是要去渲染我们的表格了，需要通过render（）方法来渲染，在这个方法中需要传入一些基础参数，有elem、data、cols，如果需要分页就传入参数page，然后elem的值就是表格的ID（选择到我们的表格），data的值就为[]，当数据库没有数据时就渲染空数据，cols就是定义表头，值是一个二维数组，每个表头都用一个花括号包裹起来，里面可以传一些基础参数，譬如title、type、field、align、templet等，title用来显示当前这个表头的名称，type就是类型，值可以是数字，也可以是单选按钮等，align的值就是让内容居中还是靠左等，然后templet就是自定义列，后面的值就是自定义方法的名称，我们用这个自定义弄了两个按钮，分别是修改和删除按钮，然后field的值是数据库中对应数据的名称，要一一对应，最后分页的page里有两个参数，limit和limits，分别每页显示的条数和每页条数的选择项，这样表格就渲染完成了，代码我也放在上面了

4.

 

接着就是要把数据库的数据搞到表格上，我就在控制器中写了一个方法把数据获取到，然后我们就在页面这里写一个方法，方法里声明一个变量来接收模糊搜索的值，然后再通过reload（）方法来重载表格，方法里面的URL的值就是获取数据的路径，如上图所示

5.把这些都弄好之后就可以去游览器上看看数据是否都在表格中，再去模糊搜索一下看是否可以查找到我们输入的内容，视图样式我们可以看下