背景:

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

  记录下来解决方法,以便日后用的时候方便查找,如果有更好方法请留言,互相学习学习!

问题:

  先上个几个图片让大家有一个直观的印象

easyui datagrid表格的列配置内容

json数据

datagrid显示的效果

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

解决方法:

方法一:在onLoadSuccess事件中处理

代码如下:

        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\"" : "") + "\"/>");
}

成果:

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

解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中的更多相关文章

  1. Easyui datagrid加载数据时默认全选的问题

    问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...

  2. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  3. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  4. easyui datagrid加载数据和分页

    <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding=& ...

  5. Java MiniUi datagrid加载数据时,如果使用virtualScroll="false",数据多一点可能就会加载不出来

    datagrid的值为 virtualScroll="true" 问题解决.

  6. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  7. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  8. jquery easyui使用(三)······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

  9. ListView用法及加载数据时的闪烁问题和加载数据过慢问题

    ListView介绍及添加数据时的闪烁问题 1.     ListView类 1.1 ListView常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示 ...

随机推荐

  1. oracle中的日期加减法

    --加法 ) from dual; --加1年 ) from dual; --加1月 ,'yyyy-mm-dd HH24:MI:SS') from dual; --加1星期 ,'yyyy-mm-dd ...

  2. hdu 4550 卡片游戏

    http://acm.hdu.edu.cn/showproblem.php?pid=4550 贪心 #include <cstdio> #include <cstring> # ...

  3. poj 2777Count Color

    http://poj.org/problem?id=2777 注意:a可能比b大 #include <cstdio> #include <cstring> #include & ...

  4. Android JSON,Gson,fastjson实现比较

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  5. 《how to design programs》14章 再论自引用数据

    这是一个家族谱: ;child(define-struct child (father mother name date eyes)) #lang racket ;child (define-stru ...

  6. jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参 ...

  7. css中居中的居中方法

    1:给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 2:居中一个浮动元素 确定容器的宽高 宽500 高 300 的层 ...

  8. android系统的日志查看

    日志跟踪(alog) 在我们开发手机软件的过程中,常常需要通过USB线连接电脑看日志.但在windows下,我们要安装驱动.有的android板子,就不支持USB调试.所以我开发了这个小工具.方便打开 ...

  9. Unity3D Asset stored 已下载的位置

    Unity3D Asset stored下载资源在本地的什么目录里呢?C:\Users\accountName\AppData\Roaming\Unity\Asset Store

  10. 深入探讨 java.lang.ref 包--转

    概述 Java.lang.ref 是 Java 类库中比较特殊的一个包,它提供了与 Java 垃圾回收器密切相关的引用类.这些引用类对象可以指向其它对象,但它们不同于一般的引用,因为它们的存在并不防碍 ...