昨天帮朋友作一个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\"" : "") + "\"/>"); }
上一个简单的图片来看一下