jQuery easyUI datagrid行分組顯示源碼

首先，看看最終效果圖：

1、datagrid.jsp頁面源碼

<meta charset="UTF-8" />

//導入官方的js和css，href/scr路徑根據文件所在位置不同，而不一樣
<link href="/mobilemode/apps/solex/js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/mobilemode/apps/solex/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/mobilemode/apps/solex/js/easyui/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mobilemode/apps/solex/js/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/mobilemode/apps/solex/js/easyui/jquery.easyui.min.js"></script>

<table id="dg" class="easyui-propertygrid" title="待辦事項 [ <span id='count' style='font-family:微軟雅黑; color:#EE2C2C;font-size:14px'></span> ]"
data-options="rownumbers:true,
singleSelect:false,
url:'/mobilemode/apps/solex/test/dbsy/queryToDo.jsp',
fit:true,
selectOnCheck: false,

onDblClickRow: function(){ openOldOa(); },

method: 'get',
showGroup: true,
scrollbarSize: 0,
groupFormatter: groupFormatter,

onLoadSuccess:function(data){
$('#dg').datagrid('collapseGroup');
},

columns: mycolumns">
</table>


<script type="text/javascript">
var mycolumns = [[
{field:'code',title:'單號',width:100,sortable:true},
{field:'description_',title:'項目',width:100,sortable:true},
{field:'name_',title:'當前狀態',width:100,sortable:true},
{field:'requester',title:'申請人',width:100,sortable:true},
{field:'create_',title:'到達時間',width:100,resizable:false}
]];




//加載頁面queryToJson.jsp
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager');
$.ajax({
type:'get',//請求方式
url:'/mobilemode/apps/solex/test/dbsy/queryToDo.jsp', // AJAX HTTP請求接口
data:'',
dataType:'json',//請求類型爲json
timeout:7000,//請求超時後停止請求
success: function(json){
var d=json.total;//直接.total獲取total屬性
$('#count').html(d);
}
});

})

//雙擊表格行，在新窗口中打開頁面，並登陸到舊oa
function openOldOa(){
window.open('/interface/Entrance.jsp?id=osapdev&gopage=/login!forward.action');
}

//行分組之後，在頁面上標題顯示的格式
function groupFormatter(fvalue, rows){
return fvalue + ' （ <span style="color:#EE2C2C;font-size:13px">' + rows.length + ' </span>'+'）';
}
</script>

2、數據查詢的jsp頁面

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="weaver.interfaces.datasource.DataSource"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.apache.commons.lang.time.DateUtils"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>  
<%@page import="java.sql.DriverManager"%>  
<%@page import="java.sql.ResultSet"%>  
<%@page import="java.sql.Statement"%>  
<%@page import="java.sql.Connection"%>
<%@page import="java.util.Date"%>
<%@page import="java.util.Calendar"%>
<%@page import="weaver.hrm.*"%>
<%@page import="weaver.general.StaticObj"%>


<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  


<%  
  //除了需要導入的包和編碼，其他不要導入
        //獲取當前登錄用戶的userCode
        User user = HrmUserVarify.getUser(request, response);/*泛微系統當前登錄用戶*/
        //String loginId=request.getParameter("loginId");
        String loginId="";
if(user!=null){
loginId=user.getLoginid();
};


        /* sql語句中日期的來源
        1、將待辦結束日期設爲當前日期，待辦開始日期設爲當前日期推前一年，且爲當月第一天
2、判斷user裏面的待辦開始日期和結束日期，如果不爲空，則將待辦開始日期和結束日期賦值給startDate和endDate
3、將endDate延後一天
4、轉爲規定格式
*/
        Date endDate = new Date();//獲取當前日期
        
        Calendar cal = Calendar.getInstance();
        cal.setTime(endDate);//日期設爲當前日期
        cal.set(Calendar.DAY_OF_MONTH, 1);//當前日期對象cal的天數，設爲當月的第一天
        cal.add(Calendar.YEAR, -1);//當前日期對象cal的年數減少一年
        
      Date startDate=cal.getTime();//該日期爲：當前日期推前一年，並將當月天數設爲第一天
     
      Calendar cal1 = Calendar.getInstance();
      cal1.setTime(endDate);
      cal1.add(Calendar.DAY_OF_YEAR, 1);
     
      endDate = cal1.getTime();//設置爲當前日期加1天
     
      SimpleDateFormat dateFormat1 = new SimpleDateFormat("yyyy-MM-dd");
SimpleDateFormat dateFormat2 = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");

//將日期轉爲String類型
String endDateStr = dateFormat1.format(endDate);
String startDateStr = dateFormat1.format(startDate);

//sql語句
        String sql = "select t.code,t.item,t.description_,t.name_,t.url,t.requester,t.create_,t.prestart_,t.actorid_,t.modulecode "
        +"from jbpm_taskinstance t  "
        +"where t.create_ between to_date('"
            + startDateStr
            + "','YYYY-MM-DD')"
            + " and to_date('"
            + endDateStr
            + "','YYYY-MM-DD')"
        +"and t.issuspended_=0   "
        +"and t.isopen_=1  "
        +"and t.actorid_='"+loginId+"' "
        +"and not exists (select 1 from jbpm_token t1 where  t1.id_ =t.token_ and t1.issuspended_=1)"; 


        Connection conn = null;  
        Statement st = null;  
        ResultSet rs = null;
        try {  
        DataSource ds = (DataSource) StaticObj.getServiceByFullname(("datasource.196test"), DataSource.class);
conn = ds.getConnection();  
           st = conn.createStatement();  
           rs = st.executeQuery(sql);  
           
//將結果集用Map接收
List<Map<String,String>> list = new ArrayList();

while (rs.next()) {  
Map<String,String> map=new HashMap();

map.put("code",  rs.getString("code"));
map.put("item",  rs.getString("item"));
map.put("description_",  rs.getString("description_"));
map.put("name_",  rs.getString("name_"));
map.put("url",  rs.getString("url"));
map.put("requester",  rs.getString("requester"));
map.put("create_",  rs.getString("create_"));
map.put("prestart_",  rs.getString("prestart_"));
map.put("actorid_",  rs.getString("actorid_"));
map.put("modulecode",  rs.getString("modulecode"));

map.put("group",  rs.getString("description_"));//前端分組
list.add(map);
           } 

//拼接每條記錄的code、description_、name_、url、requester字段，然後去重
List<Map<String,String>> noRepeatList = new ArrayList();
Date date = new Date();
String key="";
String strSum="";

//遍歷Map的list集合
for(Map<String,String> m:list){ 
       key = m.get("code")+m.get("description_")+m.get("name_")+m.get("url")+m.get("requester");
       
//如果strSum裏面包含了key，表示當前對象重複，不在添加進去
if (strSum.indexOf(key) > -1) {
} else {
strSum = strSum + ";@^" + key;
noRepeatList.add(m);//不重複，則添加進來
}
   }
list = noRepeatList;
 
JSONObject jsonObject = new JSONObject();
JSONArray jsonArray =JSONArray.fromObject(list);
           
int totalSize = jsonArray.size();
//多條
jsonObject.put("total", totalSize); 
jsonObject.put("rows", jsonArray);


out.print(jsonObject);//最終的到得數據
            

               
        } catch (Exception e) {  
            out.print(e.getMessage());
  
        } finally {  
            try {  
                rs.close();  
            } catch (Exception e) {  
            }  
            try {  
                st.close();  
            } catch (Exception e) {  
            }  
            try {  
                conn.close();  
            } catch (Exception e) {  
            }  
        }  
%>