首先作者这边做了一个小demo,使用到了layui,在表格初始化的时候刚开始看文档,没太看懂,后来经过实践也是解决了这个问题,那么下面给大家说一下流程。
首先是加载表格,加载的时候应该是在页面刷新的时候就加载(加载就是在初始化表格或者说渲染表格),
废话不多说直接上代码:
table.render({
elem: "#tabs" //绑定的table
,height: 312
,method:"post"
,id:"#tabReload" //表格id 必须设置,重载部分会用到
,url: "/selAllWar" //异步数据接口地址
,page:true
,limit:10
,limits:[5,10,15,20]
,cols: [
[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'uid', title: '采购单号', width:180, fixed: 'left'}
,{field: 'goodsname', title: '物资名称', width:150}
,{field: 'price', title: '单价', width:80}
,{field: 'counts', title: '数量', width:80}
,{field: 'supname', title: '供应商名称', width: 150}
,{field: 'supprin', title: '负责人', width: 80}
,{field: 'manufacturer', title: '生产厂家', width: 150}
,{field: 'sumprice', title: '总价', width: 100}
,{field: 'purtime', title: '登记时间', width: 180}
,{field: 'operator', title: '操作人', width: 80}
,{field: 'remark', title: '备注', width: 110}
,{field: 'yesorno', title: '审核', width: 100}
,{field: 'right', align:'center',toolbar:'#barDemo'}//这里的toolbar值是模板元素的选择器
]
],
});
这是在layui.use()里面,希望大家不要乱写或者直接复制到script里面,注意field字段不要乱写应该与我们查询的条件名称一致。
有些可以不写或者省略,比如method方法,@ResponseBody主要是我们返回的参数类型为json格式(看到这应该都知道json数据格式 key:value),因为需要分页而且layui帮我们写好了,所以我们后台需要接收两个参数。
@RequestMapping(value = "/selAllWar",method = RequestMethod.POST,produces="text/html;charset=utf-8")
public @ResponseBody String selAllWar(int page,int limit) { //页数与每页条数
int counts = purchaseService.executeQuery();//总条数
int startRow = (page - 1)*limit;//起始行
List<Purchase> list = purchaseService.pageQuery(startRow,limit);
JSONArray json = JSONArray.fromObject(list);
String js = json.toString();
String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+counts+",\"data\":"+js+"}";
//System.out.println(jso);
return jso;
}
如有不懂或其他问题,欢迎大家讨论或者私信。