如何自定义 free-jqgrid tooltip css 样式

问题描述

我想更改默认的 free-jqgrid 工具提示 css 样式。

设置 .ui-tooltip 对 free-jqgrid tooltip css 样式没有影响，如以下代码片段所示。

$(function() {

  var data = [{
          id: 10,firstName: "Angela",lastName: "Merkel",inCharge: "1"
        },{
          id: 20,firstName: "Vladimir",lastName: "Putin",inCharge: "1"

        },{
          id: 30,firstName: "Boris",lastName: "Johnson",{
          id: 40,firstName: "Joe",lastName: "Biden",{
          id: 50,firstName: "emmanuel",lastName: "Macron",{
          id: 60,firstName: "Mario",lastName: "Draghi",inCharge: "1"

        }
      ];
 
  
  $("#grid").jqgrid({  
      datatype: "local",data: data,colModel: [{
          name: "id",hidden: true,editable: false,},{
          name: "firstName",width: 300,editable: true
        },{
          name: "lastName",{
          name: "inCharge",width: 100,editable: true,formatter: "checkBox",edittype: "checkBox",editoptions: {
            value: "1:0" 
          }
        }
      ],pager: true,pgbuttons: false,pginput: false,viewrecords: true,autowidth: true,shrinkToFit: false,// Shows horizontal scroll bar
      cmTemplate: {align: 'center',autoResizable: true,autoResizing: {compact: true}},gridview: true,})
    .jqgrid('navGrid',{
      edittext: 'Edit',addtext: 'Add',deltext: 'Del',search: false,view: true,viewtext: 'View',refresh: true,refreshtext: 'Refresh'
    });    
});

.ui-tooltip {
   border: 1px solid blue;
   background: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>

<table id="grid"></table>

.ui-tooltip 类是否适合更改以设置 jqgrid 工具提示？

无论如何，我想知道定义其风格的正确方法。

提前致谢。

解决方法

您需要附加工具提示插件才能获得所需内容。

通常这是在 gridComplete 事件中完成的。在您的示例中，只需添加以下代码：

   $("#grid").jqGrid({  
   ....
       gridComplete : function() {
           $(this).tooltip();
       }
   ...
   });

并且您的代码将起作用。