springboot整合layui表格(初始化渲染,render)

springboot整合layui之表格初始化

首先作者这边做了一个小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字段不要乱写应该与我们查询的条件名称一致。

后台接收table.render数据

有些可以不写或者省略,比如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;
    }

如有不懂或其他问题,欢迎大家讨论或者私信。

你可能感兴趣的:(layui)