Bootstrap 테이블 사용법 요약

이 글은 모두를 위한 부트스트랩 테이블의 간단한 사용법을 주로 요약한 것인데, 관심 있는 친구들이 참고할 수 있기를 바랍니다.

【관련 영상 추천 : Bootstrap tutorial】

bootstrap-table은 bootstrap-table을 기반으로 작성되었으며 특별히 데이터를 표시하는 데 사용되는 테이블 플러그인입니다. Bootstrap은 Twitter에서 유래되었으며 현재 가장 널리 사용되는 프런트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JAVASCRIPT를 기반으로 하며 단순성, 유연성, 신속한 프런트엔드 개발이라는 장점을 가지고 있습니다. 여기서는 부트스트랩과 부트스트래핑을 설명하지 않겠습니다. 이 기사에서는 내 프로젝트에서 부트스트랩 테이블 사용에 대한 이해와 이를 배우는 방법을 설명하는 데 중점을 둘 것입니다.

먼저 jquery, bootstrap 및 bootstrap-table의 관계를 설명하겠습니다. bootstrap 코드의 많은 부분이 jquery를 포함하고 있는데, 이는 bootstrap이 jquery에 의존한다는 것을 의미하며, 우리가 사용하려는 bootstrap-table은 bootstrap을 기반으로 생성되므로 bootstrap-table을 사용하기 전에 jquery 및 bootstrap js, css를 참조해야 합니다. 파일.

그렇다면 bootstrap-table의 특징: jquery-ui, jqgrid 및 기타 테이블 표시 플러그인에 비해 bootstrap-table은 일부 가벼운 데이터 표시에는 충분하지만 아버지와 아들에게는 충분합니다. 테이블 등에 대한 지원도 매우 좋으며, 가장 중요한 점은 다른 부트스트랩 태그와 원활하게 결합할 수 있다는 점입니다.

1. js 및 css 소개

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2. 테이블 데이터 채우기

bootStrap 테이블 데이터를 얻는 방법에는 두 가지가 있습니다. 하나는 테이블의 data-url 속성을 통해 데이터 소스를 지정하는 것입니다. JavaScript를 통해 테이블을 초기화할 때 URL을 지정하세요. 데이터 가져오기

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

$('#table').bootstrapTable({
 url: 'data.json'
 });

두 번째 방법은 복잡한 데이터를 처리할 때 첫 번째 방법보다 더 유연합니다. 두 번째 방법은 일반적으로 테이블 데이터를 채우는 데 사용됩니다.

$(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 () {
 $('#tradeList').bootstrapTable({
 url: '/VenderManager/TradeList', //请求后台的URL（*）
 method: 'post',  //请求方式（*）
 toolbar: '#toolbar', //工具按钮用哪个容器
 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: 'id',
  title: '序号'
 }, {
  field: 'liushuiid',
  title: '交易编号'
 }, {
  field: 'orderid',
  title: '订单号'
 }, {
  field: 'receivetime',
  title: '交易时间'
 }, {
  field: 'price',
  title: '金额'
 }, {
  field: 'coin_credit',
  title: '投入硬币'
 }, {
  field: 'bill_credit',
  title: '投入纸币'
 }, {
  field: 'changes',
  title: '找零'
 }, {
  field: 'tradetype',
  title: '交易类型'
 },{
  field: 'goodmachineid',
  title: '货机号'
 },{
  field: 'inneridname',
  title: '货道号'
 },{
  field: 'goodsName',
  title: '商品名称'
 }, {
  field: 'changestatus',
  title: '支付'
 },{
  field: 'sendstatus',
  title: '出货'
 },]
 });
 };
 
 //得到查询的参数
 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:$('input:radio[name="tradetype"]:checked').val(),
 success:$('input:radio[name="success"]:checked').val(),
 };
 return temp;
 };
 return oTableInit;
 };

필드 필드는 데이터를 표시하기 위해 서버에서 반환한 필드와 일치해야 합니다.

3. 백그라운드에서 데이터 가져오기

a, 데이터를 가져오는 서블릿

BufferedReader bufr = new BufferedReader(
 new InputStreamReader(request.getInputStream(),"UTF-8"));
 StringBuilder sBuilder = new StringBuilder("");
 String temp = "";
 while((temp = bufr.readLine()) != null){
 sBuilder.append(temp);
 }
 bufr.close();
 String json = sBuilder.toString();
 JSONObject json1 = JSONObject.fromObject(json);
 String sdate= json1.getString("sdate");//通过此方法获取前端数据
 ...

b, 데이터를 가져오는 springMvc 컨트롤러의 해당 메서드

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype)
{
 ...
}

관련 권장 사항:

HTML에서 테이블 마우스 드래그 정렬을 구현하는 방법

JS는 테이블 테이블 고정 헤더와 헤더 스크롤을 가로 스크롤로 구현합니다

bootstrap 테이블 서버측 처리 페이징 예시 공유

위 내용은 Bootstrap 테이블 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!