给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接
我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar，这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接，最常见的就是比如“修改”、“删除”、“查看”之类。如下图：
这是个很实用的功能，但是搜索了一下，好像也没见到谁写过，我就找了Easyui的document，随便写一下，抛砖引玉。
思路：一般来讲，增加操作链接就是要用URL+ID的方式把页面跳转到新页面，所以需要在正常输出的一行后面加一列操作列用来显示操作链接。Easyui的Datagrid没有直接添加link的属性，所以我需要格式化一下这一“操作”列的输出。
解决方法：
第一步，我需要 在datagrid行里添加一列，field指向id（field:'id'），然后对这列进行格式化处理（formater：格式化函数），如下：
- <th data-options="field:'id',width:180,formatter: rowformater">操作</th>
第二步：
根据documentation的描述，formatter的格式化函数有3个parameters，分别是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是这一行的Json数据，包括你已经选择在Datagrid上显示的内容，和没显示的内容。因为我的Json数据里包括了Id这一内容，所以我可以直接调用。如果你作为数据源的Json里没有Id属性，需要修改一下Json的输出。我的每行Json输出是类似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。
所以我写rowformater这个函数的时候，也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白，我只在函数里写了一句话（放在<head>标签里），事实上项目上需要做一些基本的判断。：
- <script type="text/javascript">
- function rowformater(value,row,index)
- {
- return "<a href='"+row.id+"' target='_blank'>操作</a>";
- }
- </script>
OK，应该能跑起来了。跑出的结果就是上面的截图样式。
注意：自己做了以后发现，如果UI中一行的多个列需要用到数据源中的同一列，那么可能会有问题，需要把这UI中的多个列并到同一列中，共同使用数据源中的这同一列。
给Jquery easyui 的datagrid 每行增加操作链接(转)的更多相关文章
- 给Jquery easyui 的datagrid 每行添加操作链接
背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...
- [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列
为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- JQuery EasyUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- jQuery EasyUI之DataGrid使用示例
jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 扩展行显示细节
数据网格(datagrid)可以改变它的视图(view)来显示不同的效果.使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-&q ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
随机推荐
- ElasticSearch（七）：ElasticSearch集群的搭建
由于资源有限,使用是一台机器上安装三个elasticSearch服务端组成的集群. 1. 安装elasticSearch6.3.2 将原本安装的elasticSearch6.3.2复制两份,分别重新命 ...
- python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner
python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner 下面给大家介绍下用HTMLTestRunner模块自动生成测试报告的方法. 一.首先我们导入unit ...
- ASP.NET MVC开发基础
一.ASP.Net MVC的开发模式 (1)处理流程 在ASP.Net MVC中,客户端所请求的URL是被映射到相应的Controller去,然后由Controller来处理业务逻辑,或许要从Mode ...
- hdu1165 规律递推
题意:给了公式,求A(m,n). 并不知道为什么被杭电分类塞进了dp专题,但是我一开始显然看到这个题就觉得给那个公式用函数递归一下答案肯定能出来了,只不过既然放在了dp专题里面估计这样暴力求解会TLE ...
- jquery学习1之对juery对象的细节操作1
jquery是前台动态页面开发的一个很重要的工具. 一:jquery对象中length属性和size()方法 var a=$("a").length; var b= ...
- 用 c 写 CGI 程序简要指南
文章摘要: CGI规定了Web服务器调用其他可执行程序(CGI程 序)的接口协议标准.Web服务器通过调用CGI程序实现和Web浏览器的交互.CGI程序可以用任何程序设计语言编写,如Shell脚本语 ...
- oracle12c之 控制pdb中sga 与 pga 内存使用
Memory Management using Resource Manager Oracle数据库资源管理器(资源管理器)现在可以在多租户容器数据库(CDB)中管理可插入数据库(PDBs)之间的内存 ...
- hadoop入门篇-hadoop下载安装教程（附图文步骤）
在前几篇的文章中分别就虚拟系统安装.LINUX系统安装以及hadoop运行服务器的设置等内容写了详细的操作教程,本篇分享的是hadoop的下载安装步骤. 在此之前有必要做一个简单的说明:分享的所有内容 ...
- Windows Phone Runtime Component 中的类型转换
Windows Phone Runtime Component 是Windows Phone 平台用来写C++类库的项目类型. 主要目的是让C#和C++进行互操作,引用历史的C++代码,保护知识产权, ...
- 详细说明 配置 Sublime Text 开发node.js（windows）包括sub2和sub3的区别
1.先安装Sublime Text 2或者3皆可 2.下载 sublime Text 的nodejs插件 得到那个zip包(后面会介绍用Package Control安装) 3.下载后解压 直接改名 ...