Bootstrap-table 사용법에 대한 간략한 토론

이 글에서는 Bootstrap-table의 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 추천: "bootstrap tutorial"

1. Bootstrap-table이란 무엇인가요?

비즈니스 시스템 개발에서는 쿼리, 페이징, 정렬 및 기타 테이블 레코드 처리가 매우 일반적입니다. 웹 개발에서는 요구 사항을 충족하기 위해 많은 강력한 플러그인을 사용할 수 있으며 이 책에서는 이를 크게 향상시킬 수 있습니다. bootstrap-table은 많은 프로젝트에서 널리 사용되는 매우 유명한 오픈 소스 테이블 플러그인입니다. Bootstrap-table 플러그인은 쿼리, 페이징, 정렬, 확인란, 표시 열 설정, 카드 보기, 마스터-슬레이브 테이블 표시, 열 병합, 국제화 처리 및 기타 처리 기능을 구현할 수 있는 매우 풍부한 속성 세트를 제공합니다. 그리고 플러그인은 동시에 행 이동, 열 위치 이동 및 기타 특수 기능과 같은 몇 가지 좋은 확장 기능도 제공합니다. 플러그인은 HTML5 기반 data-* 속성 식별자를 사용하여 설정할 수 있습니다. Javascript를 사용하여 설정할 수 있어 매우 편리합니다. 본 에세이는 실제 프로젝트에서 bootstrap-table 플러그인을 적용한 사례를 소개하고, 관련 사용 중 발생한 문제를 처리한 경험을 정리한 것입니다.

2. 부트스트랩 테이블을 사용하는 방법은 무엇입니까?

Bootstrap-Table에는 테이블에 데이터를 표시하는 두 가지 방법이 있습니다. 하나는 클라이언트 모드이고 다른 하나는 서버 모드입니다.

　클라이언트 모드: 테이블에 표시할 데이터를 서버에 한 번에 로드한 다음 JSON 형식으로 변환하여 표시할 인터페이스로 전송하는 것을 말합니다. 클라이언트 모드는 비교적 간단합니다. 데이터를 한 번에 나와서 인터페이스에 올려놓으면, 설정한 페이지당 레코드 수에 따라 자동으로 페이지 매김이 생성됩니다. 두 번째 페이지를 클릭하면 데이터가 자동으로 로드되고 더 이상 서버에 요청이 전송되지 않습니다. 동시에 사용자는 자체 검색 기능을 사용하여 전체 데이터 검색을 수행할 수 있습니다. 이 방법은 데이터의 양이 적을 때 사용할 수 있습니다.

　서버 모드: 설정된 페이지당 레코드 수와 현재 표시할 페이지 번호를 기반으로 쿼리용 데이터를 서버에 전송하여 테이블에 표시하는 것을 말합니다. 이 방법은 사용자 요구에 따라 데이터를 동적으로 로드하여 서버 자원을 절약할 수 있지만 자체 전체 데이터 검색 기능을 사용할 수는 없습니다.

Bootstrap-table은 Boosttrap을 기반으로 개발된 플러그인이므로 사용 시 Bootstrap 스크립트와 스타일을 도입해야 합니다.

우리 프로젝트에 관련 파일이 도입되지 않은 경우 아래와 같이 이러한 스타일과 스크립트 파일을 도입해야 합니다.

<link>
<script></script>
<script></script>

그리고 Bootstrap-table의 종속 참조가 있습니다:

CSS 파일 소개

<link>

스크립트 파일 소개

<script></script>

<script></script>

페이지에서 bootstrap-table의 사용은 두 가지 유형으로 나눌 수 있으며, 하나는 순수하게 HTML5로 작성되었습니다. , data-*를 통해 다양한 속성 설정을 지정하고, 그 중 하나는 유연한 설정을 위한 HTML+JS입니다.

HTML5 로고를 이용하여 HTML 코드를 초기화하면 다음과 같은 코드입니다.

                                                                  

Item ID	Item Name	Item Price

JS 코드를 사용하여 테이블 플러그인을 초기화하는 경우 다음 코드와 같이 HTML에서 테이블 개체만 선언하면 됩니다.

