Layui表格实现显示空白行数据

在做餐饮的基础资料管理的时候，有些表格需要显示一条空白行，因为增删该三个控件按钮需要加载数据之后菜显示出来，如下所示：

    上面表格最右边的控件按钮是用layui表格绑定列工具条实现的，代码如下：

    <table class="layui-table" id="big"

        lay-data="{

        height: 200,

id:'big',                                                   url:'${ctx}/servlet/RawMaterialServlet?type=tabMaterialType,

        page: true,

        limit: 3,//每页默认显示的数量

        method: 'post', //提交方式      

        }"

        lay-filter="big">

        <thead>

            <tr>

                <th lay-data="{type: 'numbers', width: 80,fixed: 'left', align: 'center', sort: true}">序号</th>

                <th lay-data="{field:'rawMaterialBigNum', align: 'center', sort: true}">编号</th>

                <th lay-data="{field:'rawMaterialBigName', align: 'center', sort: true}">名称</th>

                <th lay-data="{fixed: 'right', width: 165, align:'center', toolbar: '#barBtn'}"></th>

            </tr>

        </thead>

    </table>

    <script type="text/html" id="barBtn">

        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>

        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>

        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </script>

    而列工具条只有加载了数据，控件才会出来，但如果这个表格数据为空，还没有数据的时候，控件就不会出来了，这个时候就会需要显示一条空的数据出来，怎么去实现呢，只需要在后台servlet查询数据的时候判断查询表格数据是否为空，如果为空则手动设置一条空的数据，代码如下：

    public void tabMaterialType(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        Page page = new Page();     

        //获取当前页(page)和分页数(limit)

        page = RequestHelper.getSingleRequest(request, Page.class);

        page.setStartIndex(page.getPage(), page.getLimit());//计算开始页，也就是当前页

        List<RawMaterialBig> bigs = rawMaterialService.findBig(page);

        long totalRow = rawMaterialService.getBigTotalRow();

        //判断查询数据条数是否为0，如果为0，则设置一条空””数据

        if (bigs.size() == 0 && totalRow == 0) {

            RawMaterialBig big = new RawMaterialBig();

            big.setRawMaterialBigNum("");

            big.setRawMaterialBigName("");

            bigs.add(big);

        }

        LayuiJSON<RawMaterialBig> layuiJSON = new LayuiJSON<RawMaterialBig>(

                    0, "", totalRow, bigs);

DBUtil.jsonObjectReturn(response, layuiJSON);

    }

    代码执行效果如下：

    上图中layui表格成功显示了一条空白数据，这样当数据库没有数据时也可以显示增删改三个控件按钮，然后从空数据开始新增数据。