版本: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);
}
});