js 코드는 다음과 같습니다.

$('#table').bootstrapTable({
    url: 'data1.json',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }, ]
});

하지만 실제로 우리가 사용하는 bootstrap-table JS 구성 기능은 확실히 이보다 훨씬 복잡합니다. 다음 인터페이스 효과는 실제 테이블의 데이터 표시입니다.

3. Bootstrap-table 상세 설명:

1) JS 전체 속성 구성

위 그림의 결과를 보여주는 JS 코드는 다음과 같습니다.

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

위 JS 코드의 구성 속성은 기본적으로 이해를 돕기 위해 주석을 추가했습니다.

2) 쿼리 및 페이징

여기서 테이블 데이터 페이징은 서버 페이징을 사용하며, 검색 조건에 따라 서버에서 데이터 레코드를 반환하며, 여기서 queryParams 매개변수는 서버에 제출되는 매개변수입니다. .

//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = {
           rows: params.limit,                         //页面大小
           page: (params.offset / params.limit) + 1,   //页码
           sort: params.sort,      //排序列名
           sortOrder: params.order //排位命令（desc，asc）
     };
   return temp;
},

또한 데이터 반환을 위한 URL 주소 인터페이스가 FindWithPager라는 것을 알 수 있습니다. 이 MVC 컨트롤러 메서드가 데이터 반환을 처리하는 방법을 살펴보겠습니다.

/// <summary>
        /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
        /// </summary>
        /// <returns>指定对象的集合</returns>
        public override ActionResult FindWithPager()
        {
            //检查用户是否有权限，否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ListKey);

            string where = GetPagerCondition();
            PagerInfo pagerInfo = GetPagerInfo();
            var sort = GetSortOrder();

            List<testuserinfo> list = null;
            if (sort != null && !string.IsNullOrEmpty(sort.SortName))
            {
                list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
            }
            else
            {
                list = baseBLL.FindWithPager(where, pagerInfo);
            }

            //Json格式的要求{total:22,rows:{}}
            //构造成Json的格式传递
            var result = new { total = pagerInfo.RecordCount, rows = list };
            return ToJsonContent(result);
        }</testuserinfo>

위 코드는 객체 정보의 두 부분, 즉 페이징 엔터티 클래스 정보와 정렬 정보를 처리한 후 이러한 조건에 따라 레코드를 얻고

{total:22,rows:{}}

와 유사한 형식으로 JSON 데이터 레코드를 반환합니다.

var result = new { total = pagerInfo.RecordCount, rows = list };
return ToJsonContent(result);

페이징 매개변수 정보를 얻는 코드는 다음과 같습니다.

/// <summary>
        /// 根据Request参数获取分页对象数据
        /// </summary>
        /// <returns></returns>
        protected virtual PagerInfo GetPagerInfo()
        {
            int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
            int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);

            PagerInfo pagerInfo = new PagerInfo();
            pagerInfo.CurrenetPageIndex = pageIndex;
            pagerInfo.PageSize = pageSize;

            return pagerInfo;
        }

정렬 매개변수 정보를 얻는 코드는 다음과 같습니다.

/// <summary>
        /// 获取排序的信息
        /// </summary>
        /// <returns></returns>
        protected SortInfo GetSortOrder()
        {
            var name = Request["sort"];
            var order = Request["sortOrder"];
            return new SortInfo(name, order);
        }

마지막 단계는 특정 조건, 특정 페이지 번호 및 특정 조건에서 데이터 레코드를 구현하는 것입니다. 정렬 조건은 사용자 정의에 따라 달라질 수 있습니다. 필요한 구현 논리는 캡슐화된 처리 호출일 뿐입니다.

baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);

 实际情况下，我们列表的展示，一般需要使用不同的条件进行数据的查询的，虽然这个Bootstrap-table控件提供了一个默认的查询按钮，不过一般是在客户端分页的情况下使用，而且略显简单，我们一般使用自己查询条件进行处理，如下界面所示。

或者如下：

那么这样对于上面的js属性就需要调整下接受查询条件参数queryParams 了

