使用LayUI展示数据

LayUI是一款免费，开源，轻量级的前端cms框架，适用于企业后端,能快速上手开发，集成了常用的组件，还有完善的文档和社区。

点击查看 文档地址 下载框架

 

使用：

 

1.把这个5个文件项都拷贝到项目中

 

 

2.到layui官网 地址 将后台布局的代码考过来，做一个左侧导航，右侧显示主内容的格局

 

 

 

3.代码复制到我们自己项目新建的home.html页面后,

根据代码上的提示，将远程地址替换成本地，直接删除css引用和js引用，从自己的项目中将这2个文件拖到html页面上

4.完成左侧菜单跳转右侧显示

点击发现菜单没有跳转，因为a标签没有指向页面，接下来新建一个html页面UVList.html

 

我们在一个菜单中加入页面地址，点击后发现跳转到新页面去了,没有显示到右侧，这是因为没有加入iframe

<div class="layui-body">


    <!-- 内容主体区域 -->


    <div style="padding: 15px;height:100%">


        <iframe id="option" name="option" src="WebApp/UVList.html" style="overflow: visible;" scrolling="no" frameborder="no" width="100%" height="100%"></iframe>


 


    </div>


</div>

 

 

细心的你可能会发现div里面加入了一个height:100%的属性，没错，这是因为右侧高度不够，数据表格显示不完整

 

 

在layui-body这个div里面加入iframe以后,在a标签加入target属性

 

现在就可以正常实现跳转到右侧了。

绑定数据

 

1.到官网拷一段代码过来（数据表格）http://www.layui.com/demo/table.html

先选个简单的，点击查看代码，将代码全部拷贝过来

我们这边代码粘贴在UVList.html页面上,并将js,css文件替换成本地的

红框部分是后端返回过来的json对象中的实体字段，url是请求地址，页面初始化时会根据url去自动加载数据，自动绑定并分页

接下来就是绑数据了，首先在后台将接口写好，返回json格式数据

注意：格式要按照它指定的格式

 

{
  "count": 49416,
  "code": 0,
  "msg": null,
  "data": [
    {
      "date": "2017-09-20",
      "uv": 41,
      "datatype": "mon",
      "shopid": 0,
      "id": 5,
      "aid": 289714
    },
    {
      "date": "2017-09-20",
      "uv": 2,
      "datatype": "mon",
      "shopid": 0,
      "id": 6,
      "aid": 295413
    },
    {
      "date": "2017-09-20",
      "uv": 3,
      "datatype": "mon",
      "shopid": 0,
      "id": 7,
      "aid": 29956
    },
    {
      "date": "2017-09-20",
      "uv": 1,
      "datatype": "mon",
      "shopid": 0,
      "id": 8,
      "aid": 301432
    },
    {
      "date": "2017-09-20",
      "uv": 1,
      "datatype": "mon",
      "shopid": 0,
      "id": 9,
      "aid": 330976
    }
    
  ]
}

 

 绑数据说明：

其中,msg如果没有信息的话，一定要写成"msg":"","code":0 ,如果写成"msg":,"code":0 就会出现数据加载异常的错误

如果code不存在或者值有异常，就会提示数据加载状态异常的错误，正常一般都是0

然后field字段按照你返回的json格式一个个写好就行了。

到这里应该可以正常的将数据展示出来了，

如果发现数据表格高度还是不够，我们要给表格设置一个高度和宽度

 

 运行结果