前段代码:
<body>
<!--表格-->
<table id="app_table" lay-filter="app_table_on"></table>
</body>
<!--工具栏-->
<script type="text/html" id="toolBar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="select">查看</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
</script>
<script>
layui.use('table', function(){
var table = layui.table;
//执行渲染
table.render({
elem: '#app_table'
,method:'post'
,url:'${pageContext.request.contextPath}/teacher/do_tea_manage_stu'//数据接口
,page:true//是否分页:正
,toolbar:'#toolBar'//添加工具栏
,height: 'full-100' //容器高度---自适应比全屏小100px
,cols: [[ //列
{field: 'app_name', title: '姓名', width: 80},
{field: 'app_id', title: '学号', width: 110},
{field: 'app_institution', title: '学院'},
{field: 'app_grade',title:'年级',width: 90},
{field: 'app_class',title:'班级'},
{field: 'app_major',title:'专业'},
{field: 'app_sex' ,title:'性别',width:60},
{field: 'app_nation',title:'民族',width:60},
{field: 'app_category',title:'类别',width:60},
{field: 'app_annual_results',title:'年度成绩',width:90},
{field: 'app_ranking',title:'排名',width:60},
{field: 'app_class_size',title:'班级人数',width:90},
{fixed: 'right',title:'操作',toolbar:'#toolBar'}
]] //设置表头
});//table.render end
//监听工具条--未完成真正的接口,用alert()代替
table.on('tool(app_table_on)', function(obj){
var data = obj.data;
if(obj.event === 'select'){
layer.msg('ID:'+ data.app_id + ' 的查看操作');
} else if(obj.event === 'delete'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'update'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
}
});//table.on end
});
</script>
后端代码:
/*******************************
* @return 奖学金申请者页面的数据接口
*/
@RequestMapping(value="/do_tea_manage_stu")//映射地址
@ResponseBody //返回json类型
public Map<String,Object> do_tea_manage_stu(){
System.out.println("查询所有奖学金信息");
//查询所有奖学金申请者集合
List<SchoolarshipApplicationForm> studentList=schoolarshipApplicationFormService.getPartApplicationForm();
System.out.println("studentList="+studentList);
Map<String,Object> map=new HashMap<>();
map.put("code", 0);//这是layui官方文档要求的
map.put("msg", "ok");
map.put("count", map.size()+1);//这里加1是因为前段是从0开始计数的
map.put("data",studentList);
return map;//返回结果集map->经过@ResponseBody注解就转化为了Json格式
}
前端是从0开始计数的.
测试一下数据接口:
访问:http://localhost:8081/SES/teacher/do_tea_manage_stu