自定义jQGrid发布操作 [英] Custom jQGrid post action
问题描述
我有很多使用jQGrid进行内联编辑的示例 http://ok- soft-gmbh.com/jqGrid/TestSamle/Admin.htm 有两个自定义操作编辑"和删除".
I have an great sample of inline edit with jQGrid http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm There is two custom actions Edit and Delete.
我想再添加一个自定义的内联Action，我们称之为ToggleOnline.在此操作中，我想将网格的所有单元格发布到控制器.基本上，这是一种编辑操作，但会为某些列设置一些默认值.
I want to add one more custom inline Action, lets call it ToggleOnline. On this action i want to post all cells of the grid to the controller. Basically it will be kind of of edit action but it will set some default values to some columns.
这样添加了嵌入式按钮:
The inline buttons was added like that:
{ 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
}
}
要添加我正在使用事件loadComplete:
than to add custom additional button i was using event 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 })
}
}
，但是自定义按钮根本没有出现.而且我还需要某种方式发布行数据，还需要指定自定义操作名称(oper)来处理服务器上的该操作.
but the custom button does not appearing at all. And also i need somehow to post row data and also i need to specify custom action name(oper) to handle this action on server.
推荐答案
我为您更新了该演示.现在， http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm 完成您需要的工作. (我从代码中删除了第二个网格，以使代码保持较小):
I updated the demo for you. Now the http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm do what you need. (I removed from the code the second grid to hold the code smaller):
对实现的一些评论.操作格式化程序在div内添加操作按钮"元素.每个操作按钮"都具有如下所示的HTML标记
Some comments to the implementation. The actions formatter add "action buttons" elements inside a div. Every "action button" has the HTML markup like the following
<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>
因此，为了使自定义按钮的外观与原始的操作按钮"接近，我在loadComplete内部执行以下操作:
So to have the look of the custom button close to the original "action buttons" I do inside of loadComplete to following:
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'更改自定义按钮的图标，并更改click事件句柄的代码.我已经说明了如何获取rowid.使用它，您可以使用getRowData方法来包含该行的另一个单元格.
You can change the icon of the custom button from 'ui-icon-document' and change the code of the click event handle what you need I showed how you can get the rowid. Using it you can use getRowData method to get contain of another cells of the row.
更新:免费jqGrid 的当前版本支持简单实现自定义按钮的方法.参见演示.
UPDATED: The current version of free jqGrid supports easy way to implement custom buttons. See the demo.
这篇关于自定义jQGrid发布操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
