Блог

Я пытаюсь использовать очень простую таблицу jquery bootgrid с атрибутом caption, чтобы сделать заголовок залипающим при прокрутке.

 <table id="grid" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th caption="ID" data-column-id="id" data-type="numeric"></th>
            <th caption="Sender" data-column-id="sender"></th>
            <th caption="Received" data-column-id="received" data-order="desc"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
  

После привязки данных отображаемая таблица выглядит как показано ниже, и привязка данных в порядке.

 <table id="grid" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric"></th>
                <th data-column-id="sender"></th>
                <th data-column-id="received" data-order="desc"></th>
            </tr>
        </thead>
        <tbody>data rows goes here.                  
        </tbody>
    </table>
  

Есть предложения, как я могу сообщить jquery-bootgrid прекратить удаление атрибута caption?

Большое спасибо.

Наконец-то я разобрался с этим, и это исправлено.

В jquery.bootgrid.js файл, найдите метод loadColumns и включите атрибут caption, как указано ниже.

Шаг 1: Изменение в методе loadColumns()

 function loadColumns()
    {
        var that = this,
            firstHeadRow = this.element.find("thead > tr").first(),
            sorted = false;

        /*jshint -W018*/
        firstHeadRow.children().each(function ()
        {
            var $this = $(this),
                data = $this.data(),
                column = {
                    caption: $this[0].attributes.caption.value,//Find better way
                    id: data.columnId,
....
...
}
  

Шаг 2: Изменения в методе renderTableHeader()

 function renderTableHeader()
{ ....
  ....

$.each(this.columns, function (index, column)
    {
        if (column.visible)
        {

            //console.log(column.caption);
            var sortOrder = that.sortDictionary[column.id],
                iconCss = ((sorting amp;amp; sortOrder amp;amp; sortOrder === "asc") ? css.iconUp :
                    (sorting amp;amp; sortOrder amp;amp; sortOrder === "desc") ? css.iconDown : ""),
                icon = tpl.icon.resolve(getParams.call(that, { iconCss: iconCss })),
                align = column.headerAlign,
                cssClass = (column.headerCssClass.length > 0) ? " "   column.headerCssClass : "",
                caption = column.caption; //caption passed to template 
 ....
 ....   }
  

Шаг 3: Изменения в шаблоне headercell.

Найдите эту переменную headercell и добавьте атрибут caption в шаблон.

 headerCell: "<th data-column-id="{{ctx.column.id}}" caption="{{ctx.column.caption}}"  class="{{ctx.css}}" style="{{ctx.style}}"><a href="javascript:void(0);" class="{{css.columnHeaderAnchor}} {{ctx.sortable}}"><span class="{{css.columnHeaderText}}">{{ctx.column.text}}</span>{{ctx.icon}}</a></th>",
  

Надеюсь, это кому-то поможет.