How do you add scripts to custom buttons on rows in jqgrid?

问题

I am trying to handle the click of custom button in a jqgrid. I have the buttons showing up, but when they are clicked, my function does not run. If I click a button outside the jqgrid, the script runs. Does jqgrid consume the button click? Not sure what I am missing or not understanding. Here is the grid. The reason I am not reloading the entire grid is there is too much processing on the server, and need to manually remove the row on the client once the editurl processes the "send." 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>

回答1:

It is apparent that the click event,

$(".sendbuttons").click(function(){
     alert("got to 1");
});

never fires because the click of the row consumes it. You can, however, put in your own onclick code in the button.

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 />";

As discussed in my comment, I can call the saveRow function with any parameters.

回答2:

Add

$(".sendbuttons").click(function(){
     alert("got to 1");
});

in gridComplete callback and it fires.

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");
    });
},

来源：https://stackoverflow.com/questions/1384685/how-do-you-add-scripts-to-custom-buttons-on-rows-in-jqgrid

标签

javascript

jquery

ajax

client

jqgrid