jqgrid mouseover css,自定义jQGrid发布操作

我为您更新了演示。现在，http：//ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm可以满足您的需求。(我从代码中删除了第二个网格，以使代码更小)：

在此处输入图片说明

对实施的一些评论。动作格式化程序在div内添加“动作按钮”元素。每个“操作按钮”都有如下的HTML标记

class="ui-pg-div ui-inline-del"

οnmοuseοver="jQuery(this).addClass('ui-state-hover');"

title="Delete selected row"

οnmοuseοut="jQuery(this).removeClass('ui-state-hover');"

οnclick="$.fn.fmatter.rowactions('10','List1','del',0);">

因此，为了使自定义按钮的外观接近原始的“操作按钮”，我在loadComplete以下步骤中进行了操作：

loadComplete: function () {

var grid = $(this),

iCol = getColumnIndexByName(grid,'act'); // 'act' - name of the actions column

grid.children("tbody")

.children("tr.jqgrow")

.children("td:nth-child("+(iCol+1)+")")

.each(function() {

$("

",

{

title: "Custom",

mouseover: function() {

$(this).addClass('ui-state-hover');

},

mouseout: function() {

$(this).removeClass('ui-state-hover');

},

click: function(e) {

alert("'Custom' button is clicked in the rowis="+

$(e.target).closest("tr.jqgrow").attr("id") +" !");

}

}

).css({"margin-left": "5px", float:"left"})

.addClass("ui-pg-div ui-inline-custom")

.append('')

.appendTo($(this).children("div"));

});

}

哪里

var getColumnIndexByName = function(grid,columnName) {

var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;

for (; i

if (cm[i].name===columnName) {

return i; // return the index

}

}

return -1;

};

您可以从“ ui-icon-document”更改自定义按钮的图标，并更改click事件句柄的代码(我已向您展示了如何获取rowid)。使用它，您可以使用getRowData方法来包含该行的其他单元格。

更新：当前版本的免费jqGrid支持实现自定义按钮的简便方法。