bootstrap-table自定義複選框樣式
阿新 • • 發佈:2019-01-08
在使用bootstrap-table外掛時發現上面的複選框還是原生樣式比較醜
修改後的樣式
直接上程式碼
需引入樣式
.bella-checkbox{ position: relative; } /** 將初始的checkbox的樣式改變 */ .bella-checkbox input[type="checkbox"] { opacity: 0; /*將初始的checkbox隱藏起來*/ } /** 設計新的checkbox,位置 */ .bella-checkbox label:before { content: ''; width: 19px; height: 19px; display: inline-block; border-radius: 2px; border: 1px solid #bbb; background: #fff; } /** 點選初始的checkbox,將新的checkbox關聯起來 */ .bella-checkbox input[type="checkbox"]:checked + label:after { display: inline-block; font-family: 'Glyphicons Halflings'; content: "\e013"; top: 15%; left: 10%; position: absolute; font-size: 11px; line-height: 1; width: 16px; height: 16px; color: #333; } .bella-checkbox label { cursor: pointer; text-align: center; position: absolute; left: 10px; }
<table id="bootstrapTable"></table>
$.initBootstrapTable("#bootstrapTable", {
idField : "id",
height : 500,
url: "/user",
columns : cols,
onPostBody : function () {
//layer.msg("列表載入完成");
},
});
主要是在列表載入完成後渲染一下,關鍵 onPostBody
defaults.onPostBody = function () { //改變複選框樣式 $(selector).find("input:checkbox").each(function (i) { var $check = $(this); if ($check.attr("id") && $check.next("label")) { return; } var name = $check.attr("name"); var id = name + "-" + i; var $label = $('<label for="'+ id +'"></label>'); $check.attr("id", id).parent().addClass("bella-checkbox").append($label); }); if ($.isFunction(options.onPostBody)) { options.onPostBody(); } }; $(selector).bootstrapTable(defaults);
下面是完整程式碼
/** * 通用方法封裝 * <i>bootstrap-table外掛拓展</i> * @author zhangyaomin */ (function ($) { /** * * @param selector jQuery選擇器 * @param options */ $.initBootstrapTable = function (selector, options) { var defaults = { method: "get", dataType: "json", // 返回格式(*) columns : [], detailView : false, // 顯示詳情模式 pagination: true, // 是否顯示分頁(*) pageSize: 10, // 每頁的記錄行數(*) pageNumber: 1, // 初始化載入第一頁,預設第一頁 pageList: [10, 25, 50], // 可供選擇的每頁的行數(*) search: false, // 是否顯示搜尋框功能 singleSelect: false, // 是否禁止多選 iconSize: 'outline', // 圖示大小:undefined預設的按鈕尺寸 xs超小按鈕sm小按鈕lg大按鈕 toolbar: '#tableToolbar', // 指定工作欄 sidePagination: "server", // 啟用服務端分頁 showRefresh: false, // 是否顯示重新整理按鈕 showColumns: true, // 是否顯示隱藏某列下拉框 showToggle: true, // 是否顯示詳細檢視和列表檢視的切換按鈕 cache: false, // 是否使用快取 showFooter: false, // 是否顯示列腳 showRefresh: false, // 是否顯示重新整理按鈕 queryParams: function(params) { return { // 傳遞引數查詢引數 pageNo: (params.offset / params.limit) + 1, limit: params.limit }; }, responseHandler: function (result) { return { total : result.total, //總頁數,前面的key必須為"total" rows : result.data //行資料,前面的key要與之前設定的dataField的值一致. }; } }; defaults = $.extend(true, defaults, options); defaults.onPostBody = function () { //改變複選框樣式 $(selector).find("input:checkbox").each(function (i) { var $check = $(this); if ($check.attr("id") && $check.next("label")) { return; } var name = $check.attr("name"); var id = name + "-" + i; var $label = $('<label for="'+ id +'"></label>'); $check.attr("id", id).parent().addClass("bella-checkbox").append($label); }); if ($.isFunction(options.onPostBody)) { options.onPostBody(); } }; $(selector).bootstrapTable(defaults); } })(jQuery);