如何自定义free-jqgrid工具提示css样式

Question

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

设置.ui-tooltip对free-jqgrid工具提示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",
          inCharge: "1"

        },
        {
          id: 40,
          firstName: "Joe",
          lastName: "Biden",
          inCharge: "1"

        },
        {
          id: 50,
          firstName: "Emmanuel",
          lastName: "Macron",
          inCharge: "1"

        },
                {
          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",
          width: 300,
          editable: true
        },
        {
          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工具提示的正确类？

无论如何，我想知道如何定义它的风格。

提前谢谢。

Answer 1

你需要附加工具提示插件才能得到你想要的东西。

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

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

这样你的代码就可以工作了。