自定义jQGrid后操作

我有一个很好的示例与jQGrid内联编辑http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm有两个自定义操作编辑和删除。

我想添加一个更多的自定义内联行动，让我们称之为ToggleOnline。 在这个动作中，我想将网格的所有单元格发布到控制器。 基本上这将是一种编辑行动，但它会设置一些默认值的一些列。

内联button是这样添加的：

{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing. delOptions: myDelOptions } } 

比添加自定义的附加button，我使用事件loadComplete:

 loadComplete: function(){ debugger; var ids = jQuery("#Grid1").getDataIDs(); for(var i=0;i<ids.length;i++){ var cl = ids[i]; custom = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#Grid1').editRow(" + cl + "); />"; jQuery("#Grid1").setRowData(ids[i], { act: custom }) } } 

但自定义button根本不显示。 而且我也需要以某种方式发布行数据，我也需要指定自定义操作名称（操作）来处理这个动作在服务器上。

Answer 1

我为你更新了演示。 现在http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm做你所需要的。; （我从代码中删除了第二个网格来保持代码更小）：

一些意见的实施。 动作格式化程序在div中添加“动作button”元素。 每个“动作button”都有如下的HTML标记

 <div style="margin-left: 5px; float: left;" class="ui-pg-div ui-inline-del" onmouseover="jQuery(this).addClass('ui-state-hover');" title="Delete selected row" onmouseout="jQuery(this).removeClass('ui-state-hover');" onclick="$.fn.fmatter.rowactions('10','List1','del',0);"> <span class="ui-icon ui-icon-trash"></span> </div> 

所以为了让自定义button看起来接近原来的“action buttons”，我在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() { $("<div>", { 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('<span class="ui-icon ui-icon-document"></span>') .appendTo($(this).children("div")); }); } 

哪里

 var getColumnIndexByName = function(grid,columnName) { var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length; for (; i<l; i+=1) { if (cm[i].name===columnName) { return i; // return the index } } return -1; }; 

您可以从“ui-icon-document”更改自定义button的图标，并更改您需要的click事件处理代码。我向您展示了如何获取rowid。 使用它可以使用getRowData方法来获取行的另一个单元格的包含。

更新： 免费jqGrid的当前版本支持简单的方法来实现自定义button。 看演示 。