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做的初始化工作，就可以顯示出按鈕的效果了。