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格式一个个写好就行了。

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

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

运行结果

绑定表格的三种方法

我们这种属于第一种，在html里面指定表头每列绑定数据字段，接下来说第二种

第二种号称方法级渲染，实际上就是在js中指定每列绑定参数

第一步

<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>

第二步

 layui.use('table', function(){

        var table = layui.table;

        //方法级渲染

        table.render({

            elem: '#LAY_table_user'

            ,url: 'UVServlet'

            ,cols: [[

                {checkbox: true, fixed: true}

                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}

                ,{field:'aid', title: '商户', width:80, sort: true}

                ,{field:'uv', title: '访问量', width:80, sort: true,edit:true}

                ,{field:'date', title: '日期', width:180}

                ,{field:'datatype', title: '日期类型', width:100}

            ]]

            ,id: 'testReload'

            ,page: true

            ,height: 600

        });

  });

第三种是将已知的数据绑定到表格，用于测试，实际写法没什么不同

layui.use('table', function(){

  var table = layui.table;

  //展示已知数据

  table.render({

    elem: '#demo'

    ,data: [{

      "id": "10001"

      ,"username": "杜甫"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "116"

      ,"ip": "192.168.0.8"

      ,"logins": "108"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10002"

      ,"username": "李白"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "12"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

      ,"LAY_CHECKED": true

    }, {

      "id": "10003"

      ,"username": "王勃"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "65"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10004"

      ,"username": "贤心"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "666"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10005"

      ,"username": "贤心"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "86"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10006"

      ,"username": "贤心"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "12"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10007"

      ,"username": "贤心"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "16"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }, {

      "id": "10008"

      ,"username": "贤心"

      ,"email": "xianxin@layui.com"

      ,"sex": "男"

      ,"city": "浙江杭州"

      ,"sign": "人生恰似一场修行"

      ,"experience": "106"

      ,"ip": "192.168.0.8"

      ,"logins": "106"

      ,"joinTime": "2016-10-14"

    }]

    ,height: 272

    ,cols: [[ //标题栏

      {checkbox: true, LAY_CHECKED: true} //默认全选

      ,{field: 'id', title: 'ID', width: 80, sort: true}

      ,{field: 'username', title: '用户名', width: 120}

      ,{field: 'email', title: '邮箱', width: 150}

      ,{field: 'sign', title: '签名', width: 150}

      ,{field: 'sex', title: '性别', width: 80}

      ,{field: 'city', title: '城市', width: 100}

      ,{field: 'experience', title: '积分', width: 80, sort: true}

    ]]

    ,skin: 'row' //表格风格

    ,even: true

    ,page: true //是否显示分页

    ,limits: [5, 7, 10]

    ,limit: 5 //每页默认显示的数量

  });

});

对于这三种绑定方式，我们可以预见，常用的肯定是第二种，因为灵活，容易迭代

关于表格的常见元素

这里说明一下常用的cols里面的属性元素

事实上,这里有非常详细的文档http://www.layui.com/doc/modules/table.html 都是关于数据表格的

总结：

LayUI的学习和使用都是比较方便的，对于引入项目，开始使用，对于数据的绑定与实现都是很简单的,学习成本超低.

html完整代码：

home.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>layout 后台大布局 - Layui</title>

    <link rel="stylesheet" href="Assets/css/layui.css" media="all">

</head>

<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div class="layui-header">

        <div class="layui-logo">layui 后台布局</div>

        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-left">

            <li class="layui-nav-item"><a href="">控制台</a></li>

            <li class="layui-nav-item"><a href="">商品管理</a></li>

            <li class="layui-nav-item"><a href="">用户</a></li>

            <li class="layui-nav-item">

                <a href="javascript:;">其它系统</a>

                <dl class="layui-nav-child">

                    <dd><a href="">邮件管理</a></dd>

                    <dd><a href="">消息管理</a></dd>

                    <dd><a href="">授权管理</a></dd>

                </dl>

            </li>

        </ul>

        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">

                <a href="javascript:;">

                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">

                    贤心

                </a>

                <dl class="layui-nav-child">

                    <dd><a href="">基本资料</a></dd>

                    <dd><a href="">安全设置</a></dd>

                </dl>

            </li>

            <li class="layui-nav-item"><a href="">退了</a></li>

        </ul>

    </div>

    <div class="layui-side layui-bg-black">

        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->

            <ul class="layui-nav layui-nav-tree"  lay-filter="test">

                <li class="layui-nav-item layui-nav-itemed">

                    <a class="" href="javascript:;">所有商品</a>

                    <dl class="layui-nav-child">

                        <dd><a href="javascript:;">列表一</a></dd>

                        <dd><a href="javascript:;">列表二</a></dd>

                        <dd><a href="javascript:;">列表三</a></dd>

                        <dd><a href="">超链接</a></dd>

                    </dl>

                </li>

                <li class="layui-nav-item">

                    <a href="javascript:;">解决方案</a>

                    <dl class="layui-nav-child">

                        <dd><a href="javascript:;">列表一</a></dd>

                        <dd><a href="javascript:;">列表二</a></dd>

                        <dd><a href="">超链接</a></dd>

                    </dl>

                </li>

                <li class="layui-nav-item"><a href="WebApp/UVList.html" target="option">访问量</a></li>

                <li class="layui-nav-item"><a href="WebApp/SerachUVList.html" target="option">可搜索访问量</a></li>

            </ul>

        </div>

    </div>

    <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 class="layui-footer">

        <!-- 底部固定区域 -->

        ©honstat.com

    </div>

