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

 

成果:

上一個簡單的圖片來看一下

相關文章
相關標籤/搜索