添加行自定义按钮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屋！