</div>

<script src="Assets/layui.js" charset="utf-8"></script>

<script>

    //JavaScript代码区域

    layui.use('element', function(){

        var element = layui.element;

    });

</script>

</body>

</html>

UVList.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui</title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

    <link rel="stylesheet" href="../Assets/css/layui.css">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>

<body>

<div style="margin-bottom: 5px;">

    <!-- 示例-970 -->

    <ins class="adsbygoogle" style="display:inline-block;width:700px;height:700px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>

<table class="layui-table" lay-data="{width:'full', height:'680', url:'UVServlet', page:true, id:'idTest'}" lay-filter="demo">

    <thead>

    <tr>

        <th lay-data="{checkbox:true, fixed: true}"></th>

        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>

        <th lay-data="{field:'aid', width:80}">商家</th>

        <th lay-data="{field:'uv', width:80, sort: true}">UV</th>

        <th lay-data="{field:'date', width:180}">日期</th>

        <th lay-data="{field:'datatype', width:177}">日期类型</th>

    </tr>

    </thead>

</table>

</body>

</html>

关于数据源绑定，可以参考这个接口返回：http://www.layui.com/demo/table/user/?page=1&limit=30

下一篇我们讲对于数据表格的操作，包含搜索，排序，查看，编辑，删除

使用LayUI展示数据的更多相关文章

  1. Layui使用table展示数据

    今天在Layui官网拿了一个table表格数据展示的源码,研究遇到了很多问题,最后才把数据展示出来,和大家分享下. 源码地址:https://www.layui.com/demo/table/oper ...

  2. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  3. 基于 若依 ，或者使用 LayUi ，用来展示数据表，同时要 转换字典数据时的转换的建议

    原作者在做这个项目时,他把所有数据字典都放在数据库表中了,这种方法的确比较好,适用于中大型项目,方便统一管理字典:而且优点突出,字典值变化后不需要调整前端代码: 但是在实际开发项目中,一些小型的项目, ...

  4. layui table 数据表格 隐藏列

    现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧. 数据表格中保留id列,是为了编辑 ...

  5. 使用UITableView展示数据

    TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...

  6. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  7. C#-WinForm-ListView-表格式展示数据、如何将数据库中的数据展示到ListView中、如何对选中的项进行修改

    在展示数据库中不知道数量的数据时怎么展示最好呢?--表格 ListView - 表格形式展示数据 ListView 常用属性 HeaderStyle - "详细信息"视图中列标头的 ...

  8. Repeater控件 ---表格展示数据

    简介: Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表. Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repea ...

  9. Windows程序==>>使用ListView控件展示数据

    使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Trans ...

随机推荐

  1. 网络唤醒原理浅析(Wake On LAN)

    之前我的一篇文章<网络唤醒全攻略(Wake On Lan)>介绍过如何设置远程唤醒电脑,着重于使用,这篇主要从原理方面解析一下当中的奥妙: 原理 将唤醒魔术包发送的被唤醒机器的网卡上,魔术 ...

  2. webSocket浏览器握手不成功（解决）

    websocket与服务端握手会报握手不成功的错误解决方法: 首先是服务端首次收到请求要回报给客户端的报文要做处理多的不说,方法敬上: /// <summary> /// 打包请求连接数据 ...

  3. python编码错误的解决办法 SyntaxError: Non-ASCII character '\xe5' in file

    [提出问题]. 在编写Python时,当使用中文输出或注释时运行脚本,会提示错误信息: SyntaxError: Non-ASCII character '\xe5' in file ******* ...

  4. MyBatis框架——动态SQL、缓存机制、逆向工程

    MyBatis框架--动态SQL.缓存机制.逆向工程 一.Dynamic SQL 为什么需要动态SQL?有时候需要根据实际传入的参数来动态的拼接SQL语句.最常用的就是:where和if标签 1.参考 ...

  5. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  6. 工作常用git命令

    克隆项目 git clone gitssh地址 提交前的准备 git config user.name 您的中文名 git config user.email 公司邮箱 获取分支 #### 将远端分支 ...

  7. MongoDB学习之路(一)

    NoSQL简介 NoSQL(Not Only SQL),意为"不仅仅是SQL" 关系型数据库遵循ACID规则 1. A(Atomicity)原子性 指的是事务里的所有操作要么全部做 ...

  8. 软工+C(2017第1期) 题目设计、点评和评分

    // 下一篇:分数和checklist 如何设计题目 教学中的一个问题是老师出题太简单了,题目设计一开始上来就不紧凑,我认为一个好的课程应该上来就给你紧凑感,而不是先上来"轻松2-3周&qu ...

  9. 必应词典--英语学习APP案例分析

    一.调研,评测 1.个人上手体验 这还是第一次听说必应词典,只能说知名度有待提高啊.首先,下载打开必应词典的第一感觉就是不够美观,个人感觉不论图标还是界面的美感都不足,既繁琐有简洁,给人的最直观感受就 ...

  10. oop学习 计算器类的规划

    类的学习 题目要求 采取面向对象的方法,四则运算自动出题软件,根据需求可以划分为几个类?每个类具有什么属性?每个类具有什么行为? 类与类之间是如何进行协作的?谁给谁发送消息?谁持有谁的引用? 该自动出 ...