如何为 jquery-bootgrid 设置工具提示答案

【问题标题】：How to set tooltips for jquery-bootgrid如何为 jquery-bootgrid 设置工具提示
【发布时间】：2015-06-21 00:25:09
【问题描述】：

这是我第一次实现 jquery-bootgrid。我已经使用以下代码成功实现了它。但问题是，

(1) 我无法为表头分配工具提示。

(2)如何为每列分配宽度？

感谢您的建议。

<table id="grid-basic" class="table table-striped table-bordered table-hover">
<thead>
    <tr>
        <th id="umrn" data-column-id="umrn" data-sortable="true" title="UMRN Number" data-toggle="tooltip" data-placement="top" title="Tooltip on top">UMRN</th>
        <th data-column-id="mandate_status" data-sortable="true" title="Mandate Status">Status</th>
        <th data-column-id="mandate_date" data-sortable="true">Date</th>
        <th data-column-id="payment_type"  data-sortable="true">Payment type</th>
        <!-- <th data-column-id="currency" data-sortable="true"> Currency</th> -->
        <th data-column-id="fixed_amount" data-sortable="true"> Fixed amount</th>
        <th data-column-id="max_amount" data-sortable="true"> Max amount</th>
        <!-- <th data-column-id="debtor_bank" data-sortable="true"> Debtor bank</th> -->
        <th data-column-id="creditor_bank" data-sortable="true"> Creditor bank</th>
        <th data-column-id="commands" data-formatter="commands" data-sortable="false">Options</th>
    </tr>
</thead> 
</table>
<script type="text/javascript">
  var _globalObj = {{ json_encode(array('_token'=> csrf_token())) }}
</script>

<script type="text/javascript">
  $(function () {
     $('[data-toggle="tooltip"]').tooltip();
     $('#example').tooltip(options)
  })
var token = _globalObj._token;
var grid = $("#grid-basic").bootgrid({
caseSensitive:false,
ajax: true,
post: function ()
{
    return {
        id: "b0df282a-0d67-40e5-8558-c9e93b7befed",_token:token
    };
},
url: 'getAllMandates',
formatters: {
    "commands": function(column, row)
    {
        return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " ;
    }
}
}).on("loaded.rs.jquery.bootgrid", function()
{   

/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e)
{
    //alert("You pressed edit on row: " + $(this).data("row-id"));
    location.assign("mandate/"+$(this).data("row-id"));
}).end().find(".command-delete").on("click", function(e)
{
  //  alert("You pressed delete on row: " + $(this).data("row-id"));
  /*
  var recID = $(this).data("row-id");
            $.ajax({
              url: "delete_user",
              data : {'rec_id' : recID},
            }).done(function( msg ) 
            {
                loginDeleteSuccess(msg);
            }) */
});
});

【问题讨论】：

我也无法让引导工具提示在 jquery-bootgrid 内的元素内工作，因为 HTML 代码由 jquery-bootgrid 重写。

标签： javascript jquery html twitter-bootstrap laravel-4

【解决方案1】：

您必须在其中添加工具提示初始化命令

).on("loaded.rs.jquery.bootgrid", function()
{   
    $('[data-toggle="tooltip"]').tooltip();
}

它对我有用。

【讨论】：

【解决方案2】：

对于您的问题 #2：要设置列宽，请在 <th> 标记中使用 data-width="10"（其中 10 是您所需的像素宽度，我认为它也适用于 %）

【讨论】：

【解决方案3】：

当您使用 Bootstrap 时（假设您没有使用 jQuery UI，因为它们的工具提示一直存在冲突）。

您可以使用“选择器”选项在“所需”元素可用时动态初始化工具提示，因为在创建/初始化 DOM 时它可能不可用。

这样你就可以编写类似的代码

$(function() {
    $("table").tooltip({
        selector: "[data-toggle='tooltip']"
    });
});

【讨论】：