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作的初始化工做，就能够显示出按钮的效果了。