一(从网上找的别人的)、
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接
我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar,这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接,最常见的就是比如“修改”、“删除”、“查看”之类。如下图:
解决方法:
第一步,我需要 在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>
二、添加链接(自己的):
<th data-options="field:'action',width:100" formatter="formatAction">操作</th>
<script type="text/javascript">
function formatAction (value,row,index){
var val="";
if(row.disabled==1){
val="<a href='javascript:void;' class='delete' onclick='if(confirm(\"是否禁用?\")){dis("+row.store_id+")}' title='禁用'></a>";
}else if(row.disabled==2){
val="<a href='javascript:void;' class='edit' onclick='if(confirm(\"是否还原?\")){revert("+row.store_id+")}' title='还原'></a>";
}
val+="<a href='javascript:void(0);' class='edit' onclick='append("+row.store_id+",\"uname\")' title='修改'></a>";
return val;
}
function dis(storeId){
$("#form").ajaxSubmit({
url:"../store!disStore.do?storeId="+storeId,
dataType:"json",
success:function(data){
if(data.result==1){
alert(data.message);
location.reload();
}
else{
alert(data.message);
}
}
});
}
相关推荐
easyui的datagridview拓展。具体的使用方法看我的博文,网址https://mp.csdn.net/postedit/85068385
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jQuery EasyUI jquery-easyui-1.5.5.6 版 API 中文版 PDF和chm版本,jQuery
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
jquery-easyui-1.7.0 官方文档以及源码,演示demo,内容详细
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
Easyui的扩展datagrid-dnd.js,实现拖动datagrid行到其他数据表格的必要文件
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
datagrid-bufferview.js,用于datagrid滚轮分页
jquery-easyui-EDT-1.4.2-,包括中文文档以及一些示例,静态资源,各种样式
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI...jQuery-Easyui-1.2.6中含有jQuery库、easyui库、demo实例和jquery_easyui_中文帮助文档等。
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...
jQueryEasyUI1.4.1-版-API-中文版
jquery-easyui-EDT-1.4.5-build1很好用