我们可以改变多级表格的图标。我们需要改变多级表格的一个选项，他指向这个主题的图标。
HTML代码举例
<html>
<head>
<title>jqGrid 实例</title>
</head>
<body>
···代码省略···
<table id="sg1"></table>
<div id="psg1"></div>
···代码省略···
</body>
</html>
javascript代码举例
$(function(){
pageInit();
});
function pageInit(){
jQuery("#sg1").jqGrid({
url:ctx+'/JSONData',
datatype: "JSON",
height: 190,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:8,
rowList:[8,10,20,30],
pager: '#psg1',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
multiselect: false,
subGrid: true,
caption: "Custom Icons in Subgrid",
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e"
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:ctx+"/SubGrid?q=2&id="+row_id,
datatype: "json",
colNames: ['No','Item','Qty','Unit','Line Total'],
colModel: [
{name:"num",index:"num",width:80,key:true},
{name:"item",index:"item",width:130},
{name:"qty",index:"qty",width:70,align:"right"},
{name:"unit",index:"unit",width:70,align:"right"},
{name:"total",index:"total",width:70,align:"right",sortable:false}
],
rowNum:20,
pager: pager_id,
sortname: 'num',
sortorder: "asc",
height: '100%'
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
}
});
jQuery("#sg1").jqGrid('navGrid','#psg1',{add:false,edit:false,del:false});
}Master java servlet代码举例
package net.mn886.blog.jqgrid.loadding_data;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class JSONData
*/
public class JSONData extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JSONData() {
super();
// TODO Auto-generated constructor stub
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req,resp);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String jsondata = "{\"page\":\"1\"," +
" \"total\":2," +
" \"records\":\"13\"," +
" \"rows\":" +
" [" +
" {" +
" \"id\":\"13\"," +
" \"cell\":" +
" [\"13\",\"2007-10-06\",\"Client 3\",\"1000.00\",\"0.00\",\"1000.00\",null]" +
" }," +
" {" +
" \"id\":\"12\"," +
" \"cell\":" +
" [\"12\",\"2007-10-06\",\"Client 2\",\"700.00\",\"140.00\",\"840.00\",null]" +
" }," +
" {" +
" \"id\":\"11\"," +
" \"cell\":" +
" [\"11\",\"2007-10-06\",\"Client 1\",\"600.00\",\"120.00\",\"720.00\",null]" +
" }," +
" {" +
" \"id\":\"10\"," +
" \"cell\":" +
" [\"10\",\"2007-10-06\",\"Client 2\",\"100.00\",\"20.00\",\"120.00\",null]" +
" }," +
" {" +
" \"id\":\"9\"," +
" \"cell\":" +
" [\"9\",\"2007-10-06\",\"Client 1\",\"200.00\",\"40.00\",\"240.00\",null]" +
" }," +
" {" +
" \"id\":\"8\"," +
" \"cell\":" +
" [\"8\",\"2007-10-06\",\"Client 3\",\"200.00\",\"0.00\",\"200.00\",null]" +
" }," +
" {" +
" \"id\":\"7\"," +
" \"cell\":" +
" [\"7\",\"2007-10-05\",\"Client 2\",\"120.00\",\"12.00\",\"134.00\",null]" +
" }," +
" {" +
" \"id\":\"6\"," +
" \"cell\":" +
" [\"6\",\"2007-10-05\",\"Client 1\",\"50.00\",\"10.00\",\"60.00\",\"\"]" +
" }," +
" {" +
" \"id\":\"5\"," +
" \"cell\":" +
" [\"5\",\"2007-10-05\",\"Client 3\",\"100.00\",\"0.00\",\"100.00\",\"no tax at all\"]" +
" }," +
" {" +
" \"id\":\"4\"," +
" \"cell\":" +
" [\"4\",\"2007-10-04\",\"Client 3\",\"150.00\",\"0.00\",\"150.00\",\"no tax\"]" +
" }" +
" ]," +
" \"userdata\":{\"amount\":3220,\"tax\":342,\"total\":3564,\"name\":\"Totals:\"}" +
" }";
response.getWriter().write(jsondata);
}
}
Subgrid java servlet代码举例
package net.mn886.blog.jqgrid.advanced;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SubGrid
*/
public class SubGrid extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SubGrid() {
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
String id = request.getParameter("id");
int iId = Integer.parseInt(id);
String jsondata = "{}";
switch (iId) {
case 13:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"1\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 13\",\"1.00\",\"1000.00\",\"1 000.00\"]" +
" }" +
" ]" +
" }";
break;
case 12:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"1.00\",\"400.00\",\"400.00\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 4\",\"1.00\",\"300.00\",\"300.00\"]" +
" }" +
" ]" +
" }";
break;
case 11:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"4\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 1\",\"2.00\",\"100.00\",\"200.00\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"3.00\",\"50.00\",\"150.00\"]" +
" }," +
" {" +
" \"id\":\"3\"," +
" \"cell\":[\"3\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
" }," +
" {" +
" \"id\":\"4\"," +
" \"cell\":[\"4\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
" }" +
" ]" +
" }";
break;
case 10:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 4\",\"1.00\",\"70.00\",\"70.00\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 5\",\"3.00\",\"10.00\",\"30.00\"]" +
" }" +
" ]" +
" }";
break;
case 9:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 3\",\"1.00\",\"60.00\",\"60.00\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 6\",\"1.00\",\"140.00\",\"140.00\"]" +
" }" +
" ]" +
" }";
break;
case 8:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"3\"," +
" \"rows\":[" +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"1.00\",\"120.00\",\"120.00\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
" }," +
" {" +
" \"id\":\"3\"," +
" \"cell\":[\"3\",\"item 3\",\"1.00\",\"30.00\",\"30.00\"]" +
" }" +
" ]" +
" }";
break;
case 7:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 5\",\"2.00\",\"10.00\",\"20.00\"]" +
" }" +
" ]" +
" }";
break;
case 6:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"1\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 4\",\"1.00\",\"50.00\",\"50.00\"]" +
" }" +
" ]" +
" }";
break;
case 5:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"1\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
" }" +
" ]" +
" }";
break;
case 4:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"1.00\",\"50.00\",\"50.00\"]" +
" }" +
" ]" +
" }";
break;
case 3:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
" }" +
" ]" +
" }";
break;
case 2:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 1\",\"2.00\",\"20.00\",\"40.00\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"4.00\",\"40.00\",\"160.00\"]" +
" }" +
" ]" +
" }";
break;
case 1:
jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\"2\"," +
" \"rows\":[" +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"item 1\",\"1.00\",\"20.00\",\"20.00\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"item 2\",\"2.00\",\"40.00\",\"80.00\"]" +
" }" +
" ]" +
" }";
break;
default:
break;
}
response.getWriter().write(jsondata);
}
}
