背景:

    昨天帮朋友做一个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. org.elasticsearch.bootstrap : JNA not found. native methods will be disabled

    在pom.xml中添加以下依赖,解决elasticsearch的WARN: <dependency> <groupId>com.sun.jna</groupId> ...

  2. Markdown和reStructuredText语法比较

    reStructuredText在线编辑器 http://rst.ninjs.org/ ReST是Docutils的标记语法,Docutils是Python世界的文档工具集.也因为这样ReST在Pyt ...

  3. LD1-B(最短路径-SPFA)

    题目链接 /* *题目大意: *给定v个点的重量,并给定e条边,每条边具有一个权值; *在e条边中选v-1条边使这v个点成为一棵树; *定义这棵树的代价为(每棵子树节点重量和其子树根到父节点的边的权值 ...

  4. -_-#【Backbone】Collection

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【转】Eclipse导入library的时候报:Found 2 versions of android-support-v4.jar in the dependency list

    原文网址:http://www.07net01.com/2015/03/779691.html 错误类型:Eclipse导入library的时候报:Found 2 versions of androi ...

  6. R学习日记——分解时间序列(季节性数据)

    上篇说明了分解非季节性数据的方法.就是通过TTS包的SMA()函数进行简单移动平均平滑.让看似没有规律或没有趋势的曲线变的有规律或趋势.然后再进行时间序列曲线的回归预测. 本次,开始分解季节性时间序列 ...

  7. 金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网

    金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网 金洪林:红邦创衣止于至善

  8. heap(堆)和stack(栈)的区别

    heap是堆,stack是栈 stack的空间由操作系统自动分配/释放,heap上的空间手动分配/释放. stack空间有限,heap是很大的自由存储区 C中的malloc函数分配的内存空间即在hea ...

  9. ssh端口映射,本地转发

    应用场景: # HOSTA<-X->HOSTB 表示A,B两机器相互不可以访问,  HOSTA<-->HOSTB 表示A,B两机器可以相互访问# 1.localhost< ...

  10. SQL语句查询结果额外加入一列序号自己主动添加

    sqlserver 能够用row_number函数实现 例如以下: SELECT *,row_number() OVER(ORDER BY score(列名) DESC) AS rank FROM s ...