分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

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

  • 时间:2020-04-24 14:29 作者:肥宅快乐猿 来源: 阅读:264
  • 扫一扫,手机访问
摘要:最近遇到一个需求需要动态把grid复选框列变成单选框,先上复选grid代码复选grid代码效果查询了kendoUI的官方文档得到解释官方文档查询大佬们博客发现:selectable :Boolean | String 选中表格的设置,默认false禁止选中,字符串‘row’表示可以选中一行,‘cel

最近遇到一个需求需要动态把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同时绑定一个数据源,保证数据统一,根据选择条件隐藏一个,显示一个。

单选gridHTML设置函数设置

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

参考文章链接:

官方文档

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

博客文档

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

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部