wangdaping
/
wp


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数据分组</title>
<!--框架必需start-->
<script type="text/javascript" src="<%=path%>/libs/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/libs/js/language/cn.js"></script>
<script type="text/javascript" src="<%=path%>/libs/js/framework.js"></script>
<link href="<%=path%>/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="<%=path%>/"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="<%=path%>/libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

</head>
<body>
<div class="box1">
    分组时只能对已经加载的数据分组。第二个例子，在分组时对每组数量做了统计，并设置了更个性化的分组效果。
</div>

	<div class="padding_right5">
		<div id="grid1"></div>
    </div>
	<div class="padding_right5">
		<div id="grid2"></div>
    </div>
<script type="text/javascript">
		var grid1 = null;
		var grid2 = null;
		 //定义本地数据
	  var gridData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
	  {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":5},
	  {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":5},
	  {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":5},
	  {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":5},
	  {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
	  {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
	  ]}
		function initComplete(){
			 //不使用分组渲染
			 grid1 = $("#grid1").quiGrid({
		        columns: [ 
		            { display: '姓名', name: 'name',     align: 'center', width: "25%"},
		            { display: '性别', name: 'sex',      align: 'center', width: "25%"},
		            { display: '部门', name: 'deptName', align: 'center', width: "25%", isSort:false},
		            { display: '学历', name: 'degree',   align: 'center', width: "25%" }
		        ], 
		        groupColumnName: "sex", groupColumnDisplay: "性别",
		        data: gridData, pageSize: 10, sortName: 'id',rownumbers:true,
		        height: '450', width:"100%"
		    });
		    
		    //使用分组渲染
		    grid2 = $("#grid2").quiGrid({
		        columns: [ 
		            { display: '姓名', name: 'name',     align: 'center', width: "25%"},
		            { display: '性别', name: 'sex',      align: 'center', width: "25%"},
		            { display: '部门', name: 'deptName', align: 'center', width: "25%", isSort:false},
		            { display: '学历', name: 'degree',   align: 'center', width: "25%" }
		        ], 
		        groupColumnName: "sex", groupColumnDisplay: '性别',
		        //可以使用groupColumnDisplay，也可以在return语句中自己拼语句
		        groupRender: function(groupValue, groupData, groupColumnDisplay){
		            if("女" == groupValue){
		                return "<font color=red>美女" + "【共" + groupData.length + "人】</font>";
		            }else{
		                return "帅哥【共" + groupData.length + "人】";
		            }
		        },
		        data: gridData, pageSize: 10, sortName: 'id',rownumbers:true,
		        height: '450', width:"100%"
		    });
		}
</script>
</body>