给Jquery easyui 的datagrid 每行增加操作链接
来源:互联网 发布:奥运会 知乎 编辑:程序博客网 时间:2024/03/28 21:14
背景
我们都知道Jquery的Easy-UI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如“修改”、“删除”、“查看”之类。如下图:
凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性。查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过URL+ID的方式把页面跳转到新页面.
解决方法
1、在需要添加超链接的列进行格式化处理(formater:格式化函数),如下:
<th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名称</th>
2、根据documentation的描述,formatter的格式化函数有3个parameters,分别是:
value: the field value,也就是field:'id'。
rowData: the row record data。就是这一行的Json数据,包括你已经选择在Datagrid上显示的内容,和没显示的内容。
rowIndex: the row index.当前行的Index。
通过这个函数来执行相应的javaScript函数就可以达到目的.
3、脚本函数&前台代码
- <script type="text/javascript">
- //查看详情
- function rowformater(value, row, index) {
- return "<a href='NewsDetial.aspx?NoticeID=" + row.ID + "' target='_block'>" + row.Title + "</a>";
- }
- </script>
- <table id="dg" title="已发布消息" class="easyui-datagrid" style="width: 1090px; height: 430px; padding-left: 200px;" data-options="rownumbers:true,url:'EasyUITotalNews.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb' ," toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" striped="true" singleselect="true">
- <thead>
- <tr>
- <th data-options="field:'ck',checkbox:true"></th>
- <th data-options="field:'ID',width:150,align:'center'">消息编号</th>
- <th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名称</th>
- <th data-options="field:'PublishDepart',width:150,align:'center'">发送单位</th>
- <th data-options="field:'ReceiveDepart',width:150,align:'center'">接收单位</th>
- <th data-options="field:'PublishTime',width:150,align:'center'">发送时间</th>
- <th data-options="field:'NoticeState',width:80,align:'center'">是否读取</th>
- </tr>
- </thead>
- </table>
4、效果
小结
由于Easy-UI本身就是Jquery封装的库,所以其本质还是javascript.虽然本身没有link属性,但是通过其定义的属性或是方法,按照其格式构造一个javascript函数语句即可。
0 0
- 给Jquery easyui 的datagrid 每行增加操作链接
- 给Jquery easyui 的datagrid 每行增加操作链接
- 给Jquery easyui 的datagrid 每行增加操作链接
- 给Jquery easyui 的datagrid 每行增加操作链接
- 给Jquery easyui 的datagrid 每行增加操作链接
- Jquery easyui 的datagrid 每行增加操作链接-修改
- Easyui Datagrid每行增加超链接
- jquery-easyui datagrid 中每行增加删除按钮成功删除
- easyUI的datagrid每行数据添加操作按钮的方法
- easyUI的datagrid每行数据添加操作按钮的方法
- easyUI的datagrid每行数据添加操作按钮的方法
- jquery easyui datagrid的增加,修改,删除
- CRM的dev(七)--为easyUI的datagrid每行增加一个单选按钮
- EasyUI DataGrid formatter 格式化增加链接
- easyUI datagrid每行数据添加操作按钮的方法(实现方式二)
- jquery easyui DataGrid分页操作
- jQuery easyUI datagrid 增加求和统计行
- jQuery easyUI datagrid 增加求和统计行
- static test控件 字体颜色和文本的添加获取
- Android小代码-技巧积累
- Centos5.4下安装Apache
- C++ 类的静态成员详细讲解
- [leetcode] Minimum Depth of Binary Tree
- 给Jquery easyui 的datagrid 每行增加操作链接
- 文件的操作(例子)
- HDU 2045 不容易系列之(3)——LELE的RPG难题【递推】
- Unix Like的fork()函数使用
- 网站架构(页面静态化,图片服务器分离,负载均衡)方案全解析
- 《流程控制》
- 集群负载均衡---主机配置
- 内存配置器
- 岁月的剪影【八月硝烟四起】