jquery easyui datagrid 实现单选且选择后可取消选择的效果

最近做的项目中产品提了一个某个查询功能结果列表的优化建议：（原话：选中后，再点击选中的这一条，系统应该取消选中。）用 jquery easyui datagrid 实现单选且选择后可取消选择的控制效果。（技术行话：）

1。网上搜了很多资料，都没搜到实现这种单选且可取消选择控制效果的现成实现。

2。有人或许会说 直接加个这个 singleSelect: true 不就可以了吗？是的，这样实现了单选效果，但是却没有实现单选且可取消选择的单选效果。一种可能得解决方法是在 singleSelect: true 的基础上做努力，但是各种尝试后，我选择了放弃。

3。我最后的实现思路是 singleSelect: false ，也就是先允许多选，然后再做控制。

4。当datagrid加载数据成功后，这么处理：

  onLoadSuccess: function (data) {
            if (data.total == 0) { $.messager.alert('系统提示', "查询结果为空，无符合条件记录", 'error'); }
            else {
                $("input[name=ck]").click(function () {

                    var ischecked = $(this).is(":checked");
                    $("input:checkbox[name=ck]:checked").attr("checked", false);
                    $('#grid').datagrid('clearSelections');
                    $('#grid').datagrid("unselectAll");
                    if (ischecked) {
                        $(this).attr("checked", true);
                    } else {
                        $(this).attr("checked", false);
                    }
                });
            }
        },

5。别急！这样只是表面上实现了单选且可取消选择的控制效果，这时当你快速选择两个复选框后会出现两个或多个都选择了的效果。这个是因为此时datagrid的这两个属性值： checkOnSelect: true,selectOnCheck: true, 导致的。

6。保持 checkOnSelect: true,selectOnCheck: true, 这个不变，我加了以下代码就没问题了：

        onClickRow: function (rowIndex, rowData) {
            $('#grid').datagrid("unselectAll");//取消选中当前所有行
            $('#grid').datagrid("selectRow", rowIndex);//选中当前点击的行
        },

7。 以上纯属个人学习总结，希望能帮助到需要这种效果的同际遇者。