찾다

집 >웹 프론트엔드 >JS 튜토리얼 >BootStrap 테이블 활용법 분석

BootStrap 테이블 활용법 분석

高洛峰
高洛峰원래의
2017-03-20 14:02:232666검색

이 글의 예시는 참고용으로 BootStrap 테이블을 사용하는 방법을 공유합니다. 구체적인 내용은 다음과 같습니다

bootstrap 테이블 git 주소: https://github.com/wenzhixin/bootstrap-table

파일 소개

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css"/>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

사용 방법

<table data-toggle="table" data-url="data.json">
  <thead>
  ...
  </thead>
</table>

또는

<table id="table" class="mychar1-table"></table>
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;data.json&#39;
 });

두 번째로 이해하는 방법: 

var $table = $(&#39;#mychart1&#39;);
$table.bootstrapTable({
url: reqprojectname_w+&#39;list/spectrumlist&#39;,
dataType: "json",
toolbar: &#39;#toolbar&#39;,  //工具按钮用哪个容器
striped: true,   //是否显示行间隔色
singleSelect: false,
pagination: true, //分页
pageNumber:1,   //初始化加载第一页，默认第一页
pageSize: 10,   //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
 columns: [{
  field: &#39;id&#39;,
  title: &#39;序号&#39;
 }, {
  field: &#39;liushuiid&#39;,
  title: &#39;交易编号&#39;
 }, {
  field: &#39;orderid&#39;,
  title: &#39;订单号&#39;
 }, {
  field: &#39;receivetime&#39;,
  title: &#39;交易时间&#39;
 }, {
  field: &#39;price&#39;,
  title: &#39;金额&#39;
 }, {
  field: &#39;coin_credit&#39;,
  title: &#39;投入硬币&#39;
 }, {
  field: &#39;bill_credit&#39;,
  title: &#39;投入纸币&#39;
 }, {
  field: &#39;changes&#39;,
  title: &#39;找零&#39;
 }, {
  field: &#39;tradetype&#39;,
  title: &#39;交易类型&#39;
 },{
  field: &#39;goodmachineid&#39;,
  title: &#39;货机号&#39;
 },{
  field: &#39;inneridname&#39;,
  title: &#39;货道号&#39;
 },{
  field: &#39;goodsName&#39;,
  title: &#39;商品名称&#39;
 }, {
  field: &#39;changestatus&#39;,
  title: &#39;支付&#39;
 },{
  field: &#39;sendstatus&#39;,
  title: &#39;出货&#39;
 },
  {
   title: &#39;操作&#39;,
   field: &#39;id&#39;,
   align: &#39;center&#39;,
   formatter:function(value,row,index){
   var e = &#39;<a href="#" mce_href="#" onclick="edit(\&#39;&#39;+ row.id + &#39;\&#39;)">编辑</a> &#39;;
   var d = &#39;<a href="#" mce_href="#" onclick="del(\&#39;&#39;+ row.id +&#39;\&#39;)">删除</a> &#39;;
   return e+d;
  }
  }
  ]
 });

자세한 소개

$(function () {
  
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
  
 //2.初始化Button的点击事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
  
 });
  
  
 var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
  $(&#39;#tradeList&#39;).bootstrapTable({
  url: &#39;/VenderManager/TradeList&#39;,  //请求后台的URL（*）
  method: &#39;post&#39;,   //请求方式（*）
  toolbar: &#39;#toolbar&#39;,  //工具按钮用哪个容器
  striped: true,   //是否显示行间隔色
  cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  pagination: true,   //是否显示分页（*）
  sortable: false,   //是否启用排序
  sortOrder: "asc",   //排序方式
  queryParams: oTableInit.queryParams,//传递参数（*）
  sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
  pageNumber:1,   //初始化加载第一页，默认第一页
  pageSize: 50,   //每页的记录行数（*）
  pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
  strictSearch: true,
  clickToSelect: true,  //是否启用点击选中行
  height: 460,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
  uniqueId: "id",   //每一行的唯一标识，一般为主键列
  cardView: false,   //是否显示详细视图
  detailView: false,   //是否显示父子表
  columns: [{
   field: &#39;id&#39;,
   title: &#39;序号&#39;
  }, {
   field: &#39;liushuiid&#39;,
   title: &#39;交易编号&#39;
  }, {
   field: &#39;orderid&#39;,
   title: &#39;订单号&#39;
  }, {
   field: &#39;receivetime&#39;,
   title: &#39;交易时间&#39;
  }, {
   field: &#39;price&#39;,
   title: &#39;金额&#39;
  }, {
   field: &#39;coin_credit&#39;,
   title: &#39;投入硬币&#39;
  }, {
   field: &#39;bill_credit&#39;,
   title: &#39;投入纸币&#39;
  }, {
   field: &#39;changes&#39;,
   title: &#39;找零&#39;
  }, {
   field: &#39;tradetype&#39;,
   title: &#39;交易类型&#39;
  },{
   field: &#39;goodmachineid&#39;,
   title: &#39;货机号&#39;
  },{
   field: &#39;inneridname&#39;,
   title: &#39;货道号&#39;
  },{
   field: &#39;goodsName&#39;,
   title: &#39;商品名称&#39;
  }, {
   field: &#39;changestatus&#39;,
   title: &#39;支付&#39;
  },{
   field: &#39;sendstatus&#39;,
   title: &#39;出货&#39;
  },]
  });
 };
  
 //得到查询的参数
 oTableInit.queryParams = function (params) {
  var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  limit: params.limit, //页面大小
  offset: params.offset, //页码
  sdate: $("#stratTime").val(),
  edate: $("#endTime").val(),
  sellerid: $("#sellerid").val(),
  orderid: $("#orderid").val(),
  CardNumber: $("#CardNumber").val(),
  maxrows: params.limit,
  pageindex:params.pageNumber,
  portid: $("#portid").val(),
  CardNumber: $("#CardNumber").val(),
  tradetype:$(&#39;input:radio[name="tradetype"]:checked&#39;).val(),
  success:$(&#39;input:radio[name="success"]:checked&#39;).val(),
  };
  return temp;
 };
 return oTableInit;
 };

요청 매개변수

oTableInit.queryParams = function (params) {
  var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
  limit: params.limit, //第几条记录
  offset: params.offset, //显示一页多少记录
  sdate: $("#stratTime").val(),
  
  };
  return temp;
 };

백그라운드 어셈블리 테스트 데이터

JSONArray jsonData=new JSONArray();
 JSONObject jo=null;
 for (int i=0,len=10;i<len;i++){
  jo=new JSONObject();
  jo.put("id", i+(j++));
  jo.put("liushuiid", i+1);
  jo.put("price", 100);
  jo.put("mobilephone",10);
  jo.put("receivetime", 10);
  jo.put("tradetype", 10);
  jo.put("changestatus", "成功");
  jo.put("sendstatus", "失败");
  jo.put("bill_credit", 10);
  jo.put("goodroadid", 10);
  jo.put("SmsContent", 10);
  jo.put("orderid", 10);
  jo.put("goodsName", 10);
  jo.put("inneridname", 10);
  jo.put("xmlstr", 10);
  jsonData.add(jo);
 }
 int TotalCount=97;
 JSONObject jsonObject=new JSONObject();
 jsonObject.put("rows", jsonData);//JSONArray
 jsonObject.put("total",TotalCount);//总记录数

페이징 수신

int pageindex=0;
int offset = ToolBox.filterInt(json1.getString("offset"));
int limit = ToolBox.filterInt(json1.getString("limit"));
if(offset !=0){
 pageindex = offset/limit;
}
 pageindex+= 1;//第几页<br>...

BootStrap 중 페이징 테이블은 두 개의 페이징 필드(limit 및 offset)를 백엔드에 전달합니다. 전자는 각 페이지 수를 나타내며 기본값은 10입니다. 후자는 페이징 중 데이터의 오프셋을 나타냅니다.

검색 시 검색 필드가 백엔드로 전달되어 특정 검색 콘텐츠를 나타냅니다.

서버에서 반환된 데이터에는 페이지(페이지 수)와 총계(총 데이터 양)라는 두 필드도 포함됩니다. 프런트 엔드는 이 두 필드를 기준으로 페이지를 매겨야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

BootStrap 테이블 사용 방법 분석과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련글 :

부트스트랩으로 기본 레이아웃을 구현하는 방법에 대한 자세한 설명

부트스트랩 전환 효과 사용 방법 전환 모달 상자( 모달)

JS 컴포넌트 Bootstrap 테이블 테이블 행 드래그 효과 구현 코드

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：부트스트랩 테이블 사용법에 대한 자세한 설명다음 기사：부트스트랩 테이블 사용법에 대한 자세한 설명

관련 기사

더보기