[英]How to set tooltips for jquery-bootgrid
這是我第一次實現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);
}) */
});
});
您必須在以下位置添加工具提示init命令
).on("loaded.rs.jquery.bootgrid", function()
{
$('[data-toggle="tooltip"]').tooltip();
}
這個對我有用。
對於您的問題2:要設置列寬,請在<th>
標記中使用data-width="10"
(其中10是您希望的以像素為單位的寬度,我認為它也可以與%一起使用)
當您使用Bootstrap時(並假設您沒有使用jQuery UI,因為它們的工具提示會發生沖突)。
每當“所需”元素可用時,都可以使用“選擇器”選項動態初始化工具提示,因為在創建/初始化DOM時它可能不可用。
所以你可以像這樣寫代碼
$(function() {
$("table").tooltip({
selector: "[data-toggle='tooltip']"
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.