给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 ...
随机推荐
- 【WebForm】知识笔记
一.ashx介绍以及ashx文件与aspx文件之间的区别 ashx是什么文件? .ashx 文件用于写web handler的. .ashx文件与.aspx文件类似,可以通过它来调用HttpHandl ...
- Sort An Unsorted Stack
Given a stack of integers, sort it in ascending order using another temporary stack. Examples: Input ...
- LeetCode Single Number I II Python
Single Number Given an array of integers, every element appears twice except for one. Find that sing ...
- streamsets 集成 rabbitmq 以及benthos stream 处理框架
benthos 是一个stream 处理框架,streamsets 也是,但是两者可以通过不同的工具进行集成起来 一般我们可以使用http 服务,消息中间件(kafka.rabbitmq ...) 使 ...
- PHP安全相关的配置（2）
php用越来越多!安全问题更为重要!这里讲解如果安全配置php.ini 安全配置一 (1) 打开php的安全模式 php的安全模式是个非常重要的内嵌的安全机制,能够控制一些php中的函数,比如syst ...
- CRM 2011 Plugin 知识的总结加代码解释
1.??的使用,就是判断值是否为null,为null的话,给赋初值,否则就直接取值. decimal new_amount = 0; if (targetEntity.Contains("字 ...
- arcgis license manager 10.2服务无法启动
(步骤)1. 用cmd切换到 license manager 安装目录,如 C:\Program Files (x86)\ArcGIS\License10.2\bin,输入: Lmgrd -z -c ...
- JQuery返回Json日期格式的問題
用JQuery Ajax返回一個Entity的Json數據時,如果Entity的屬性中有日期格式,那返回來的是一串字符串,如下圖所示: 在網上找了很久也沒有找到一個好的解決方案,最後自己寫一個java ...
- WinRAR打包时不包含文件夹本身，只打包文件夹里的文件和目录
加上-ep1 参数即可. rar u -m3 -s -r -o+ -ep1 -x*.zip client_zmv9.zip ".\client_zmv9\*"
- 【Spring学习笔记-MVC-1.0】Spring MVC架构介绍
作者:ssslinppp 1. 核心架构图 2. 核心架构的具体流程步骤 3. 具体的核心开发步骤 4. 常用注解 5. <mvc:annotation-driven>配置 6 ...