在jqgrid中的一行添加一个按钮答案

【问题标题】：Adding a button to a row in jqgrid在jqgrid中的一行添加一个按钮
【发布时间】：2010-11-20 22:22:31
【问题描述】：

我想为网格中的每一行添加一个按钮，该按钮将打开一个新窗口。在这个非常丰富的控件中看不到这个功能。一定是少了什么

【问题讨论】：

jsfiddle.net/russcam/VxpHf

标签： jqgrid

【解决方案1】：

在 colModel 中，您可以通过以下代码使用格式化程序进行格式化

formatter:function (cellvalue, options, rowObject) {    
    return "<input type='button' value='somevalue' onclick='some_function'\>";
}

【讨论】：

【解决方案2】：

我正在使用 jqgrid 来显示联系人列表。我有一个名为“角色”的列，带有一个“定义”按钮，您可以单击它并将该联系人的角色重新定义为主要、次要、销售或其他。

最初，按钮元素是通过 XML 发送到网格单元格的，其中 $rowid 是行的 id (PHP)：

<cell><![CDATA[<button data-idx='{$rowid}' class='contact_role_button btn' title='Define Role...'>Define</button>]]></cell>

在我在网格上设置 autoencode: true 之前，这一直很好。将此选项设置为 true 时，该列仅显示 html。

克雷格的回答显示了类似的行为，但稍有变化就可以了。我想我会分享：

gridcomplete: function() {
    var ids = $grid.getDataIDs();

    for (var i=0;i<ids.length;i++){
        var cl = ids[i],
        button = '<button data-idx="'+cl+'" class="contact_role_button btn" title="Define Role...">Define</button>';
        if (cl.substr(0,2) !== "jq") {
            $('#'+cl).find('td[aria-describedby="list_role"]').html(button);
        }
    }
}

换句话说，setRowData 方法在 autoencode 设置为 true 时不起作用，但可以在 gridcomplete 事件中根据需要操作 DOM。

【讨论】：

【解决方案3】：

这是一个示例，来自 jqGrid 演示页面：

jQuery("#rowed2").jqGrid({ 
    url:'server.php?q=3', 
    datatype: "json", 
    colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
        {name:'act', index:'act', width:75,sortable:false}, 
        {name:'id',index:'id', width:55}, 
        {name:'invdate',index:'invdate', width:90, editable:true}, 
        {name:'name',index:'name', width:100,editable:true}, 
        {name:'amount',index:'amount', width:80, align:"right",editable:true}, 
        {name:'tax',index:'tax', width:80, align:"right",editable:true}, 
        {name:'total',index:'total', width:80,align:"right",editable:true}, 
        {name:'note',index:'note', width:150, sortable:false,editable:true} 
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    imgpath: gridimgpath, 
    pager: jQuery('#prowed2'), 
    sortname: 'id', 
    viewrecords: true, 
    sortorder: "desc", 
    gridComplete: function(){ 
        var ids = jQuery("#rowed2").getDataIDs(); 
        for(var i=0;i<ids.length;i++){ 
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); ></ids>"; 
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />"; 
            jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce}) 
        } 
    }, 
    editurl: "server.php", 
    caption:"Custom edit " }
).navGrid("#prowed2",{edit:false,add:false,del:false});

您也可以使用custom formatter 来完成。

【讨论】：

只会启用 Save,editing 按钮，我想要的是触发一个打开新窗口的功能。我想我只是覆盖了 .saveRow 或 .EditRow
您添加按钮的方式完全相同，但您在 onclick 中放置了不同的 JavaScript 方法。不，您不会覆盖 saveRow 或 editRow。那会破坏编辑！
不要忘记在 jqgrid 配置中添加 autoencode:false

【解决方案4】：

这个example 可能会有所帮助。请参阅此 wiki 页面和来自 Oleg 的 this answer。

【讨论】：

你的例子都和导航栏有关。询问者要求在数据行中提供一个按钮。

【解决方案5】：

当前最高答案将自定义按钮代码放在 loadComplete 中。它应该是 gridComplete。问题得到解答后，API 可能已更改。

【讨论】：