easyui datagrid列使用按钮的一些心得 .

以前，用easyui的datagrid，有时候会用到一些操作选项，比如代码如下：

[javascript] view plain copy print ?

1. $('#datagrid').datagrid({  
2.     border:false,  
3.     fitColumns:true,  
4.     singleSelect: true,  
5.     url:url,  
6.     columns:[[  
7.         {field:'projectname',title:'应用名',width:80},  
8.         {field:'projectpackage',title:'应用包名',width:25}  
9.         {field:'opt',title:'操作',width:50,align:'center',  
10.             formatter:function(value,rec){  
11.                 var btn = "<a class='editcls' οnclick='editRow('"+rec.projectname+"','"+rec.projectpackage+"')' href='javascript:void(0)>'编辑</a>";  
12.                 return btn;  
13.             }  
14.         }  
15.     ]]  
16. });  

$('#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' οnclick='editRow('"+rec.projectname+"','"+rec.projectpackage+"')' href='javascript:void(0)>'编辑</a>";
				return btn;
			}
		}
	]]
});

这个代码的效果就是最后一列显示一个链接，点击链接触发编辑事件，把两个参数传进去编辑。

后来，发现了问题，就是，当变量中含有空格时，html的解析会导致该事件失败，浏览器会自动补全双引号，空格导致了页面中""部分把双引号解析错误了。之后，一个同事说他写这种代码，一般按照正常的html规则来写，就不会出错了，也就是，html页面中出现双引号的部分就用双引号，于是，我写js引号的风格也就改成了用单引号来当做字符串的引号。修改后代码如下：

[javascript] view plain copy print ?

1. $('#datagrid').datagrid({  
2.     border:false,  
3.     fitColumns:true,  
4.     singleSelect: true,  
5.     url:url,  
6.     columns:[[  
7.         {field:'projectname',title:'应用名',width:80},  
8.         {field:'projectpackage',title:'应用包名',width:25}  
9.         {field:'opt',title:'操作',width:50,align:'center',  
10.             formatter:function(value,rec){  
11.                 var btn = '<a class="editcls" οnclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';  
12.                 return btn;  
13.             }  
14.         }  
15.     ]]  
16. });  

$('#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" οnclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';
				return btn;
			}
		}
	]]
});

再之后，觉得把链接改成用easyui的按钮会好一些，就找了各种办法，最后发现，只要把按钮部分的html代码用js初始化就可以得到按钮了，代码如下：

[javascript] view plain copy print ?

1. $('#datagrid').datagrid({  
2.     border:false,  
3.     fitColumns:true,  
4.     singleSelect: true,  
5.     url:url,  
6.     columns:[[  
7.         {field:'projectname',title:'应用名',width:80},  
8.         {field:'projectpackage',title:'应用包名',width:25}  
9.         {field:'opt',title:'操作',width:50,align:'center',  
10.             formatter:function(value,rec){  
11.                 var btn = '<a class="editcls" οnclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';  
12.                 return btn;  
13.             }  
14.         }  
15.     ]],  
16.     onLoadSuccess:function(data){  
17.         $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});  
18.     }  
19. });  

$('#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" οnclick="editRow(\''+rec.projectname+'\',\''+rec.projectpackage+'\')" href="javascript:void(0)">编辑</a>';
				return btn;
			}
		}
	]],
	onLoadSuccess:function(data){
		$('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
	}
});

主要就是在onLoadSuccess做的初始化工作，就可以显示出按钮的效果了。