jqgrid 4.6 树形结构设置checkbox单选

在 jqGrid 4.6 版本中，启用树形网格的方式略有不同。需要将 `gridview` 选项设置为 `false`，以便 jqGrid 正确处理树形结构。此外，需要将 `treeGrid` 选项设置为 `true`，以启用树形网格功能。

为了在树形结构中启用 checkbox 单选功能，我们可以通过自定义 formatter 来实现。例如：

$("#myGrid").jqGrid({
    url: "myData.json",
    datatype: "json",
    colModel: [
        { name: "id", label: "ID", width: 50 },
        { name: "name", label: "Name", width: 100 },
        { name: "address", label: "Address", width: 150 },
        { name: "selected", label: "Selected", width: 50, formatter: selectFormatter }
    ],
    gridview: false, // 关闭 gridview
    treeGrid: true, // 启用树形网格
    ExpandColumn: "name", // 显示展开/收起图标的列名
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: "#myPager",
    caption: "My Grid"
});

function selectFormatter(cellValue, options, rowObject) {
    var checkboxHtml = '<input type="checkbox" class="select-checkbox" data-rowid="' + rowObject.id + '"';
    if (cellValue) {
        checkboxHtml += ' checked="checked"';
    }
    checkboxHtml += ' />';
    return checkboxHtml;
}

// 绑定单选事件
$(document).on('click', '.select-checkbox', function() {
    var $checkbox = $(this);
    var rowId = $checkbox.data('rowid');
    var currentState = $checkbox.is(':checked');
    var $grid = $("#myGrid");
    // 取消其他行的选中状态
    $grid.find('.select-checkbox').not(this).prop('checked', false);
    // 更新当前行的选中状态
    var data = $grid.jqGrid('getRowData', rowId);
    data.selected = currentState ? 'true' : 'false';
    $grid.jqGrid('setRowData', rowId, data);
});

在上面的例子中，我们定义了一个 `selectFormatter` 函数，用于将 `selected` 列的值渲染为 checkbox。在 checkbox 的 `data-rowid` 属性中存储了当前行的 ID，方便事件处理时获取。

通过绑定 `click` 事件，我们实现了 checkbox 的单选功能。当用户选择一个 checkbox 时，我们先取消其他行的选中状态，然后更新当前行的选中状态，并使用 `setRowData` 方法将新的数据设置回 jqGrid 中。

需要注意的是，在启用树形网格的情况下，如果用户选择了一个父节点，则该节点下的所有子节点都会被选中。为了避免这种情况，我们可以在事件处理中检查当前行是否为叶子节点，如果不是，则不处理该事件。