【easyUI】禁用datagrid&treegrid复选框

最新推荐文章于 2022-07-08 15:06:48 发布

原创最新推荐文章于 2022-07-08 15:06:48 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #treegrid #checkbox

java 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何在Datagrid与Treegrid加载完成后禁用其复选框功能，通过JavaScript实现对复选框的控制，确保数据展示的同时避免用户误操作。

最近公司启动了新项目，所以一直在和客户谈需求，撰写前期的设计相关文档，博客也陷入了停滞阶段。刚好今天搜集了两个问题，搜集的过程也算是耗时不短，所以记录下来，以备后用。

禁用datagrid复选框

思路就是，datagrid在load成功后，本身就需要去读取数据中的复选框选中值，从而判断该条目是否勾选，于是我在这个逻辑下面增加了一句话$(".datagrid-row[datagrid-row-index=" + idx + "] input[type='checkbox']")[0].disabled = true; 主要意思就是将判断完成后的复选框作失效处理。

代码

onLoadSuccess : function(row) {
                $(this).datagrid('tooltip');
                var rowData = row.rows;
                $.each(rowData,function(idx,val){//遍历JSON
                      if(val.checked){
                          roleDataGrid.datagrid("checkRow", idx); //如果数据行为已选中则选中改行
                      }
                      $(".datagrid-row[datagrid-row-index=" + idx + "] input[type='checkbox']")[0].disabled = true;
                });           
            }

treegrid禁用复选框

思路和上面的差不多，同样是load完成后，对复选框进行失效操作。只不过treegrid在load的过程中，就把复选框值读取并勾选完成了，因此只需要将复选框禁用即可。

onLoadSuccess:function(){
                $(this).find('span.tree-checkbox').unbind().click(function(){
                    return false;
                });
            }