这个例子展示了用一个表格来作为多级表格。
jqGrid 实例
···代码省略···
···代码省略···
$(function(){
pageInit();
});
function pageInit(){
jQuery("#listsg11").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 : '#pagersg11',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
multiselect : false,
subGrid : true,
caption : "Grid as Subgrid",
subGridRowExpanded : function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created whitin a table data
// the id of this elemenet is a combination of the "sg_" + id of the row
// the row_id is the id of the row
// If we wan to pass additinal parameters to the url we can use
// a method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the flowing
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html(
"");
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
});
},
subGridRowColapsed : function(subgrid_id, row_id) {
// this function is called before removing the data
//var subgrid_table_id;
//subgrid_table_id = subgrid_id+"_t";
//jQuery("#"+subgrid_table_id).remove();
}
});
jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', {
add : false,
edit : false,
del : false
});
}
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 page = request.getParameter("page");
String jsondata = "{}";
if("1".equals(page)){
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:\"}" +
" }";
}else{
jsondata = "{" +
" \"page\":\"2\"," +
" \"total\":2," +
" \"records\":\"13\"," +
" \"rows\":[" +
" {" +
" \"id\":\"3\"," +
" \"cell\":[\"3\",\"2007-10-02\",\"Client 2\",\"300.00\",\"60.00\",\"360.00\",\"note invoice 3 & and amp test\"]" +
" }," +
" {" +
" \"id\":\"2\"," +
" \"cell\":[\"2\",\"2007-10-03\",\"Client 1\",\"200.00\",\"40.00\",\"240.00\",\"note 2\"]" +
" }," +
" {" +
" \"id\":\"1\"," +
" \"cell\":[\"1\",\"2007-10-01\",\"Client 1\",\"100.00\",\"20.00\",\"120.00\",\"note 1\"]" +
" }" +
" ]," +
" \"userdata\":{\"amount\":600,\"tax\":120,\"total\":720,\"name\":\"Totals:\"}}";
}
response.getWriter().write(jsondata);
}
}
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);
}
}
