>  기사  >  웹 프론트엔드  >  Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성

Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성

青灯夜游
青灯夜游앞으로
2021-04-30 11:00:102698검색

이 글에서는 Bootstrap 및 jQuery를 기반으로 하는 테이블 플러그인 Bootstrap-Table의 사용법을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성

1. 소개

프로젝트 이름에서 알 수 있듯이 부트스트랩 테이블 플러그인입니다. 테이블 표시 형식은 거의 모든 프런트 엔드 작업에 포함됩니다. 부트스트랩 테이블은 퀵 테이블 생성, 쿼리, 페이징, 정렬 등과 ​​같은 일련의 기능을 제공합니다. [관련 추천 : "bootstrap tutorial"]

프로젝트 주소 : https://github.com/wenzhixin/bootstrap-table

아마도 Bootstrap과 jQuery 기술은 좀 낡았지만, 역사적 배경 때문이라면 기술 선택 또는 이전 프로젝트에서 이 두 라이브러리를 여전히 사용하고 있다면 이 프로젝트는 확실히 당신을 웃게 만들고 테이블 표시 요구 사항을 쉽게 충족할 것입니다!

2. 모드

Boostatrp 테이블은 클라이언트 모드와 서버 모드의 두 가지 모드로 구분됩니다.

  • Client: 서버가 한 번에 로드해야 하는 데이터를 데이터 인터페이스를 통해 표시한 다음 이를 json으로 변환하고 테이블을 생성합니다. 표시되는 행 수, 페이징 등을 직접 정의할 수 있으며 현재로서는 서버에 요청이 전송되지 않습니다.

  • Server: 페이지당 설정된 레코드 수와 현재 표시된 페이지를 기반으로 서버에 데이터를 전송하여 쿼리합니다.

3. 실전

팁: 설명은 모두 코드 내 주석으로 표시되어 있으니 주의 깊게 읽어주세요.

가장 간단한 CDN 도입 방식을 사용하며, 코드를 직접 실행할 수 있습니다. 코드를 복사하고 json 파일의 경로를 구성하여 효과를 확인하세요.

3.1 빨리 시작하세요

댓글의 별표는 매개변수를 작성해야 한다는 의미이므로, 긴 말 없이 코드에 대해 이야기해보겠습니다. 샘플 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello, Bootstrap Table!</title>
    // 引入 css
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
    // 需要填充的表格
    <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入js
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
        window.operateEvents = {
            // 当点击 时触发
            &#39;click .delete&#39;: function (e,value,row,index) {
                // 在 console 打印出整行数据
                console.log(row);
            }
        };

        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/frontend/bootstrap-table/user.json&#39;,         //请求后台的 URL(*)
            method: &#39;get&#39;,                      //请求方式(*)
            // data: data,                      //当不使用上面的后台请求时,使用data来接收数据
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为 true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式:client 客户端分页,server 服务端分页(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 6,                        //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以个人感觉意义不大
            strictSearch: 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&#39;, &#39;all&#39;, &#39;selected&#39;.
            columns: [{
                checkbox: true     //复选框标题,就是我们看到可以通过复选框选择整行。
            }, {
                field: &#39;id&#39;, title: &#39;ID&#39;       //我们取json中id的值,并将表头title设置为ID
            }, {
                field: &#39;username&#39;, title: &#39;用户名&#39;         //我们取 json 中 username 的值,并将表头 title 设置为用户名
            },{
                field: &#39;sex&#39;, title: &#39;性别&#39;                //我们取 json 中 sex 的值,并将表头 title 设置为性别
            },{
                field: &#39;city&#39;, title: &#39;城市&#39;               //我们取 json 中 city 的值,并将表头 title 设置为城市
            },{
                field: &#39;sign&#39;, title: &#39;签名&#39;               //我们取 json 中 sign 的值,并将表头 title 设置为签名
            },{
                field: &#39;classify&#39;, title: &#39;分类&#39;           //我们取 json 中 classify 的值,并将表头 title 设置为分类
            },{
                //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
                // events 触发事件
                field: &#39;Button&#39;,title:"操作",align: &#39;center&#39;,events:operateEvents,formatter:function(value,row,index){
                    var del = &#39;<button type="button" class="btn btn-danger delete">删除</button>&#39;
                    return del;
                }
            }
            ],
            responseHandler: function (res) {
                return res.data      //在加载远程数据之前,处理响应数据格式.
                // 我们取的值在data字段中,所以需要先进行处理,这样才能获取我们想要的结果
            }
        });
