在 jqgrid 行鼠标悬停上显示图标

Question

我如何在 jqGrid 的悬停行上显示图标（添加、编辑图标等）并通过单击图标我想调用 JS 函数等。我想在每一行上显示图标。

下面是我的jqGrid

$grid.jqGrid({
                url: '@Url.Action("GetOrganizationList", "Organization")',
                datatype: "json",
                height: 'auto',
                colNames: ['@objLocalizer["organization_organizationID"]','@objLocalizer["OrganizationsName"]', '@objLocalizer["ParentOrganization"]', '@objLocalizer["Email"]', '@objLocalizer["ContactPhone"]', '@objLocalizer["CurrencyID"]','@objLocalizer["CreatedByorg"]','@objLocalizer["CreatedOnorg"]']
                colModel: [{
                    name: 'OrganizationID',
                    index: 'OrganizationID',
                    sortable: true,
                    sorttype: 'number',
                    formatter: addLink,
                    align: 'center'
                },{
                    name: 'OrganizationName',
                    index: 'OrganizationName',
                    sortable: true,
                    sorttype: 'text',

                }, {
                    name: 'PratentOrganization',
                    index: 'PratentOrganization',
                    sortable: true,
                    sorttype: 'text',
                    align: 'left'
                },
                {
                    name: 'ContactEmail',
                    index: 'ContactEmail',
                    sortable: true,
                    sorttype: 'text',
                    hidden: true,
                },
                {
                    name: 'ContactPhone',
                    index: 'ContactPhone',
                    sortable: true,
                    sorttype: 'text',
                    hidden: true,

                },
                  {
                      name: 'CurrencyID',
                      index: 'CurrencyID',
                      sortable: true,
                      sorttype: 'text',
                      hidden: true,
                  },
                    {
                        name: 'UserName',
                        index: 'UserName',
                        sortable: true,
                        sorttype: 'text',
                        align: 'left'

                    },
                {
                    name: 'WhenCreated',
                    index: 'WhenCreated',
                    sortable: true,
                    sorttype: 'text',
                    formatter: 'date',
                    align: 'center'
                }
                ],

                cmTemplate: { autoResizable: true, editable: true },
                autoResizing: { compact: true, resetWidthOrg: true },
                iconSet: "fontAwesome",
                rowNum: 10,
                rowList: [5, 10, 20, "10000:All"],
                viewrecords: true,
                sortable: true,
                toppager: false,
                pager: true,
                rownumbers: false,
                sortname: "invdate",
                sortorder: "desc",
                pager: '#pjqgridOrg',
                pagerRightWidth: 150,
                loadonce: true,
                multiselect: false,
                hidegrid: false,
                gridComplete: function () {

                },

            }).jqGrid("navGrid")
            .jqGrid("inlineNav")
            .jqGrid("filterToolbar");

第一列的格式化程序'OrganizationID'

 function addLink(cellvalue, options, rowObject) {

        var validrow = rowObject.Organization;

        if (validrow != undefined) {
            return "<a href='#' style='height:25px;width:120px;' type='button'  onclick=CallActionMethod(" + "'" + OrganizationID + "'" + ")>" + OrganizationID + "</a>";
        } else {
            return "<a href='#' style='height:25px;width:120px;' type='button'  onclick=CallActionMethod(" + "'" + rowObject['OrganizationID'] + "'" + ")>" + rowObject['OrganizationID'] + "</a>";
        }
    }

下面是屏幕截图它看起来如何

我想在第一列中显示图标，即“OrganizationID”列。

Answer 1

尝试在行 .hover() 事件上添加自定义按钮，例如，

$("tr").hover(function() {
    $(this).find('td:first').append($("<span class='custom-btns'><button>Add</button><button>Delete</button></span>"));
  }, function() {
    $(this).find(".custom-btns").remove();
});

片段

jQuery("#list").jqGrid({
  datatype: "local",
  height: 250,
  colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
  colModel: [{
      name: 'id',
      index: 'id',
      width: 200,
      sorttype: "int"
    },
    {
      name: 'invdate',
      index: 'invdate',
      width: 90,
      sorttype: "date"
    },
    {
      name: 'name',
      index: 'name',
      width: 100
    },
    {
      name: 'amount',
      index: 'amount',
      width: 80,
      align: "right",
      sorttype: "float"
    },
    {
      name: 'tax',
      index: 'tax',
      width: 80,
      align: "right",
      sorttype: "float"
    },
    {
      name: 'total',
      index: 'total',
      width: 80,
      align: "right",
      sorttype: "float"
    },
    {
      name: 'note',
      index: 'note',
      width: 150,
      sortable: false
    }
  ],
});
var mydata = [{
    id: "1",
    invdate: "2007-10-01",
    name: "test",
    note: "note",
    amount: "200.00",
    tax: "10.00",
    total: "210.00"
  },
  {
    id: "2",
    invdate: "2007-10-02",
    name: "test2",
    note: "note2",
    amount: "300.00",
    tax: "20.00",
    total: "320.00"
  },
  {
    id: "3",
    invdate: "2007-09-01",
    name: "test3",
    note: "note3",
    amount: "400.00",
    tax: "30.00",
    total: "430.00"
  },
  {
    id: "4",
    invdate: "2007-10-04",
    name: "test",
    note: "note",
    amount: "200.00",
    tax: "10.00",
    total: "210.00"
  },
  {
    id: "5",
    invdate: "2007-10-05",
    name: "test2",
    note: "note2",
    amount: "300.00",
    tax: "20.00",
    total: "320.00"
  },
  {
    id: "6",
    invdate: "2007-09-06",
    name: "test3",
    note: "note3",
    amount: "400.00",
    tax: "30.00",
    total: "430.00"
  },
  {
    id: "7",
    invdate: "2007-10-04",
    name: "test",
    note: "note",
    amount: "200.00",
    tax: "10.00",
    total: "210.00"
  },
  {
    id: "8",
    invdate: "2007-10-03",
    name: "test2",
    note: "note2",
    amount: "300.00",
    tax: "20.00",
    total: "320.00"
  },
  {
    id: "9",
    invdate: "2007-09-01",
    name: "test3",
    note: "note3",
    amount: "400.00",
    tax: "30.00",
    total: "430.00"
  }
];
for (var i = 0; i <= mydata.length; i++)
  jQuery("#list").jqGrid('addRowData', i + 1, mydata[i]);

$("#list tr").hover(function() {
  $(this).find('td:first').append($("<span class='custom-btns'><button>Add</button><button>Delete</button></span>"));
}, function() {
  $(this).find(".custom-btns").remove();
}).on('click', '.custom-btns button', function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<table id="list"></table>

如果您的数据是动态加载的，则使用 gridComplete event。

在 jqgrid 行鼠标悬停上显示图标

Show icons on jqgrid row mouse hover

jquery

jqgrid

free-jqgrid