Adicionando um botão personalizado na linha no jqGrid?
Eu quero fazer uma tabela simples que contém um botão personalizado em uma linha. Quando o botão é pressionado, quero abrir uma caixa de "alerta". Eu li algumas mensagens sobre isso, por exemplo:esta postagem eeste outro poste não entendo porque meu código não está funcionando. Os botões são desenhados, mas empurrá-los não tem efeito.
Eu tenho três tentativas descritas aqui.
Versão 1. O clique do botão nunca dispara:
$(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',
});
});
Código HTML:
<table id="simpletable"></table>
EDIT 8/2/12 - Eu aprendi algumas coisas desde o meu post original e aqui eu descrevo mais duas tentativas.
Versão 2: eu uso onCellSelect. Isso funciona, mas não permitiria que eu colocasse mais de um botão em uma célula. Além disso, tornei o código mais agradável usando a opção de formato sugerida por um dos comentários deste 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
Marcação:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
Versão 3: tentei usar a solução paraPublicação de w4ik, usando ".on" em vez de preterido ".live". Isso faz com que o botão clique para disparar, mas não sei como recuperar o rowid. O w4ik também lutou com isso, e ele postou que trabalhou nisso, mas não como ele fez isso. Eu posso obter a última linha selecionada, mas isso sempre se referirá à linha anterior selecionada porque o botão está tendo prioridade.
Eu preferiria essa solução se conseguisse fazê-la funcionar.
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);
}
});
Marcação:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
Em resumo, estou lutando com a questão de fazer com que meu botão seja pressionadono tempo certo. Na versão 1, a linha é selecionada e o botão nunca é pressionado. A versão 2 não usa o "botão" - apenas manipula o clique da célula. Verion 3 obtém o clique do botão antes da seleção da linha (ordem errada).
Qualquer ajuda seria apreciada!