Question

我正在尝试在jqGrid中设置一个列，每行中有一个单选按钮，允许用户将单行设置为父级的“主”子节点。但是，以下代码仅呈现空单元格。

我认为单元格没有被置于“编辑模式”或其他任何东西，这让我感到困惑，因为在同一网格上有一个可编辑的复选框列，它可以按照需要运行。

（网格底部有一个navButton可以保存网格状态，如果相关的话。）

var createRadioButton = function(value) {
    return $("<input type='radio' />", {
        name: mySubGridID,
        checked: value
    }).get();
}

var extractFromRadioButton = function(elem) {
    return $(elem).val();
}

$("#grid").jqGrid({
    url: '/GetData',
    datatype: 'json',
    colModel: [
    ...
    { label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions: 
        { 
            custom_element: createRadioButton, 
            custom_value: extractFromRadioButton  
        } 
    },
    ...
    ],
    ...
});

感谢您的帮助！

Answer 1

您尝试使用edittype: 'custom'。这仅适用于编辑模式（内联编辑或表单编辑）。如果我正确理解您的问题，请尝试添加单选按钮，该按钮显示在相应列中的所有行中。因此，您应该使用更好的custom formatter（请参阅here示例）。您可以在loadComplete中绑定click个事件（请参阅here示例）。

我不确定我理解你为什么需要使用单选按钮。如果您只想使用单选按钮进行行选择，则可以考虑使用multiselect:true代替。如果需要，您可以在onSelectRow或beforeSelectRow事件处理程序内部更改一些小的选择行为。

Answer 2

我在格式化程序中遇到了同样的问题，并且必须在单选按钮上设置宽度，因为它因某种原因设置得比单元格宽。

function radioButtonFormatter(cellValue, options, rowObject) {
    var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>';
    return radioHtml;
}

Answer 3

我需要一个更简单的解决方案，所以我想出了这个方法，它使用内置的multiselect而不是在网格中添加col。

...

var gridSelector = $("#myGrid");
//jqGrid code snippet, methods below:
multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
    // Allow only one selection
    $(gridSelector).jqGrid('resetSelection');
    return (true);
},
beforeRequest : function() {
    //Remove multi-select check box from grid header
    $('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
    //Convert grid check boxes to radio buttons
    $('input[id^="jqg_myGrid_"]').attr("type", "radio");
},

...

干杯，

jqGrid：每行一个单选按钮

3 个答案: