Easyui datagrid 绑定数据获取选择状态的bug及处理方法

Easyui datagrid 绑定数据获取选择状态的bug及处理方法

前言

提示：这里可以添加本文要记录的大概内容：

这周在做easyui + datagrid 显示数据的时候发现一个问题，easyui 通过json 加载数据的过程中，有一个需求是要在前台根据后台数据勾选这条数据，也就是在json 数据中 增加 ‘checked’: true , 然后前台就会把 datagrid 最前面的框勾选了。数据绑定没有任何问题，勾选也一切正常，但是在前台获取这个勾选状态的时候问题来了，无论怎么获取 都获取到的空数组。

$(“#dg2”).datagrid(“getChecked”); 这样获取的时勾选状态的行，不行，获取到的是空数组
$(“#dg2”).datagrid(“getSelections”); 这样获取的选中状态的行（背景变色）不行，获取到的是空数组

看到网络有人说是 idField=“PersonId” ， 要把idField 设置为唯一索引字段，设置了也不行。
后面又看到有大咖说，要修改 jquery.easyui.min.js ，让勾选前面框的行写入缓存，经过尝试，不行。

所以说，高级工程师考验的不仅是优美的代码规范和严密的逻辑，更考验的是你的聪明才智。

仔细一想，出现这个问题的根本原因是 从json checked 直接绑定了勾选框，绑定的是html的硬编码，

绑定完以后，在页面上是显示了一个框， 这个框是代码直接画出来的，没有触发js脚本处理。所以你在通过

$(“#dg2”).datagrid(“getChecked”); $(“#dg2”).datagrid(“getSelections”);

调用的时候Dom 无法判断这个框到底是不是被选中了。知道原因解决方案一下就来了。

既然绑定以后没有给dom传递绑定状态，那我们在数据加载完告诉他一下不就可以了。

在 datagrid 绑定以后调用 onLoadSuccess，把勾选状态的数据重新选中一次。

           onLoadSuccess: function (data)
            {
                var rows = data.rows;
                $.each(rows, function (idx, val)
                {
                    if (val.checked == true)
                    {
                        $("#dg2").datagrid("selectRow", idx);
                    }
                });
            }});

然后，通过

$(“#dg2”).datagrid(“getChecked”); 就可以获取到勾选和没有勾选的全部状态。问题解决。

总结

提示：easyui 通过 checked=true 数据绑定的行， 获取勾选状态，需要在数据绑定完成后，重新选择一次行，然后就可以获取到所有状态。