BOOTSTRAP(二)-bootstraptable｡◕ᴗ◕｡

荧光之炽 2021-07-02

1017

—

bootsraptable下载

https://www.bootstrap-table.com.cn/doc/getting-started/download/

下载后解压在目录\bootstrap-table-master\dist找到图中.min文件，目前这个阶段只要用这两个文件就行。

—

bootsraptable使用

api文档：

https://www.bootstrap-table.com.cn/doc/getting-started/introduction/

官网api已经介绍很详细了，不了解的，同学自己充电去吧！在实际开发中一般都是通过JavaScript来实现bootstraptable,这样的好处在于如果需求有变增加或删除某列就可以只修改对应的JS文件，而不是东一下西一下，改动的需求多文件多的话，很容易就有遗漏。

—

bootstraptable获取整行数据

根据index获取行数据

第一步

引入bootstrapTable.min.js bootstrapTable.min.css

第二步

初始化表格列

//初始化页面bootstrapTable参数
$('#ordertable').bootstrapTable({
                 url: "order/search",    请求后台的URL（*）
                 method : 'post',
                 contentType: 'application/x-www-form-urlencoded',
                 cache : false,
                 halign:"server",
                 striped : false,
                 pagination : true,
                 pageSize : 10,
                 pageNumber : 1,
                 pageList : [10,20,50,100],
                 search : false,
                 showRefresh : false,
                 showToggle : false,
                 showColumns : false,
                 clickToSelect : true,
                 uniqueId : 'id',
                 singleSelect : false,
                 sidePagination : "server",
                 得到查询的参数
                 queryParams : function (params) {
                 },
                 columns: [
                           * 是否显示复选框   */
                           {checkbox: true,  visible: true},
                           {field:"orderId",align: 'center',title:'订单流水号'},
                           {field:"order_opt",title:'操作',align: 'center',formatter:"tableformatter"}
                   ], 
                   responseHandler:function(res){
                       if(res.success){
                           return {"total":res.obj.totalNum,"rows":res.obj.pageList}
                       }else{
                           layer.msg('登陆失效，正在努力跳转登陆页面，您也可点击退出，或刷新页面前往登陆页面！', {anim: 6,icon: 2,time:20000});
                       }
                   },
                   formatNoMatches: function() {
                       return '无匹配数据';
                   }
});
//字段对应formatter方法 将行数据下标绑定到获取方法上
function tableformatter（value, row, index）{
      return '<a href="javascript:;" title="详情" onclick="info('+index+');">详情&nbsp;</a>';
}
//根据行下标获取bootstrapTable行数据
function info(index){
      行数据获取 


      var row = $('#ordertable').bootstrapTable('getData')[index];


      console.log(row);


     ..........


}

第三步

给展示列绑定formatter 并将行标传达到方法里。

第四步

根据$('#ordertable').bootstrapTable('getData')[index];获取行数据。

—

实例

先上效果：

源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
 <!-- 包含头部信息用于适应不同设备 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 包含 bootstrap 样式表 -->
 <link rel="stylesheet" href="../css/bootstrap.min.css">
 <link rel="stylesheet" href="../css/bootstrap-table.css">
</head>
<body>
<div class="container">
  <div class="row clearfix">


    <div class="col-md-12 column">
      <h3>
        BootstrapTable.
      </h3>
    </div>
    <div class="col-md-12 column" id="chenkbox">
      <div class="bootstrap-table">
        <div class="columns columns-left btn-group pull-left" id="toolbar">
          <button  type="button" class="btn btn-outline btn-default" onclick="">
            <span class="glyphicon glyphicon-plus-sign"></span>&nbsp;新增
          </button>
          <button type="button" class="btn btn-outline btn-default" onclick="">
            <span class="glyphicon glyphicon-pencil"></span>&nbsp;修改
          </button>
          <button type="button" class="btn btn-outline btn-default" onclick="">
            <span class="glyphicon glyphicon-minus-sign"></span>&nbsp;停用
          </button>
          <button type="button" class="btn btn-outline btn-default" onclick="">
            <span class="glyphicon glyphicon-ok-sign"></span>&nbsp;启用
          </button>
          <button type="button" class="btn btn-outline btn-default" onclick="">
            <span class="glyphicon glyphicon-remove-sign"></span>&nbsp;作废
          </button>
        </div>


        <table id="grid"></table>
  
      </div>  
    </div>
    
  </div>
</div> 




<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 可选: 包含 jQuery 库 -->
<script src="../js/jquery.min.js"></script>
<!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/tablesort.js"></script>




<script type="text/javascript">




$(document).ready(function(){
//初始化table
InitMainTable();
//静态排序
new TableSorter("grid");




});








