以前,用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' οnclick='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" οnclick="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" ο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做的初始化工作,就可以显示出按钮的效果了。