实现学校管理系统中专业页面的表格重载及模糊搜索
我们之前已经完成了学校管理系统中的一个学院页面了,现在我们继续来完成第二个页面,这个页面就是专业页面,同样也是有表格重载、模糊搜索、新增、修改、删除等操作,同样数据库早就创建好了并且也引入到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.把这些都弄好之后就可以去游览器上看看数据是否都在表格中,再去模糊搜索一下看是否可以查找到我们输入的内容,视图样式我们可以看下