bootgrid自定义,bootgrid单选BUG

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