62jqGrid - 多级排序-CFANZ编程社区

这个例子展示了另一个新功能:multisorting。

为此我们引入了一个新的参数:multiSort，当设定次参数之后，就可以指示服务器支持多列排序。

如果数据是本地数据，这个选项也是支持的。因此当从服务器上获取数据的时候，sidx参数包含了要排序的字段的顺序。

他是一个用逗号分隔的格式化字符串，例如field1 asc,field2 desc…fieldN（字段名排序类型）。

注意最后一个字段是没有asc或者desc的。他应该从sort参数来获取。当这个参数是true，那么排序的行为是降序。

表头字段的第一次点击，排序是依赖colModel中的firstsortoption这个参数，或者表格的sortorder这个参数。

第二次点击，是相反的排序，第三次点击这个字段，是把这个字段的排序删除掉。

62jqGrid - 多级排序_字段

HTML代码举例

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="list452"></table>
    <div id="pager452" ></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#list452").jqGrid({
       url:ctx+'/LocalData',
    datatype: "json",
    height: 255,
    width: 600,
       colNames:['Index','Name', 'Code'],
       colModel:[
         {name:'item_id',index:'item_id', width:65,  sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
         {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
         {name:'item_cd',index:'item_cd', width:100}
       ],
       rowNum:50,
    rowTotal: 200,
    rowList : [20,30,50],
    loadonce:true,
       mtype: "GET",
    rownumbers: true,
    rownumWidth: 40,
    gridview: true,
    multiSort: true,
       pager: '#pager452',
       sortname: 'item_id',
      viewrecords: true,
      sortorder: "asc",
    caption: "Loading data from server at once"  
  });
  jQuery("#list452").jqGrid('filterToolbar',{searchOperators : true});
  jQuery("#list452").jqGrid('navGrid','#pager452', {add:false, edit:false, del:false, search:false});

}

java servlet代码举例

package net.mn886.blog.jqgrid.new_3_7;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

/**
 * Servlet implementation class LocalData
 */
public class LocalData extends HttpServlet {
  private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LocalData() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(request, response);
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    
    JSONArray rows = new JSONArray();
    //模拟数据
    for(int i=0;i<2000;i++){
      JSONObject item = new JSONObject("{\"id\":\""+(i+1)+"\",\"cell\":[\""+(i+1)+"\",\"Lorem\",\"575878\"]}");
      rows.put(item);
    }
    JSONObject jsondata = new JSONObject();
    jsondata.put("page", "1");
    jsondata.put("total", 7);
    jsondata.put("records", "12269");
    jsondata.put("rows", rows);
    response.getWriter().write(jsondata.toString());
  }

}