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

之前，用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作的初始化工做，就能夠顯示出按鈕的效果了。