bootstrap和layui表格使用方法

bootstrap table使用总结

使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：

1、导入相关的js包

1、首先我们需要在bootstrap的官网上下载相应插件

名称	版本	备注
jquery	3.3.1.min.js	必须(jquery官网地址)
bootstrap	最新即可	需要依赖jquery(bootstrap官网地址)
bootstrap-table	最新即可	需要依赖bootstrap（bootstrap-table官网）

2、导入相关插件

<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap-table.js"></script>

3、在HTML中写上一个表格标签并给它一个id

<table id="table"></table>

2、具体操作

1、通过js来操作该表格

$(function () {
    $("#table").bootstrapTable({
        url:"../address/get",//请求的url地址
        method:"post",//请求方式
        // striped:true,//是否显示行间隔色
        pageSize:10,//每页显示的数量
        pageList: [10,20],//提供选择每页显示多少条
        showRefresh:false,//是否显示刷新按钮
        cache:false,//是否使用缓存
        showToggle:false,//是否显示详细视图和列表视图的切换按钮
        pagination:true,//是否显示分页
        hegiht:500,//表格的高度
        pageNumber:1,//初始化显示第几页，默认第1页
        singleSelect:true,//复选框只能选择一条记录
        sidePagination : 'server',//分页显示方式，可以选择客户端和服务端（server|client）
        contentType: "application/x-www-form-urlencoded",//使用post请求时必须加上
        dataType:"json",//接收的数据类型
        queryParamsType:'limit',//参数格式，发送标准的Restful类型的请求
        //得到查询参数即发给服务端的参数
        queryParams:function(params){
            var nowPage=params.offset;
            return{
                page: (params.offset/params.limit)+1,//第几页
                size: params.limit,//每页显示多少条
            }
        },
        //回调函数
        responseHandler:function(res){
            console.log(res);//查看从服务端得到的数据
            console.log(res.data.address.content);
            return{
                "total":res.data.address.totalElements,//当采用服务端分时必须给total赋值即从服务端得到总条数，表格将自动根据总条数进行分页
                "rows":res.data.address.content//每行显示的数据集合，注意必须是（total和rows不能是其他的字段，否则将不能显示数据或分页）
            }
        },
        columns:[{
            field: "select", checkbox: true},//开启选择框
            {field:"name", title:"姓名",sortable: true},//表头，其中field值是返回JSON格式中对应的属性
            {field:"sex", title:"性别",sortable: true},
            {field:"email", title:"Email",sortable: true},
            {field:"qq", title:"QQ号码",sortable: true},
            {field:"company", title:"工作单位",sortable: true},
            {field:"address", title:"地址",sortable: true},
            {field:"postcode", title:"邮编",sortable: true}]
    });
});

当然bootstrap-table的表远不止这些设置，博主在这里就不给大家所有都列举出来了，如有需要请到bootstrap-table官网
2、接下来将介绍如何获取选中表格的数据

onClickRow
jQuery事件： click-row.bs.table参数： row, $element, field
详情：
用户点击一行时触发，参数包含：
row：与单击的行对应的记录。
$element：tr元素。
field：与单击的单元格对应的字段名称。

这是从官网上文档中截取关于点击某一行触发事件名，下面来看具体的代码

onClickRow:function (row,$element) {
                    //row为选中行的数据
                    //$elementtr元素
                    //进行相应的操作
         			}

以上就是关于bootstrap-table一些简单的操作，bootstrap-table的表格功能非常强大希望有兴趣的同学可以官网的文档中学习，最后我们来一张效果图吧！

layui表格使用总结

layui表格组件是layui框架做得较好的一个模块，通过一些简单设置就可以渲染出功能强大的表格系统。下面我们将开始学习layui表格简单使用

1、导入相关的js包

1、layui表格的使用其实和bootstrap的表格使用都是大同小异，不同的是layui表格只需下载layui的开发文档即可没有单独的表格文档

名称	版本	备注
jquery	3.3.1.min.js	可以不用下载jquery英文在layui的官方插件中已经将jquery封装到了layui.all.js中(jquery官网地址)
layui	最新即可	需要依赖jquery(layui官网地址)

