EasyUI-Datagrid 中formatter和group-formatter的使用
1.在表格属性设置函数那块写以下内容:
groupFormatter:function(value,rows){
//这里可以看到每一条导入表格中的数据,可以返回group的总结值
},
columns: [
[{
field: 'SEX',
title: '性别',
width: 100,
align: 'center',
formatter: function(value,row,index){
//可以将数据库中返回的数据进行转换(将数字代号0,1分别转换为男和女)
var str = '';
if(value==0)
{
str="女";
}
else
{
str="男";
}
return str;
}
},
{
field: 'do',
title: '链接',
width: 150,
align: 'center',
//可以拼接一个链接按钮,链接函数为:UrlDetail();
formatter: function(value,row,index){
selectedRow = row;
var str = '';
str = '<a class="easyui-linkbutton detail_more" href="javascript:UrlDetail();"'+ "style='width:100%;height:100%;'data-options='iconCls:\"icon-search\",plain:true'></a>"
return str;
}
}],
],
2.在表格属数据加载完成后需要激活控件并且写一个点击链接事件:
onLoadSuccess:function(data){
//激活内部控件
$.parser.parse($(".detail_more").parent());
$(".task_detail_more").on("click",function(){
var id = $(this).attr("id");
var title= $(this).attr("title");
//打开查看详情的窗口
$("#url_detail_dlg").dialog("open");
$("#url_detail_frame").attr("src","url_detail.jsp?id="+id+"&title="+title); //外联到一个页面
//如果是中文字符的变量 需要编码后再传输
//$("#url_detail_frame").attr("src","url_detail.jsp?id="+id+"&title="+ encodeURI(title)); //外联到一个页面
});
},
3.url_detail.jsp 页面需要接收传入的参数 :id, title
//在该页面head部分导入 解码类头文件
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.net.URLDecoder"
pageEncoding="utf-8"%>
//此外 在head部门的最下方写以下代码:
<%
String id = request.getParameter("id");
String title= request.getParameter("title");//如果title是中文 需要传入前进行编码,传入后解码
title= URLDecoder.decode(title, "UTF-8");//进行解码
%>
//在<script> </script>中写进行转换接收到的变量的代码
<script>
var baseCtx = "${pageContext.request.contextPath}"//本地路径
var id_new = '<%=id%>';//新变量id_new 就可以为新的页面使用
var title_new= '<%=title%>';//新变量title_new 就可以为新的页面使用
</script>