这个例子展示了另一个新功能:multisorting。
为此我们引入了一个新的参数:multiSort，当设定次参数之后，就可以指示服务器支持多列排序。
如果数据是本地数据，这个选项也是支持的。因此当从服务器上获取数据的时候，sidx参数包含了要排序的字段的顺序。
他是一个用逗号分隔的格式化字符串，例如field1 asc,field2 desc…fieldN（字段名 排序类型）。
注意最后一个字段是没有asc或者desc的。他应该从sort参数来获取。当这个参数是true，那么排序的行为是降序。
表头字段的第一次点击，排序是依赖colModel中的firstsortoption这个参数，或者表格的sortorder这个参数。
第二次点击，是相反的排序，第三次点击这个字段，是把这个字段的排序删除掉。
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()); } }
