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>

</tr>

</thead>

</table>

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

Layui表格实现显示空白行数据相关推荐

如何获取layui表格选中行的数据
在项目中有很多涉及到表格的模块,有时候当你需要保存数据的时候,而这些数据都在表格中你却获取不到,这就让人很苦恼了,所以下面就讲下如何获取layui表格中选中行的数据, 注意这里只是layui表格的获取 ...
帆软当表格无数据时不显示表格并显示无数据
帆软当表格无数据时不显示表格并显示无数据 1.设置隐藏表格 2.显示无数据三个字 1.设置隐藏表格选择要隐藏的表格的每一行的最左个单元格中在右侧设置条件属性注意选择要公式当A8没有数据时,行 ...
layui表格编辑修改session数据
layui表格编辑修改session数据开发工具与关键技术: 作者:熊琪撰写时间:2019.7.06 Layui表格编辑,首先明白layui的表格属性,清楚其作用.Layu给人的一种感觉就是当你没 ...
在layui表格中显示图片
开发工具与关键技术:Visual Studio 2015 LINQ 作者:孙水兵撰写时间:2019年6月16 一. 达到的效果二. 代码 HTML代码 HTML代码还是和其他表格的类似,只需要在合 ...
layui中的table使用心得，json格式处理，json转字符串，json转对象，json转对象数组，layui表格图片显示修改。
文章目录案例一.layui中table,后台数据是json格式的处理 1. 前端显示样式 2. 前端代码 3. 后端代码:layui前端表格需要返回的数据格式要求示例 4. json格式处理工具类: ...
layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...
解决layui表格排序与后台数据返回顺序不一致
一直想让"总计"的数据处在第一行,后台返回的结果中,总计是排在第一位的,但数据返回之后layui表格又重新排序一遍,因为是以升序排列,总计的总消费是最多的,导致"总计&q ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
layui表格更改一列数据_layui数据表格隐藏列的方法介绍
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${p ...

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

Layui表格实现显示空白行数据相关推荐

最新文章

热门文章