从JQgrid按钮获取行数据 [英] Get row data from JQgrid button
问题描述
这是我填写JQgrid的方式:
Here is how I fill the JQgrid:
jQuery("#responseMessages").jqGrid(
'addRowData',
i+1,
{
distance:messages[i].distance,
age:messages[i].age,
message:messages[i].message,
messageId:messages[i].messageId,
report:reportBtn
}
);
现在reportBtn实际上是HTML标记，因此它在最后一列中放置了一个按钮，让用户报告消息，这是该标记:
Now the reportBtn is actually HTML markup so it places a button in the last column, letting the user report a message, here's the markup for that:
var reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' onclick=\"\" />";
当我单击报告时，我希望它从它所在的行中为我提供messageId(messageId是隐藏的列).
When I click report, I want it to give me the messageId from the row that it is in (messageId is the hidden column).
我该怎么做?
谢谢！
function GetMessages()
{
$.ajax(
{
type: "POST",
url: "<%= Url.Action("GetMessages", "Home") %>",
success: function (result) {
var messages = result;
if (messages.length == 0)
{
$('#noMessagesAlert').show();
}
else
{
$('#noMessagesAlert').hide();
createGrid(messages);
}
},
error: function (error) {
}
});
}
function createGrid(messages)
{
var myGrid =
jQuery("#responseMessages"),
reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />",
mydata = messages,
getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
myGrid.jqGrid({
data: mydata,
datatype: 'local',
height: 'auto',
colModel: [
{ name:'distance', index:'distance', label:'Distance', width:100 },
{ name:'age', index:'age', label:'Age', width:75 },
{ name:'message', index:'message', label:'Message', width:500 },
{ name:'messageId', index:'messageId', key:true, hidden:true },
{ name:'report', index:'report', label: 'Report', width:100,
formatter:function() { return reportBtn; } }
],
loadComplete: function() {
var i=getColumnIndexByName(myGrid,'report');
// nth-child need 1-based index so we use (i+1) below
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) {
var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
var x=window.confirm("Are you sure you want to report this message?")
if (x)
{
reportMessage(tr[0].id);
}
e.preventDefault();
});
},
rowNum:25,
rowList:[10,25,50],
pager: '#pager'
});
}
所以这是代码所采用的路径.通过单击按钮调用GetMessages，然后如果返回任何内容，则调用createGrid并传递返回的消息列表.
So here's the path the code takes. GetMessages gets called from a button click, and then if it returns anything, createGrid gets called passing in the returned list of messages.
这是我第一次这样做的完美作品.现在，如果我再次单击该按钮，则网格不会更新其数据(应该有所不同，因为从服务器返回的数据不同).只是保持不变.
This works perfect the first time I do it. Now, if I just go and click that same button again, the grid doesn't update it's data (which should be different, because different data is coming back from the server). It just stays the same.
为什么?
推荐答案
您可以通过多种方式实现您的要求.我建议使用不引人注目的JavaScript 样式.此外，由于您将addRowData与i+1值一起使用，我怀疑您在循环中填充了网格，这对于大量的行而言可能非常慢.最好是使用jqGrid的data参数
You can implement your requirements in many way. I suggest use to use the way which I described in the answer. It use unobtrusive JavaScript style. Moreover because you use addRowData with i+1 value I suspect that you fill the grid in the loop which can be very slow with the large number of rows. The best is to use data parameter of jqGrid
var myGrid = jQuery("#list"),
reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />",
mydata = [
{messageId:"m10", message:"Bla bla", age:2, distance:123},
{messageId:"m20", message:"Ha Ha", age:3, distance:456},
{messageId:"m30", message:"Uhhh", age:2, distance:789},
{messageId:"m40", message:"Wauhhh", age:1, distance:012}
],
getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
myGrid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name:'report', index:'report', width:108,
formatter:function() { return reportBtn; } },
{ name:'messageId', index:'messageId', key:true, width:50, hidden:true },
{ name:'age', index:'age', label:'Age', width:50, sorttype:'int', align:'center' },
{ name:'message', index:'message', label:'Message', width:110 },
{ name:'distance', index:'distance', label:'Distance', width:80, sorttype:'int', align:'center' }
],
sortname: 'age',
sortorder: "desc",
loadComplete: function() {
var i=getColumnIndexByName(myGrid,'report');
// nth-child need 1-based index so we use (i+1) below
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) {
var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow");
alert("clicked the row with the messageId='"+tr[0].id+"'");
e.preventDefault();
});
},
viewrecords: true,
rownumbers: true,
//multiselect:true,
height: "100%",
pager: '#pager',
caption: "How to create Unobtrusive button"
});
您可以在此处观看演示.
这篇关于从JQgrid按钮获取行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