//初始化bootstrap-table的内容
function InitMainTable () {
    //记录页面bootstrap-table全局变量$table，方便应用
    //var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
     $('#grid').bootstrapTable({
        //url: "",                            请求后台的URL（*）
        method: 'GET',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        //sortable: true,                     是否启用排序
        //sortOrder: "asc",                   排序方式
        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 10,                     //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                      //是否显示表格搜索
    searchText:'',
        //strictSearch: true,                /设置为 true启用 全匹配搜索，否则为模糊搜索
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表
    showExport: true,                     //是否显示导出
    exportDataType: "basic",              //basic', 'all', 'selected'.
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {   
                rows: params.limit,                         //页面大小
                page: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名  
                sortOrder: params.order //排位命令（desc，asc） 
            };
      
      // 服务端请求
           var x=$("#eSealQueryForm").serializeArray();
        $.each(x, function(i, field){
         temp[field.name]=field.value;
        });
           return temp;
        },
        columns: [
                 {checkbox: true,  visible: true  /* 是否显示复选框   */},
                 {field: 'Name',title: '姓名'}, 
                 {field: 'Mobile',title: '手机'}, 
                 {field: 'Email',title: '邮箱'}, 
                 {field: 'Homepage',title: '主页'}, 
                 {field: 'Hobby',title: '兴趣爱好'}, 
                 {field: 'Gender',title: '性别'}, 
                 {field: 'Age',title: '年龄'}, 
                 {field: 'BirthDate',title: '出生日期'}, 
                 {field: 'Height',title: '身高'}, 
                 {field: 'Note',title: '备注'}, 
                 {field:'ID',title: '操作',width: 120,align: 'center',valign: 'middle'}
                 ],
        onLoadSuccess:function(data){
          
        },
        onLoadError: function () {
            showTips("数据加载失败！");
        },
        onDblClickRow: function (row, $element) {
          //双击
            var id = row.ID;
        }, 
    responseHandler:function(res){
          //return {"total":res.data.total,"rows":res.data.rows}
        },
    formatNoMatches: function() {
            return '无匹配数据';
        },
    data:[
      {'Name':'yk1','Mobile':'12345678901','Email':'12345678901@163.com','Homepage':'1','Hobby':'woman','Gender':'man','Age':'26','BirthDate':'1992-11-04','Height':'175cm','Note':'备注','ID':'001'},
      {'Name':'yk2','Mobile':'12345678902','Email':'12345678901@163.com','Homepage':'2','Hobby':'man','Gender':'man','Age':'22','BirthDate':'1992-11-05','Height':'176cm','Note':'备注','ID':'002'},
      {'Name':'yk3','Mobile':'12345678903','Email':'12345678901@163.com','Homepage':'3','Hobby':'woman','Gender':'man','Age':'23','BirthDate':'1992-11-06','Height':'177cm','Note':'备注','ID':'003'},
      
    ]
    });
};
</script>


</body>
</html>

拓展：bootstrapTable有后台排序功能，这里就不提及了,后续会出讲解实现分页功能的文章，现在来说说前台排序功能，bootstrapTable可以控制一页可以展示多少数据量，数据量一大和多排序就方便查找了，点击每列列头，将当前页面table数据排序。

所以你在上面源码中可以看到我引入了一个排序的js文件，并将table的id传递给了它。有兴趣的同学可以研究研究，如果不感兴趣，把图中两行代码删除即可！

附上tablesort.js源码：

function TableSorter(table)
{this.Table=this.$(table);if(this.Table.rows.length<=1)
{return;}
var args=[];if(arguments.length>1)
{for(var x=1;x<arguments.length;x++)
{args.push(arguments[x]);}}
this.Init(args);}
TableSorter.prototype={$:function(element)
{return document.getElementById(element);},Init:function(args)
{this.Rows=[];this.Header=[];this.ViewState=[];this.LastSorted=null;this.NormalCss="NormalCss";this.SortAscCss="SortAscCss";this.SortDescCss="SortDescCss";for(var x=0;x<this.Table.rows.length;x++)
{this.Rows.push(this.Table.rows[x]);}
this.Header=this.Rows.shift().cells;for(var x=0;x<(args.length?args.length:this.Header.length);x++)
{var rowIndex=args.length?args[x]:x;if(rowIndex>=this.Header.length)
{continue;}
this.ViewState[rowIndex]=false;this.Header[rowIndex].style.cursor="pointer";this.Header[rowIndex].onclick=this.GetFunction(this,"Sort",rowIndex);}},GetFunction:function(variable,method,param)
{return function()
{variable[method](param);}},Sort:function(column)
{if(this.LastSorted)
{this.LastSorted.className=this.NormalCss;}
var SortAsNumber=true;for(var x=0;x<this.Rows.length&&SortAsNumber;x++)
{SortAsNumber=this.IsNumeric(this.Rows[x].cells[column].innerHTML);}
this.Rows.sort(function(row1,row2)
{var result;var value1,value2;value1=row1.cells[column].innerHTML;value2=row2.cells[column].innerHTML;if(value1==value2)
{return 0;}
if(SortAsNumber)
{result=parseFloat(value1)>parseFloat(value2);}
else
{result=value1>value2;}
result=result?1:-1;return result;})
if(this.ViewState[column])
{this.Rows.reverse();this.ViewState[column]=false;this.Header[column].className=this.SortDescCss;}
else
{this.ViewState[column]=true;this.Header[column].className=this.SortAscCss;}
this.LastSorted=this.Header[column];var frag=document.createDocumentFragment();for(var x=0;x<this.Rows.length;x++)
{frag.appendChild(this.Rows[x]);}
this.Table.tBodies[0].appendChild(frag);this.OnSorted(this.Header[column],this.ViewState[column]);},IsNumeric:function(num)
{return /^\d+(\.\d+)?$/.test(num);},OnSorted:function(cell,IsAsc)
{return;}}

打赏一下呗

end

bootstrap 按钮 table

文章转载自荧光之炽，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

BOOTSTRAP(二)-bootstraptable｡◕ᴗ◕｡

评论