gpt4 book ai didi

jqgrid - 自定义 jQGrid 发布操作

转载 作者:行者123 更新时间:2023-12-04 14:18:20 25 4
gpt4 key购买 nike

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

我想再添加一个自定义内联操作,我们称之为 ToggleOnline。在此操作中,我想将网格的所有单元格发布到 Controller 。基本上它是一种编辑操作,但它会为某些列设置一些默认值。

内嵌按钮是这样添加的:

{ 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:
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)来处理服务器上的此操作。

最佳答案

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

enter image description here

对实现的一些意见。 Action 格式化程序在 div 内添加“ Action 按钮”元素。每个“ Action 按钮”都有如下的 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>

所以为了让自定义按钮的外观接近原始的“ Action 按钮”,我在 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'更改自定义按钮的图标并更改 click的代码。事件句柄你需要什么 我展示了如何获得rowid。使用它你可以使用 getRowData方法来获取包含该行的另一个单元格。

更新:当前版本 free jqGrid支持实现自定义按钮的简单方法。见 the demo .

关于jqgrid - 自定义 jQGrid 发布操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6622779/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com