kendoUI动态改变grid复选框变单选框

最近遇到一个需求需要动态把grid复选框列变成单选框，先上复选grid代码

复选grid

代码效果

查询了kendoUI的官方文档得到解释

官方文档

查询大佬们博客发现：
selectable ：Boolean | String 选中表格的设置，默认false禁止选中，字符串‘row’表示可以选中一行，‘cell’ 表示可以选中一列，‘multiple, row’表示可以选中多行，‘multiple, cell’表示可以选中多列。

所以当时想利用这个属性，来进行动态变化。

方案一   通过动态改变grid的selectable属性并重新加载grid来实现复选变单选。

var  selectCheckBox = "multiple,rowbox";

用一个全局变量selectCheckBox来动态改变 grid 属性 selectable: selectCheckBox，

function changeBox(type) {

    if (type == xxx) {

        return "multiple,rowbox”;

    } else {

        return "single,rowbox";

    }

}

用一个函数方法来动态改变 grid 属性 selectable: changeBox(type)，

结果发现selectable属性只会在页面载入时候取一次值或调用一次function函数，后续就算改变全局变量和手动刷新grid也无法触发函数重新调用。我尝试使用$('#company_grid').data('kendoGrid').dataSource.page(1) 和 $('#company_grid').data('kendoGrid').refresh() 去触发grid重新加载，间接重新加载grid的selectable属性，发现没有效果，如果有可以实现重新加载selectable属性的方法请留言告知我，万分感谢！。

方案二  给复选框绑定点击事件，通过控制事件让勾选失效达到复选变单选。

给grid的标题行复选框添加点击事件，使其失去勾选功能。

$("#company_grid thead>tr th span.k-checkbox").click(function (e) {

    return false;

});

给grid的明细行添加绑定事件,但是我一直没有给明细行前复选框绑定上点击事件，在函数中添加console.log()也没有打印。

$("#company_grid tbody td.k-checkbox").click(function (e) {

    return false;

});

通过谷歌浏览器查看Jquery选择器是否获取到复选框，发现已获取到，但是仅仅是标题行的有效果，明细行一直没效果。笔者也一直没找到原因，如果有人知道也请留言告知，再次感谢！。

谷歌控制台

方案三  由于前面方案总是棋差一招，只能剑走偏锋。创建两个grid一个selectable属性是多选，另一个grid的selectable属性是单选。两个grid同时绑定一个数据源，保证数据统一，根据选择条件隐藏一个，显示一个。

单选grid

HTML设置

函数设置

至此单复选框的动态切换就实现了，这种实现方式比较Low但是效果达到了，如果有大佬有好的实现方式，请留言告知。

参考文章链接：

官方文档

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.selectable

博客文档

https://blog.csdn.net/qq_35611143/article/details/81485551