具有标题属性的 Jquery Bootgrid 表在数据绑定后删除标题属性答案

【问题标题】：Jquery Bootgrid table with caption attribute is removing caption attribute after data bind具有标题属性的 Jquery Bootgrid 表在数据绑定后删除标题属性
【发布时间】：2019-03-25 14:35:31
【问题描述】：

我正在尝试一个非常简单的带有标题属性的 jquery bootgrid 表，以使标题在滚动时保持粘性。

<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，停止删除标题属性？

非常感谢。

【问题讨论】：

标签： jquery-bootgrid

【解决方案1】：

我终于想通了，它已经修复了。

在 jquery.bootgrid.js 文件中，找到 loadColumns 方法并包含下面提到的标题属性。

第 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,
....
...
}

第二步：改变 renderTableHeader() 方法

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

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

            //console.log(column.caption);
            var sortOrder = that.sortDictionary[column.id],
                iconCss = ((sorting && sortOrder && sortOrder === "asc") ? css.iconUp :
                    (sorting && sortOrder && 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 变量并在模板中添加标题属性。

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>",

希望这对某人有所帮助。

【讨论】：