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表格成功显示了一条空白数据,这样当数据库没有数据时也可以显示增删改三个控件按钮,然后从空数据开始新增数据。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值