0x01 比較low的tables

之前在各大項(xiàng)目里面，用的最多的是datatables，因?yàn)檫@個(gè)玩意可以讓你偷懶，不用寫分頁(yè)功能，壞處就是一次性加載所有數(shù)據(jù)，對(duì)性能略有影響。對(duì)于數(shù)據(jù)量不是特別大的情況下，datatables其實(shí)挺好的，但是對(duì)于各個(gè)bootstrap模版之間的兼容性，這個(gè)玩意就比較悲劇了，而且，改起來(lái)特別費(fèi)勁。然后就有了替代的想法，構(gòu)建一個(gè)自己長(zhǎng)期使用、可維護(hù)性高的tables插件就是成為了我一直追求的目標(biāo)。后來(lái)在研究某個(gè)bt模版的時(shí)候，發(fā)現(xiàn)bootstrapTable其實(shí)也很牛逼，所以有了這篇文章。

0x02 代碼走你

且不說別的，先上自己封裝好的代碼。

/*
 *
 * Copyright (c) 2016
 * Author: Smarttang
 * Github: https://github.com/smarttang/
 * ======
 * 用于列表插件的匯聚
 */

var tables;

(function(){
    
    "use strict";

    tables = {
        // 構(gòu)建表格
        draw: function(params)
        {
            // 節(jié)點(diǎn)判斷
            var _node = document.getElementById(params.ElementId);
            // 判斷是否存在
            if (_node){
                $('#'+params.ElementId).bootstrapTable({
                    method: 'POST',
                    dataType: "json",
                    url: params.remoteUrl,
                    search: true,  //是否顯示搜索框功能
                    pagination: true,  //是否分頁(yè)
                    showRefresh: true, //是否顯示刷新功能 
                    showColumns: true,
                    queryParams: params.queryParas, //參數(shù)
                    silent: true,  //刷新事件必須設(shè)置
                    iconSize: 'outline',
                    detailView: false,
                    contentType: 'application/x-www-form-urlencoded',
                    columns: params.columnsList,
                    icons: {
                        refresh: 'glyphicon-repeat',
                        toggle: 'glyphicon-list-alt',
                        columns: 'glyphicon-list'
                    },
                    responseHandler: params.responseED,
                    formatLoadingMessage: function () {
                        return "請(qǐng)稍等，正在加載中...";
                    },
                    formatNoMatches: function () {  //沒有匹配的結(jié)果
                        return '無(wú)符合條件的記錄';
                    },
                    onLoadSuccess: function(){
                        $("[data-toggle='tooltip']").tooltip();
                    }
                });
            }
        },
        // 刷新表格
        refresh: function(id)
        {
            $('#'+id).bootstrapTable('refresh');
        }
    }
})(jQuery);

代碼特別簡(jiǎn)單，沒有特別復(fù)雜的東西，簡(jiǎn)單說下這個(gè)插件上，我摸的一些坑。第一個(gè)坑在contentType上，這個(gè)值比較奇葩，在請(qǐng)求的過程里面，默認(rèn)我的請(qǐng)求是以form的方式進(jìn)行請(qǐng)求的，而默認(rèn)的情況下，它的請(qǐng)求是text/html,導(dǎo)致一直在后端獲取不到值。

正常的request

params值

0x03 結(jié)束

這個(gè)插件感覺比datatables好用，而且相對(duì)比較靈活豐滿些。在各個(gè)模版上兼容比較好。推薦使用吧～

0x04 參考

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
http://www.tuicool.com/articles/aAB7fei