游戏技术文章

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

时间:2017-1-9 11:37:14  作者:棋牌资源网  来源:棋牌资源网  查看:6791  评论:0
内容摘要:以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下:$('#datagrid').datagrid({      border:false,   ...
以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下:
  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' onclick='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' onclick='editRow('"+rec.projectname+"','"+rec.projectpackage+"')' href='javascript:void(0)>'编辑</a>";
				return btn;
			}
		}
	]]
});

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

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

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

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

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

标签:easyuidatagrid列使用按钮的一些心得 

欢迎加入VIP,【VIP售价:只要288元永久VIP会员】畅享商业棋牌游戏程序下载,点击开通!

下载说明


☉本站所有源码和资源均由站长亲自测试-绝对保证都可以架设,运营!
☉如源码和资源有损坏或所有链接均不能下载,请告知管理员,

☉本站软件和源码大部分为站长独资,资源购买和收集,放心下载!

☉唯一站长QQ:1004003180  [人格担保-本站注重诚信!]

☉购买建议E-mail:1004003180@qq.com   源码收购 E-mail:1004003180@qq.com    

☉本站文件解压密码  【文章内都自带解压密码,每个密码不同!】


本站提供的所有源码,均来源站长提供,仅学习交流 浙ICP备09009969号

由此产生不良后果和法律责任与本站无关,如果侵犯了您的版权,请来信告知 1004003180@qq.com 将及时更正和删除! 

Copyright © 2008-2022 棋牌资源网,你身边的棋牌资源下载站    All Rights Reserved