添加行自定义按钮jqGrid的? [英] Adding a custom button in row in jqGrid?
问题描述
我想作一个简单的表,其中包含一列自定义按钮。当按下按钮,我想弹出一个警告对话框。我看过这方面的一些职位,例如: <一href="http://stackoverflow.com/questions/1384685/how-do-you-add-scripts-to-custom-buttons-on-rows-in-jqgrid">this帖子 和 这等后,我不明白为什么我的code不工作。绘制箭头,但是将它们推没有效果。
I want to make a simple table that contains a custom button in a row. When the button is pushed, I want to pop up an 'alert' box. I have read some posts on this, for example: this post and this other post, and I don't understand why my code is not working. The buttons are drawn, but pushing them has no effect.
我这里描述的三次尝试。
I have three attempts described here.
版本1.按一下按钮永远不会触发:
Version 1. The button click never fires:
$(document).ready(function(){
jQuery("#simpletable").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status}
],
data:[
{'A':2,'B':100,'status':"<button onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
{'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
],
caption: "Demo of Custom Clickable Button in Row",
viewrecords:true,
editurl:'clientArray',
});
});
的Html code:
Html Code:
<table id="simpletable"></table>
编辑12年8月2日 - 我因为我原来的职位学到了一些东西,在这里我描述了两个多尝试
EDIT 8/2/12 -- I've learned some things since my original post and here I describe two more attempts.
2版:我用onCellSelect。这工作,但它不会让我把多个按钮中的单元格。此外,我使用的意见这篇文章的一个建议的格式选项做了code更好。
Version 2: I use onCellSelect. This works, but it would not allow me to put more than one button in a cell. Additionally, I made the code nicer by using the format option suggested by one of the comments to this post.
function status_button_maker_v2(cellvalue, options, rowObject){
return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};
jQuery("#simpletablev2").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v2}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
onCellSelect:function(rowid,icol,cellcontent,e){
if (icol==2){
alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
}else{
return true;
}
},
caption: "Demo of Custom Clickable Button in Row, ver 2",
viewrecords:true,
}); //end simpletablev2
标记:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
第3版:我试图用解决<一个href="http://stackoverflow.com/questions/2774018/call-a-function-from-a-button-that-is-created-during-jqgrids-gridcomplete-event?answertab=active#tab-top">w4ik's帖子,使用。对,而不是去precated.live。这将导致按钮点击开火,但我不知道如何来检索ROWID。 w4ik也挣扎与此,他发帖说,他的工作了,但不知道如何,他做到了。我能得到的最后一排选择,但总是引用选择,因为按钮的优先级更高的previous行。
Version 3: I tried to use the solution to w4ik's post, using ".on" instead of deprecated ".live". This causes the button click to fire, but I don't know how to retrieve the rowid. w4ik also struggled with this, and he posted that he worked it out, but not how he did it. I can get the last row selected, but this will always refer to the previous row selected because the button is taking priority.
我会preFER这个解决方案,如果我能得到它的工作。
I would prefer this solution if I could get it to work.
jQuery("#simpletablev3").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v3}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
caption: "Demo of Custom Clickable Button in Row, ver 3",
viewrecords:true,
onSelectRow: function(){},
gridComplete: function(){}
}); //end simpletablev3
$(".ver3_statusbutton").on(
{
click: function(){
//how to get the row id? the following does not work
//var rowid = $("#simpletablev3").attr('rowid');
//
//it also does not work to get the selected row
// this is always one click behind:
//$("#simpletablev3").trigger("reloadGrid");
rowid = $("#simpletablev3").getGridParam('selrow');
alert("button pushed! rowid = "+rowid);
}
});
标记:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
总之,我挣扎着让我的按钮的问题推的在合适的时间的。在第1版,该行被选中,按钮永远不会被推开。版本2根本不使用键 - 它只是处理细胞的点击。优化版本3获取点击按钮行选择(错误的命令)之前。
In summary, I'm struggling with the issue of getting my button to be pushed at the right time. In version 1, the row gets selected and the button never gets pushed. Version 2 does not use the "button" at all -- It just handles the cell click. Verion 3 gets the button click before the row select (wrong order).
任何帮助将是AP preciated!
Any help would be appreciated!
推荐答案
您可以在这里用行动格式,每行,使编辑和删除按钮,在这样的formatOptions为假:
You can use action formatter here with each row and make edit and delete button as false in formatOptions like this:
formatoptions: {editbutton:false,delbutton:false}}
和跟随这两个演示:
http://www.ok-soft-gmbh.com/jqGrid/ Admin3.htm
http://ok-soft-gmbh.com/jqGrid/TestSamle/ Admin1.htm
和对这些自定义按钮单击事件显示提醒:
And on click event of these custom buttons show your alert:
修改
var getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
function () {
var iCol = getColumnIndexByName(grid, 'act');
$(this).find(">tbody>tr.jqgrow>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-right": "5px", float: "left", cursor: "pointer"})
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
}
如果您选中此code,我试图找出索引值通过给列名作为'行为,您可以通过给不同的列名得到索引任何其他列。
If you check this code, I'm trying to find out index value by giving column name as 'act', you can get index on any other column by giving a different column name.
var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button
和写你的单击事件这个按钮。
and write your click event for this button.
让我知道这对你的作品或没有。
Let me know if this works for you or not.
这篇关于添加行自定义按钮jqGrid的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!