easyui datagrid列使用按鈕的一些心得（轉）

http://blog.csdn.net/sskicgah/article/details/16939959

之前，用easyui的datagrid，有時候會用到一些操做選項，好比代碼以下：

$('#datagrid').datagrid({
    border:false,
    fitColumns:true,
    singleSelect: true,
    url:url,
    columns:[[
        {field:'projectname',title:'應用名',width:80},
        {field:'projectpackage',title:'應用包名',width:25}
        {field:'opt',title:'操做',width:50,align:'center',
            formatter:function(value,rec){
                var btn = "<a class='editcls' onclick='editRow('"+rec.projectname+"','"+rec.projectpackage+"')' href='javascript:void(0)>'編輯</a>";
                return btn;
            }
        }
    ]]
});

這個代碼的效果就是最後一列顯示一個連接，點擊連接觸發編輯事件，把兩個參數傳進去編輯。

後來，發現了問題，就是，當變量中含有空格時，html的解析會致使該事件失敗，瀏覽器會自動補全雙引號，空格致使了頁面中""部分把雙引號解析錯誤了。以後，一個同事說他寫這種代碼，通常按照正常的html規則來寫，就不會出錯了，也就是，html頁面中出現雙引號的部分就用雙引號，因而，我寫js引號的風格也就改爲了用單引號來當作字符串的引號。修改後代碼以下：

$('#datagrid').datagrid({
    border:false,
    fitColumns:true,
    singleSelect: true,
    url:url,
    columns:[[
        {field:'projectname',title:'應用名',width:80},
        {field:'projectpackage',title:'應用包名',width:25}
        {field:'opt',title:'操做',width:50,align:'center',
            formatter:function(value,rec){
                var btn = '<a class="editcls" onclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">編輯</a>';
                return btn;
            }
        }
    ]]
});

再以後，以爲把連接改爲用easyui的按鈕會好一些，就找了各類辦法，最後發現，只要把按鈕部分的html代碼用js初始化就能夠獲得按鈕了，代碼以下：

$('#datagrid').datagrid({
    border:false,
    fitColumns:true,
    singleSelect: true,
    url:url,
    columns:[[
        {field:'projectname',title:'應用名',width:80},
        {field:'projectpackage',title:'應用包名',width:25}
        {field:'opt',title:'操做',width:50,align:'center',
            formatter:function(value,rec){
                var btn = '<a class="editcls" onclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">編輯</a>';
                return btn;
            }
        }
    ]],
    onLoadSuccess:function(data){
        $('.editcls').linkbutton({text:'編輯',plain:true,iconCls:'icon-edit'});
    }
});

主要就是在onLoadSuccess作的初始化工做，就能夠顯示出按鈕的效果了。