解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来肯定是否选中

背景:

    昨天帮朋友作一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感受太让人失望了,这样的问题就没有解决,太不人性化了。由于从去年到今年一直用的是miniui,因此用起来就会有对比了,easyui和miniui各个方便相比差的太远了,也有多是miniui是商业的吧!javascript

  记录下来解决方法,以便往后用的时候方便查找,若是有更好方法请留言,互相学习学习!前端

 

问题:

  先上个几个图片让你们有一个直观的印象java

easyui datagrid表格的列配置内容json

json数据学习

datagrid显示的效果ui

   就是一个简单的datagrid,有一个checkbox列,问题就出在checkbox列,当加载数据时checkbox列的值有的给的是true,可是给true的checkbox却没有被选中,这就是问题的所在,相信你们从图片中也能看出,如今前端UI不少,但大多数的datagrid应该实现了这个功能。spa

 

解决方法:

方法一:在onLoadSuccess事件中处理3d

代码以下:blog

        function onLoadSuccess(data) {
            var rowData = data.rows;
            $.each(rowData, function (idx, val) {
                if (val.ck) {
                    $("#dg").datagrid("selectRow", idx);
                }
            });
        }

此方法是从网上找的,可是感受不是很好,并且数据多了,效率确定不行了,因此就有了方法二。事件

 

方法二修改easyui源代码

跟踪源代码最后找到了要修改的地方,主要修改renderRow方法中的checkbox分支

源代码以下:

                    if (col.checkbox) {
                        cc.push("<input type=\"checkbox\" name=\"" + _69e + "\" value=\"" + (_69f != undefined ? _69f : "") + "\">");
                    } 

 仔细一看发现的的确确,没有实现此功能,其实很简单,改一下当_69f为true的时候加上checked="checked"的属性便可(注意:我改的是1.3.5的源代码)。

改后的代码以下:

                    if (col.checkbox) {
                        //<input type="checkbox" value="true" checked="checked"/>
                        cc.push("<input type=\"checkbox\" name=\"" + _69e + "\" value=\"" + (_69f != undefined ? _69f : "") + "\"" + (_69f ? "checked=\"checked\"" : "") + "\"/>");
                    } 

 

成果:

上一个简单的图片来看一下

相关文章
相关标签/搜索