layui 数据表格的方法级渲染

所有代码均是通过搜索工具搜索得到并加以利用，如有侵权！请联系我删除，谢谢！

我利用bootstrap模态框把要渲染的数据放在里边自我感觉视图效果会好一点,唯一的一个瑕疵就是还不能拖拽（哪位大哥会的，请指教指教吧）。

效果图如下：

HTML代码：

<!-- 私房菜列表的modal --> 
<div class="modal fade "  id="shopFoolModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog " style="width:800px;overflow:auto; ">
<div class="modal-content">
    <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="myModalLabel">私房菜列表</h4>
    </div>
    <div class="modal-body">
       <!--此处的table是layer添加数据的位置，会根据id进行定位并在demo的下面进行数据渲染-->
      <table id="demo" lay-filter="test" ></table>		
    </div>
    <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>   
    </div>
    </div>
  </div>
</div>

js部分：

// 利用bootstrap的modal和layer结合展现菜品数据 实时更新数据
			$("#shopFoolModal").modal("show");
			layui.use('table', function() {
				var table = layui.table;
				table.render({
					elem : '#demo',
					url : projectName+ '/foolshop/getFoolListByShopId?foolShopId=' + id // 数据接口
					,page : true // 开启分页
					,cols : [ [ // 表头
					{field : 'id',title : 'ID',width : 50,sort : true,fixed : 'left',offset : 'auto'}
					, {field : 'foolTitle',title : '菜品名',width : 120,offset : 'auto'}
					, {field : 'foolMakeTime',title : '制作时间/分钟',width : 120,sort : true,offset : 'auto'}
					, {field : 'foolPrice',title : '价格/元',width : 120,sort : true,offset : 'auto'}
					, {field : 'created',title : '创建时间',width : 120,sort : true,offset : 'auto'}
					, {field : 'updated',title : '更新时间',width : 100,sort : true,offset : 'auto'}
					, {field : 'userName',title : '菜品添加用户',width : 130,offset : 'auto'}
					, {field : 'foolMsg',title : '菜品备注',width : 120,offset : 'auto'} 
					] ]
					,limit : 10// 每页显示条数
				});
			});

后台：

后台必须返回下面的数据格式：

所以得封装一个相应格式的类：

package com.fh.lw.utils;

import java.util.HashMap;
import java.util.List;

/**
 * 封装list数据并返回layerUI数据
 * @author yuanyuana
 *
 * 2018年8月14日 下午3:38:12
 */
public class Layui  extends HashMap<String, Object> {

    public static Layui data(Long count,List<?> data){
        Layui r = new Layui();
        r.put("code", 0);
        r.put("msg", "");
        r.put("count", count);
        r.put("data", data);
        return r;
    }
}

java代码部分：

	/**
	 * 根据店铺id查询该店铺的所有私房菜信息
	 * @param shop
	 * @return
	 */
	@RequestMapping(value = "getFoolListByShopId", method = RequestMethod.GET)
	public ResponseEntity<Layui> getFoolByShopId(FoolLibraryMenu fm,@RequestParam("page")Integer page,@RequestParam Integer limit) {
		try {
			PageInfo<FoolLibraryMenu> list = this.foolLibraryMenuService.queryPageListByWhere(page, limit, fm);
			Layui layui = Layui.data(list.getTotal(), list.getList());
			// 查看
			return ResponseEntity.ok(layui);
		} catch (Exception e) {
			e.printStackTrace();
		}
		// 出错500
		return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
	}

最后：希望每次学到新东西都可以这样坚持做笔记，过个五年，我相信自己在技术上会有非一般的成长，且行且珍惜！！！

layui 数据表格的方法级渲染

猜你喜欢