使用LayUI展示数据

最新推荐文章于 2024-10-30 22:37:01 发布

你我的世界之大

最新推荐文章于 2024-10-30 22:37:01 发布

阅读量4.8k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/qq_25543685/article/details/79061727

版权

本文介绍了如何使用LayUI框架展示数据，包括如何引入框架、绑定数据以及三种数据表格的绑定方法。通过实例演示了数据表格的创建和数据加载，强调了数据格式的重要性，并提供了关于表格常见元素的简要说明。

摘要由CSDN通过智能技术生成

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
    }
    
  ]
}