layui使用表格数据，json嵌套数据解决

2023年2月18日 110次阅读来源: 明日祐秋水 .

layui使用表格数据，json嵌套数据解决

layui使用数据表格

layui可以有table模板直接弄数据
具体文档可以查询table数据模板
table模板直接使用layui.js进行使用，所以记得要引入。

<script src="/layui/layui.js"></script>

使用实例

layui.use('table', function(){ 
var table = layui.table;
 
//执行渲染
table.render({ 
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,url: '/demo/table/user.json' //数据接口
  ,page: true //开启分页
  ,cols: [{}] //设置表头

表头设计：（记得field的命名要和输出的json数据名一样）

,cols: [[ //表头
      { field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{ field: 'username', title: '用户名', width:80}
      ,{ field: 'sex', title: '性别', width:80, sort: true}
      ,{ field: 'city', title: '城市', width:80} 
      ,{ field: 'sign', title: '签名', width: 177}
      ,{ field: 'experience', title: '积分', width: 80, sort: true}
      ,{ field: 'score', title: '评分', width: 80, sort: true}
      ,{ field: 'classify', title: '职业', width: 80}
      ,{ field: 'wealth', title: '财富', width: 135, sort: true}
    ]]

json数据输出

这边需要json包
在servlet类中运用

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        //查询所有的员工信息
        UserDao userDao = new UserDaoImpl();
        List<User> emps = userDao.selectAllUsers();

        //转化成数据
        Gson gson = new Gson();
        String jsonStr = gson.toJson(emps);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(jsonStr);

    }