简体   繁体   English

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

[英]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. 我试图处理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. 如果我单击jqgrid外部的按钮,脚本将运行。 Does jqgrid consume the button click? jqgrid是否消耗了按钮点击? 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." 我没有重新加载整个网格的原因是服务器上有太多的处理,并且一旦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>

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函数。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM