文档章节

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

sskicgah
 sskicgah
发布于 2016/03/17 19:19
字数 493
阅读 21
收藏 0

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

© 著作权归作者所有

sskicgah

sskicgah

粉丝 7
博文 43
码字总数 32720
作品 0
福州
程序员
私信 提问
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
763
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
9.8K
3
html 替换table中th的内容出现问题

代码如下:<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %> <%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageE......

wenwen1
2014/01/05
1K
0
ASP.net+MVC2+EasyUI搭建一个简单表格示例

一个非常基础的小例子,主要是利用VS2010提供的MVC框架,后台是ASP.NET,前台是EasyUI,然后利用EasyUI的datagrid来显示一个表格的数据。 1.首先创建MVC项目。VS2010自带MVC2(虽然已经比较老...

guoliang
2013/10/10
9K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
33分钟前
34
0
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
9
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部