背景:

    昨天帮朋友做一个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. ISO7816协商模式和特定模式

    ISO7816协议的协商模式和特定模式好多使用者都搞不明白,还经常有客户电话询问,这里将其澄清一下: ISO7816协议的协商模式和特定模式由复位应答字节TA2确定,下面是TA2的字节定义 TA2的存 ...

  2. redis-cli批量删除时的坑

    redis-cli keys "*"|xargs redis-cli del tips: keys后面的*号,必须要加双引号,不然删不掉 # redis-cli keys *|xa ...

  3. Go语言开发环境安装

    Go是Google开发的一种编译型,並發型,并具有垃圾回收功能的编程语言. 去http://golang.org/doc/install#download 下载相应的版本. 1.安装go语言:2.将g ...

  4. jps(JVM Process Status)

    功能   列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在类)的名称,以及这些进程的本地虚拟机的唯一ID(LVMID,Local Virtual Machin ...

  5. MVC控制器方法返回类型

    控制器公开控制器操作.操作是控制器上的方法,在浏览器的地址栏中输入特定 URL 时被调用.例如,假设要请求下面的 URL: http://localhost/Product/Index/3 在这种情况 ...

  6. Promise in AngularJS

    What's promise Angular’s event system provides a lot of power to our Angular apps. One of the most p ...

  7. Linux----硬连接和软连接

    一,概念 在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都给它分配一个编号称为索引节点号(Inode Index). 硬链接 多个文件名指向同一个索引节点(一个文件有多个副本) 允许一 ...

  8. JavaScript 构造函数

    关于JavaScript构造函数,如今出现了很多JavaScript的框架,例如jQuery.Ext等等这些,这些将JavaScript作为一种面向对象的语言进行编程,那么JavaScript到底是怎 ...

  9. POJ1595_Prime Cuts【素数】【水题】

    Prime Cuts Time Limit: 1000MSMemory Limit: 10000K Total Submissions: 10464Accepted: 3994 Description ...

  10. unicode下各种类型转换,CString,string,char*,int,char[]

    把最近用到的各种unicode下类型转换总结了一下,今后遇到其他的再补充: 1.string转CString string a=”abc”; CString str=CString(a.c_str() ...