如何在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(){

我试图处理jqgrid中的自定义按钮的单击。我有按钮显示，但单击它们时，我的功能不会运行。如果我单击jqgrid外部的按钮，脚本将运行。 jqgrid是否消耗了按钮点击？不确定我缺少什么或不理解。这是网格。我没有重新加载整个网格的原因是服务器上的处理过多，并且需要在editurl处理“发送”时手动删除客户端上的行。请参阅：$（“。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>

2 个解决方案

#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.

从不开火，因为行的点击消耗它。但是，您可以在按钮中输入自己的onclick代码。

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.

正如我的评论中所讨论的，我可以使用任何参数调用saveRow函数。

#2

Add

加

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

in gridComplete callback and it fires.

在gridComplete回调中，它会触发。

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

#1