javascript - then - ¿Cómo se agregan los scripts a los botones personalizados en las filas en jqgrid?
jquery ajax then example (2)
Estoy tratando de manejar el clic del botón personalizado en una jqgrid. Tengo los botones en blanco, pero cuando se presiona, mi función no se ejecuta. Si hago clic en un botón fuera de jqgrid, se ejecuta el script. ¿Jqgrid consume el botón clic? No estoy seguro de lo que me falta o no entiendo. Aquí está la grilla. La razón por la que no estoy recargando toda la red es porque hay demasiado procesamiento en el servidor y es necesario eliminar manualmente la fila en el cliente una vez que editurl procesa el "envío". See: $(".sendbuttons").click(function(){
...
<style type="text/css">
.sendbuttons {
height:19px;
width:60px;
color:red;
}
</style>
<script language="javascript">
jQuery(document).ready(function(){
var last_row;
jQuery("#gridlist").jqGrid({
url:''manual_responses.php'',
datatype: "json",
colNames:[''ID'',''Image'',''Keyword'',''send Found'',''Proposed send'',''''],
colModel:[
{name:''item_id'', index:''item_id'', width:45, editable:false, hidden:true},
{name:''image'', index:''image'', width:45},
{name:''keyword'',index:''keyword'', width:100, editable: false},
{name:''item_found'',index:''item_found'', width:130, editable: false},
{name:''proposed_send'',index:''proposed_send'', width:130, editable: true, edittype:"textarea", editoptions:{rows:"2",cols:"37"}},
{name:''options'',index:''options'',width:40,editable: false}
],
rowNum:40,
rowList:[20,40,60],
imgpath: ''css/themes/sand/images'',
sortname: ''keyword'',
viewrecords: true,
sortorder: "asc",
caption:"Proposed sends",
onSelectRow: function(item_id){
if(item_id && item_id!==last_row){
jQuery("#gridlist").restoreRow(last_row);
jQuery("#gridlist").editRow(item_id,true);
last_row=item_id;
}
},
loadComplete: function(){
//alert(''ok, loadComplete running'');
var ids = jQuery("#gridlist").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
send = "<input class=''sendbuttons'' id=''tbuttonSend"+cl+"'' type=''button'' value=''Send'' /><br />";
clear = "<input class=''sendbuttons'' id=''tbuttonClear"+cl+"'' type=''button'' value=''Send'' /><br />";
jQuery("#gridlist").setRowData(ids[i],{options:send+clear})
}
},
editurl: "item_send.php",
height:400,
width:796,
reloadAfterSubmit:false
}).navGrid(''#pager2'',{edit:true,add:false,del:false });
$(".sendbuttons").click(function(){
alert("got to 1");
});
});
</script>
</head>
<body>
<table id="gridlist" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
<input type=''button'' class=''sendbuttons'' id=''323423x'' value=''go:''/>
</body>
</html>
Es evidente que el evento click,
$(".sendbuttons").click(function(){
alert("got to 1");
});
nunca dispara porque el clic de la fila lo consume. Sin embargo, puede poner su propio código onclick en el botón.
send = "<input name=''send'' class=''tweetbuttons'' id=''tbuttonSend"+cl+
"'' type=''button'' value=''Send''
onclick=jQuery(''#list2'').saveRow("+cl+",function(){alert(''made it here'')},item_send); /><br />";
Como mencioné en mi comentario, puedo llamar a la función saveRow con cualquier parámetro.
Añadir
$(".sendbuttons").click(function(){
alert("got to 1");
});
en la rejilla completa de devolución de llamada y se dispara.
loadComplete: function(){
//alert(''ok, loadComplete running'');
var ids = jQuery("#gridlist").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
send = "<input class=''sendbuttons'' id=''tbuttonSend"+cl+"'' type=''button'' value=''Send'' /><br />";
clear = "<input class=''sendbuttons'' id=''tbuttonClear"+cl+"'' type=''button'' value=''Send'' /><br />";
jQuery("#gridlist").setRowData(ids[i],{options:send+clear})
}
$(".sendbuttons").click(function(){
alert("got to 1");
});
},