//得到查询的参数
                queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var temp = {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                    return temp;
                },

 对于自定义查询条件，我们可以用下面的常规方式增加参数，如下所示

但是查询条件的参数我们不方便一一设置，我们想通过一种较为快捷的方式来处理，那么就需要对这个处理方式进行一个特别的修改了，首先添加一个扩展函数来处理表单的条件（参考博客http://www.cnblogs.com/zcsj/p/6635677.html的介绍）

//自定义函数处理queryParams的批量增加
        $.fn.serializeJsonObject = function () {
            var json = {};
            var form = this.serializeArray();
            $.each(form, function () {
                if (json[this.name]) {
                    if (!json[this.name].push) {
                        json[this.name] = [json[this.name]];
                    }
                    json[this.name].push();
                } else {
                    json[this.name] = this.value || '';
                }
            });
            return json;
        }

 然后我们就可以批量处理表单的查询条件了

queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var temp = $("#ffSearch").serializeJsonObject();
                    temp["rows"] = params.limit;                        //页面大小
                    temp["page"] = (params.offset / params.limit) + 1;  //页码
                    temp["sort"] = params.sort;                         //排序列名
                    temp["sortOrder"] = params.order;                   //排位命令（desc，asc）

                    //特殊格式的条件处理
                    temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
                    temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();

                    return temp;
                },

然后后端统一按照逻辑处理查询参数即可。

3）格式化输出函数及其他

对于上面JS的配置信息，我们再来回顾一下，例如对于数据转义函数，可以格式化输出的内容的，如下界面代码。

格式化的数据转义函数如下，主要就是根据内容进行格式化输出的JS函数，好像是需要放在一个文件内。

//连接字段格式化
        function linkFormatter(value, row, index) {
            return "<a>" + value + "</a>";
        }
        //Email字段格式化
        function emailFormatter(value, row, index) {
            return "<a>" + value + "</a>";
        }
        //性别字段格式化
        function sexFormatter(value) {
            if (value == "女") { color = 'Red'; }
            else if (value == "男") { color = 'Green'; }
            else { color = 'Yellow'; }

            return '<div>' + value + '</div>';
        }

 另外，我们看到行记录的最后增加了几个操作按钮，方便对当前记录的查看、编辑和删除操作，如下效果图所示。

这部分我们也是通过格式化函数进行处理的

//操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a><span></span></a>";
            result += "<a><span></span></a>";
            result += "<a><span></span></a>";

            return result;
        }

  如果我们需要双击弹出编辑界面的层，我们可以处理表格的双击事件，如下代码所示。

onDblClickRow: function (row, $element) {
                    var id = row.ID;
                    EditViewById(id, 'view');
                },

 

如果我们需要设置行的不同的样式展示，可以通过增加rowStyle的JS处理函数即可，如下代码所示

rowStyle: function (row, index) { //设置行的特殊样式
                    //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    if (index == 0) {
                        strclass = "warning";
                    }
                    return { classes: strclass }
                }

  对于表格记录的获取，我们可以通过下面的代码进行获取：$table.bootstrapTable('getSelections')

var rows = $table.bootstrapTable('getSelections');
           if (rows.length > 0) {
               ID = rows[0].ID;
           }

 如果是多条记录的处理，例如删除记录