2、在代码中导入相应的插件

<link rel="stylesheet" href="../../layui/css/layui.css">
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../layui/layui.all.js"></script>

3、和bootstrap-table的使用一样在HTML中插入一个表格标签

<table class="layui-hide" id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>

这里注意一下lay-data="{id: ‘idTest’}"当需要获取选中表格数据时必须加上该属性当然idTest是可以随便取名

2、具体使用

1、通过js来操作表格的样式以及渲染数据

layui.use('table', function(){
            var table = layui.table;
            var laypage = layui.laypage;
            table.render({
                elem: '#demo'//表格的id值
                ,id:'idTest'//当需要获取选中数据时所需的id即lay-data="{id: 'idTest'}"中的idTest，注意这里的id不用写#
                ,height: 350//表格的高度
                ,url: '../../servlet/insect/show' //数据接口
                ,method:'post'//请求方式
                ,limit:100//每页显示的条数
                ,limits:[10,20,30]//可选择的每页显示条数
                //修改请求参数
                ,request:{
                    pageName:'pageNum'//页码的参数名称，默认是page
                    ,limitName:'pageSize'//每页显示数量参数名，默认是limit
                }
                //发给服务端的其他参数
                ,where:{
                    insectName:insectName,//采用键值对的方式发送
                    hostName:hostName
                }
                //处理数据回调函数
                ,parseData: function(res){ //res 即为原始返回的数据
                    console.log(res)
                    console.log(res.hasNextPage)
                    return {
                        "status": true, //解析接口状态
                        "count": res.total, //解析数据长度
                        "list": res.list //解析数据列表
                    };
                }
                //设置响应回来的数据参数名称和状态，它将对应上面回调函数中解析数据的参数名
                ,response: {
                    statusName: 'status' //规定数据状态的字段名称，默认：code
                    ,statusCode: true //规定成功的状态码，默认：0
                    ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                    ,countName: 'count' //规定数据总数的字段名称，默认：count
                    ,dataName: 'list' //规定数据列表的字段名称，默认：data
                }
                ,cols: [[ //表头
                    {type:'radio'}//开启单选框
                    ,{field: 'id', title: 'id', sort: true,hide:true,toolbar: '#barDemo'}
                    ,{field: 'name', title: '名称', sort: true}
                    ,{field: 'hostName', title: '寄主',sort: true}
                    ,{field: 'danger', title: '主要危害', sort: true}
                ]]
                ,page: true //开启分页
            });

        });

2、学习完渲染表格下面我们来学习如何获取选中行的数据，不多说我们直接上代码。

var checkStatus = table.checkStatus('idTest');//这里的idTest位我们表格标签中设置lay-data="{id: 'idTest'}"中的idTest，别忘了在设置表格渲染中加入,id:'idTest'这里的id也是不需要#
        console.log(checkStatus.data.length);
        if (checkStatus.data.length == 0) {
            layer.open({
                title: '提示'
                ,content: '请选中行'
            });
            return false;
        }
        var id=checkStatus.data[0].id;
        console.log(id);
        window.location.href="findInformation.html?"+id;

看代码是不是很简单，我们只需要在我们需要传参的按钮上绑定一个点击事件我们就可以通过上面这段代码得到选中数据，我这里判断了一下是否选中了行，当没有选中时将弹出一个提示框，这里采用了layui另一个组件弹出层也是一个非常实用的组件，这里就不多呢介绍了，需要学习的同学可以官网上查看文档吧，也是相当的简单。

总结

bootstrap-table和layui表格都是非常强大，关于两者谁更好在这里不做评价，个人感觉bootstrap-table的文档可能难理解一点，因为bootstrap-table没有具体的实例需要自己去试一试才知道，而layui的文档是真的做的非常好，各种功能的实例做的也是非常好非常容易上手，但是个人觉得bootstrap-table的样式比layui要好看点。最后博主在这里只做了常用简单的介绍。希望对看到了同学有所帮助，如果大家需要具体项目的例子自可下面的Github地址下载：
layui项目使用下载地址
bootstrap-table项目使用地址下载