Question

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

Answer 1

很明显，点击事件

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

永远不会触发，因为行的点击会消耗它。但是，您可以在按钮中输入自己的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 />";

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

Answer 2

添加

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

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

如何在jqgrid中的行上自定义按钮添加脚本？

2 个答案: