bootgrid自定義,bootgrid單選BUG
阿新 • • 發佈:2019-02-10
版本:1.3.1
有些屬性可以直接通過data-形式修改,比如查詢按鈕的顯示隱藏:
<table id="uploadFileList" class="table table-condensed table-hover table-striped" data-toggle="bootgrid"
data-ajax="true" data-url="getFileList" data-navigation=2>
設定data-navigation=2會隱藏自帶的查詢及列選擇按鈕。如果設定為0,會隱藏所有按鈕,包括分頁按鈕。有些屬性可以直接在HTML中以data-的形式覆蓋,有些屬性則不可以,具體可以在原始碼1172中可以看到:
// note: The following properties should not be used via data-api attributes
所以,有些屬性就不要浪費時間想怎麼覆蓋了,直接修改原始碼吧,比如labels,設定各種提示資訊的,
本來想通過data-形式修改的,浪費了好多時間也沒實現,只能通過修改原始碼來實現了。當然,你要是硬要這
樣,通過修改原始碼也可以實現,我直接修改配置,這樣簡單點:
line1296:
labels: { all: "All", infos: "Showing {{ctx.start}} to {{ctx.end}} of {{ctx.total}} entries", loading: "Loading...", noResults: "No results found!", refresh: "Refresh", search: "Search" }
修改為
labels: {
all: "全部",
infos: "顯示 {{ctx.start}} 到 {{ctx.end}} 條記錄,總共 {{ctx.total}} 條記錄",
loading: "載入中...",
noResults: "沒有記錄!",
refresh: "重新整理",
search: "查詢"
}
修改完後效果如下:
如果需要自動換行,需要在對應的列上加上屬性data-css-class="breakwordall",類breakwordall的定義如下:
.breakwordall{
white-space:normal !important;
}
需要加上important標記,因為bootgrid預設的css如下:
.bootgrid-table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
即不自動換行,如果超出則顯示...,所以要通過important把它覆蓋掉。bootgrid設定為單選中,點選checkbox會無效,bootgrid程式碼如下:
function registerRowEvents(tbody)
{
var that = this,
selectBoxSelector = getCssSelector(this.options.css.selectBox);
if (this.selection)
{
//點選checkbox時的事件處理
tbody.off("click" + namespace, selectBoxSelector)
.on("click" + namespace, selectBoxSelector, function(e)
{
e.stopPropagation();
var $this = $(this),
id = that.converter.from($this.val());
if ($this.prop("checked"))
{
that.select([id]);//這裡呼叫了select方法
}
else
{
that.deselect([id]);
}
});
}
............
}
//select 方法如下:
Grid.prototype.select = function(rowIds)
{
if (this.selection)
{
rowIds = rowIds || this.currentRows.propValues(this.identifier);
var id, i,
selectedRows = [];
while (rowIds.length > 0 && !(!this.options.multiSelect && selectedRows.length === 1))
{
id = rowIds.pop();
if ($.inArray(id, this.selectedRows) === -1)
{
for (i = 0; i < this.currentRows.length; i++)
{
if (this.currentRows[i][this.identifier] === id)
{
selectedRows.push(this.currentRows[i]);
this.selectedRows.push(id);
break;
}
}
}
}
if (selectedRows.length > 0)
{
var selectBoxSelector = getCssSelector(this.options.css.selectBox),
selectMultiSelectBox = this.selectedRows.length >= this.currentRows.length;
i = 0;
while (!this.options.keepSelection && selectMultiSelectBox && i < this.currentRows.length)
{
selectMultiSelectBox = ($.inArray(this.currentRows[i++][this.identifier], this.selectedRows) !== -1);
}
this.element.find("thead " + selectBoxSelector).prop("checked", selectMultiSelectBox);
if (!this.options.multiSelect)
{//這裡觸發了所有已check的checkbox的click方法
this.element.find("tbody > tr " + selectBoxSelector + ":checked")
.trigger("click" + namespace);
}
for (i = 0; i < this.selectedRows.length; i++)
{
this.element.find("tbody > tr[data-row-id=\"" + this.selectedRows[i] + "\"]")
.addClass(this.options.css.selected)._bgAria("selected", "true")
.find(selectBoxSelector).prop("checked", true);
}
this.element.trigger("selected" + namespace, [selectedRows]);
}
}
return this;
};
注意紅色部分的程式碼(紅色沒效果,看註釋吧),在沒有多選的情況下,bootgrid會觸發所有已check的checkbox的click事件,再次點選之後,相當於點了
兩次checkbox,所以checkbox狀態又變成未選中了。
把select的紅色程式碼修改如下,可以解決這個問題:
var lastId = this.selectedRows[this.selectedRows.length-1];
var checkboxes = this.element.find("tbody > tr " + selectBoxSelector + ":checked");
for (i = 0; i < checkboxes.length; i++) {
var $checkbox = $(checkboxes[i]);
if (lastId != $checkbox.val()) {//如果不是本次點選的checkbox,才觸發click事件
$checkbox.trigger("click" + namespace);
}
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
controlSidebarOptions: {
//Which button should trigger the open/close event
toggleBtnSelector: "[data-toggle='control-sidebar']",
//The sidebar selector
selector: ".control-sidebar",
//Enable slide over content
slide: true
}
var o = $.AdminLTE.options.controlSidebarOptions;
//Get the sidebar
var sidebar = $(o.selector);
//The toggle button
var btn = $(o.toggleBtnSelector);
//Listen to the click event
btn.on('click', function (e) {
e.preventDefault();
//If the sidebar is not open
if (!sidebar.hasClass('control-sidebar-open')
&& !$('body').hasClass('control-sidebar-open')) {
//Open the sidebar
_this.open(sidebar, o.slide);
} else {
_this.close(sidebar, o.slide);
}
});