给Jquery easyui 的datagrid 每行增加操作链接
2015-07-03 16:01
711 查看
背景
我们都知道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/<span id="9_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="9_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=javascript&k0=javascript&kdi0=0&luki=8&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="9" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">javascript</span></a></span>"> //查看详情 function rowformater(value, row, index) { return "<a href='NewsDetial.aspx?NoticeID=" + row.ID + "' <span id="10_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="10_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=target&k0=target&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="10" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">target</span></a></span>='_<span id="11_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="11_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=block&k0=block&kdi0=0&luki=5&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="11" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">block</span></a></span>'>" + row.Title + "</a>"; } </script>
<table id="dg" title="已发布消息" class="easyui-<span id="7_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=data&k0=data&kdi0=0&luki=1&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="7" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">data</span></a></span>grid" <span id="8_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=27864f946f880879&k=style&k0=style&kdi0=0&luki=9&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=7908886f944f8627&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D286226%2Ehtml&urlid=0" target="_blank" mpid="8" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">style</span></a></span>="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函数语句即可。
相关文章推荐
- jquery 遍历select option 结果集
- jquery EasyUI的formatter格式化函数代码
- jquery操作select(取值,设置选中)
- 使用jquery禁用radio
- jQuery实现当拉动滚动条到底部加载数据
- jQuery on()方法
- PHP+mysql+jQuery说说留言板
- jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件
- jquery delayLoading.js插件的延迟加载效果和图片延迟加载
- jquery金额小写转大写
- asp.net中利用jquery zTree异步加载数据
- jQuery解读之empty、remove、detach区别
- 内容包装:jQuery中wrap、wrapAll和wrapInner用法以及区别
- jQuery Callbacks应用关键点
- JQuery $.extend 与$.fn.extend
- jQuery 左侧滑动
- JQuery -- this 和 $(this) 的区别
- 使用jquery合并表格中相同文本的相邻单元格
- jQuery中文学习站点
- JQUERY获取当前页面的URL信息