//实现删除数据的方法
        function Delete() {
            var ids = "";//得到用户选择的数据的ID
            var rows = $table.bootstrapTable('getSelections');
            for (var i = 0; i <p> 如果需要设置显示列显示，如下界面所示</p><p><img src="https://img.php.cn/upload/article/000/000/024/1968db7ccb24c5175e6b512853157d6a-8.png" alt=""></p><p>以及排序处理</p><p><img src="https://img.php.cn/upload/article/000/000/024/1968db7ccb24c5175e6b512853157d6a-9.png" alt=""></p><p>这些需要在JS代码开启相关的属性即可。</p><p><img src="https://img.php.cn/upload/article/000/000/024/1968db7ccb24c5175e6b512853157d6a-10.png" alt=""></p><p>还有就是一种CardView的卡片视图格式，如下所示。</p><p><img src="https://img.php.cn/upload/article/000/000/024/6963891c8b828c775579d23bea64c194-1Bootstrap-table%20%EC%82%AC%EC%9A%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%9C%20%EA%B0%84%EB%9E%B5%ED%95%9C%20%ED%86%A0%EB%A1%A0" alt=""></p><p>另外一种是父子表的展开明细的格式，如下所示</p><p><img src="https://img.php.cn/upload/article/000/000/024/6963891c8b828c775579d23bea64c194-12.png" alt=""></p><p> 以上就是bootstrap-table插件在我实际项目中的应用情况，基本上对JS各个属性的使用进行了一些介绍了，具体的应用我们可以参考它的文档，获取对应属性、方法、事件的详细说明，这样我们就可以更加详细的应用这个插件的各种功能了。</p><p> http://bootstrap-table.wenzhixin.net.cn/documentation/</p><p>PS：以上为转载内容，经过自己的梳理后重新发布，感谢原作者伍华聪，原文路径：https://www.cnblogs.com/wuhuacong/p/7284420.html</p><h2>四、怎么在Spring MVC及SpringBoot项目中使用Bootstrap-table进行分页？</h2><p id="前端代码块">话不多说，直接上代码。</p><p>前端代码块：</p><pre class="brush:php;toolbar:false">页面：  

　　 JS:   function initTable(){               $('#test-table').bootstrapTable({                   method: 'get',                   toolbar: '#toolbar',    //工具按钮用哪个容器                   striped: true,      //是否显示行间隔色                   cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）                   pagination: true,     //是否显示分页（*）                   sortable: false,      //是否启用排序                  sortOrder: "asc",     //排序方式                  pageNumber:,      //初始化加载第一页，默认第一页                  pageSize: ,      //每页的记录行数（*）                  pageList: [, , , ],  //可供选择的每页的行数（*）                  url: "/testProject/pagelist.json",//这个接口需要处理bootstrap table传递的固定参数                  queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort                                      // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber                    //queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数                  sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）                  //search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大                  strictSearch: true,                  //showColumns: true,     //是否显示所有的列                  //showRefresh: true,     //是否显示刷新按钮                  minimumCountColumns: ,    //最少允许的列数                  clickToSelect: true,    //是否启用点击选中行                  searchOnEnterKey: true,                  columns: [{                      field: 'id',                      title: 'id',                      align: 'center'                  }, {                      field: 'testkey',                      title: '测试标识',                      align: 'center'                  }, {                      field: 'testname',                      title: '测试名字',                      align: 'center'                  },{                      field: 'id',                      title: '操作',                      align: 'center',                      formatter:function(value,row,index){                          //通过formatter可以自定义列显示的内容                          //value：当前field的值，即id                          //row：当前行的数据                          var a = '测试';                      }                   }],                  pagination:true              });

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码：

@RequestMapping(value = "/page4list.json")
public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
            HttpServletResponse response) {

        //搜索框功能
        //当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端需要对其解码
        if (null != searchText) {
            try {
                searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        //在service通过条件查询获取指定页的数据的list
        List<mwmsgtype> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
        //根据查询条件，获取符合查询条件的数据总量
        int total = mwMsgQueueService.queryCountBySearchText(searchText);
        //自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点
        PageResultForBootstrap page = new PageResultForBootstrap();
        page.setTotal(total);
        page.setRows(list);
        //page就是最终返回给客户端的数据结构，可以直接返回给前端

        //下边这段，只是我自己的代码有自定义的spring HandlerInterceptor处理返回值，可以忽略。
        request.setAttribute(Constants.pageResultData, page);

    }</mwmsgtype>

 完成上述代码，即可实现服务器端自动分页，bootstrap-table根据服务器端返回的total，以及table设定的pageSize，自动生成分页的页面元素，每次点击下一页或者指定页码，bootstrap-table会自动给参数pageNumber赋值，服务器返回指定页的数据。

如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。

这时就需要在bootstrap-table的参数列表中显式设置：

contentType: "application/x-www-form-urlencoded"

设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，之后就可以直接通过@RequestParam映射参数获取

更多编程相关知识，请访问：编程视频！！

위 내용은 Bootstrap-table 사용법에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!