layui数据表格的使用，做一个常用带搜素框的查询表格的示例——layui笔记

使用思路：

1、需要写一个table标签，到时候用js来渲染
2、按照layui的使用规则写js（官网直接复制示例改一改）
3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的

示例：做一个常用的查询表格

目标如图:
做一个带搜索框的表格，点击搜索可以按照输入的参数进行搜索，搜索后的将结果可以渲染到表格上

实施：
1、 写一个table标签，一个输入框，一个搜索按钮

<div class="demoTable">
	搜索ID：
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload" autocomplete="off">
	</div>
	<button class="layui-btn" data-type="reload" id="sousuo">搜索</button>
</div>
<table class="layui-hide" id="test"></table>

2、按照layui的使用规则写js用于渲染表格（官网直接复制示例改一改），再写给 搜索按钮添加点击事件，点击事件要把文本框的参数传进去

layui.use('table', function(){
    var table = layui.table;
    //表格渲染---------------------------------------------------------------------
    var tableIns = table.render({
        elem: '#test'
        ,url: 'muban1Action/queryTplInst.do'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
            {field:'id', width:80, title: 'ID', sort: true}
            ,{field:'tplId', width:80, title: '模板ID'}
            ,{field:'page', width:80, title: '所属页面', sort: true}
            ,{field:'bkid', width:80, title: '背景图id'}
            ,{field:'writer', title: '文案', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
            ,{field:'city', title: '所属市', sort: true}
            ,{field:'province', title: '所属省', sort: true}
            ,{field:'createTime', title: '创建时间'}
            ,{field:'expire', width:137, title: '模板到期日', sort: true}
            ,{field:'usrId', width:137, title: '用户id', sort: true}
        ]]
    });
    //搜索按钮的点击事件------------------------------------------------------
    $("#sousuo").click(function () {
        //这里以搜索为例
        tableIns.reload({
            where: { //设定异步数据接口的额外参数，任意设
                id: $("#demoReload").val()//传送搜索条件，取文本框的值
                ,usrId: 0
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    });

});

3、请求后台，获取数据并且按照数据格式，把数据给到layui，这是最关键的
下面是控制层的代码，这里使用的是springMVC。如下仅仅展示控制层，dao层和sql这里不过多赘述

@Controller
@RequestMapping("muban1Action")
public class Muban1Action {
    @Resource
    private TplInstBiz tplInstBiz;

    @RequestMapping("queryTplInst")
    @ResponseBody
    public  Map<String,Object> queryTplInst(Integer id,Integer usrId ,Integer TplId,HttpServletRequest request, HttpServletResponse response) throws IOException {
        TplInst tplInst = new TplInst();
        tplInst.setUsrId(usrId);
        tplInst.setId(id);//把参数给到实体类
        tplInst.setTplId(TplId);
        List<TplInst> list=  tplInstBiz.queryTplInst(tplInst);//查询出结果
        Map map=new HashMap<String,Object>();
        map.put("msg","ok");
        map.put("code",0);
        map.put("count",list.size());
        map.put("data",list);
        return map;
    }
}

我们返回的需要按照这个格式返回，layui会拿这个解析

        Map map=new HashMap<String,Object>();
        map.put("msg","ok");
        map.put("code",0);
        map.put("count",list.size());
        map.put("data",list);
        return map;

4、渲染前端页面
这里的field的字段名只要和list中的对象的属性对应就可以把结果渲染出来了

5、结果展示
输入参数前查询：

输入参数后查询，根据ID查询出一条数据