1. 程式人生 > >bootgrid自定義,bootgrid單選BUG

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);
        }
      });