</script>
</body>
</html>
Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성

위 코드는 기본 API를 통해 기본 기능을 구현하는 방법을 보여줍니다. 샘플 코드에는 모든 API가 나열되어 있지 않습니다. 이 라이브러리에는 모든 사람이 발견하기를 기다리는 많은 흥미로운 기능이 있습니다. 속담처럼 연습을 안내하는 것은 마스터의 몫입니다~

3.2 분해 및 설명

핵심 사항은 아래에 설명되어 있습니다. 더 쉽게 사용할 수 있는 친구는 플러그인 사용법을 이해할 수 있습니다.

3.2.1 초기화 부분

选择需要初始化表格。
$(&#39;#tb_departments&#39;).bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

3.2.2 데이터 읽기 부분

columns:[{field: &#39;Key&#39;, title: &#39;文件路径&#39;,formatter: function(value,row,index){} }]
  • field json 키-값 쌍의 키
  • title은 테이블 헤더에 표시되는 내용
  • formatter는 함수입니다. type, 데이터 내용을 수정해야 할 때 사용합니다. 예: 인코딩 변환

3.2.3 이벤트 트리거

events:operateEvents
 window.operateEvents = {
        &#39;click .download&#39;: function (e,value,row,index) {
            console.log(row);
        }
   }

테이블을 처리해야 하는 경우가 많기 때문에 이벤트 트리거가 좋은 선택입니다. 예를 들어 행 데이터를 기록할 수 있고 트리거를 사용하여 사용자 정의된 기능 등을 실행할 수 있습니다.

4. 확장

작업을 더욱 효율적으로 만들기 위해 자체 휠을 개발하지 않고도 더 많은 테이블 기능을 쉽게 구현할 수 있는 여러 확장 기능을 소개합니다. (또한 확장 기능의 구체적인 사용법을 보려면 공식 웹사이트로 이동하세요. 공무원이 많은 확장 기능을 수집했습니다). 이전 규칙은 코드로 직접 이동합니다.

4.1 테이블 내보내기

<script src="js/bootstrap-table-export.js"></script> 
showExport: true,                                           //是否显示导出
exportDataType: basic,								        //导出数据类型,支持:&#39;基本&#39;,&#39;全部&#39;,&#39;选中&#39;
exportTypes:[&#39;json&#39;, &#39;xml&#39;, &#39;csv&#39;, &#39;txt&#39;, &#39;sql&#39;, &#39;excel&#39;]   //导出类型

4.2 자동 새로 고침

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true, 							    //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新
autoRefreshStatus: true,						//设置 true 为启用自动刷新。这是表加载时状态自动刷新
autoRefreshInterval: 60,						//每次发生自动刷新的时间(以秒为单位)
autoRefreshSilent: true							//设置为静默自动刷新

4.3 행 복사

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,									//设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板
copyWithHidden: true,								//设置 true 为使用隐藏列进行复制
copyDelimiter: &#39;, &#39;,								//复制时,此分隔符将插入列值之间
copyNewline: &#39;\n&#39;									//复制时,此换行符将插入行值之间

5. 요약

이 문서에서는 Bootstrap-Table 사용 방법을 간략하게 설명하고 현재 구현 중입니다. 테이블 기능이 고민되는 친구들은 HelloGitHub에서 추천하는 이 플러그인을 사용해 보세요. 웹에서 양식을 만드는 것이 매우 빠르다는 것을 알게 될 것이며, 친구들이 더 흥미로운 기능을 발견하기를 기대합니다.

참고: 위 js 부분은 함수형을 사용하지 않습니다. 익숙해진 후에는 함수형을 사용하는 것이 좋습니다. 이렇게 하면 재사용도 쉬워지고 코드가 더욱 표준화되어 보입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Bootstrap-Table을 사용하여 3분 만에 만족스러운 테이블 기능 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제