这篇文章本人亲测后转载的，这篇文章中确实存在多余的代码，但是主要的代码是可以实现的，
大家可以根据自己的应用场景，适当的取舍
subGridRowExpanded ：当点击“+”展开子表格时，将触发此选项定义的事件方法；这时会自动创建一个div,在这个方法中可以获取到这个div的id和表格中该行的id
subGridRowColapsed ：当点击“-”收起子表格时，将触发此选项定义的事件方法；
在点击“-”时，子表格的div自动清除
在点击”+”时，也可以不去添加子表格，而去做别的自己需要的操作
html代码
<div class="panel-body"><!--定义外表格容器-->
<table id="list" style="heigth: 1000px"></table>
<div id="pager"></div>
</div>js代码
注意：方法deleteItem()中，把子表格的id当做参数，但是在接收参数时，参数是一个HTMLTableElememt，通过subgrid_table_id.id获取表格id
$(function() {
//页面加载完成之后执行
pageInit(); //显示表格
});
function pageInit() { //创建jqGrid组件
jQuery("#list")
.jqGrid(
{
height : 400,
url : "collectLine/json/all",//组件创建完成之后请求数据的url
datatype : "json",//请求数据返回的类型。可选json,xml,txt
colNames : [ 'id', '名称', '描述', '线路长度', '是否有效',
'目的地', '编辑' ],
colModel : [ {
name : 'id',
index : 'id',
width : 50,
align : 'left'
}, {
name : 'name',
index : 'name',
width : 80,
align : 'left'
}, {
name : 'remark',
index : 'remark',
width : 200,
align : 'left'
}, {
name : 'length',
index : 'length',
width : 100,
align : 'left'
}, {
name : 'isValid',
index : 'isValid',
formatter : validFormatter,
width : 150,
align : 'left'
}, {
name : 'destination.name',
index : 'destination.name',
width : 100,
align : 'left'
}, {
name : 'edit',
index : 'edit',
width : 150,
align : 'left'
} ],
rowNum : 10,//一页显示多少条 传后台
rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
pager : '#pager',//表格页脚的占位符(一般是div)的id
sortname : 'name',//初始化的时候排序的字段 默认的排序列 传后台
sortorder : "asc",//排序方式,可选desc,asc
mtype : "post",//向后台请求数据的ajax的类型。可选post,get
viewrecords : true,
jsonReader : {
root : "content", //数据
page : " ", //当前页
total : "totalPages", // 总页数
records : "totalElements",//从服务器端返回的记录数
repeatitems : false,
id : "id"
},
gridComplete : function() { // 数据加载完成后 添加 采购按钮
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn = "<div class='btnBox'> "
+ "<button class='btn btn-primary' onclick='editLine("
+ id
+ ")'>编辑</button> "
+ "<button class='btn btn-primary' onclick='deleteLine("
+ id + ")'>删除</button></div>";
$("#list").jqGrid('setRowData', id, {
edit : editBtn
});
}
},
caption : "",//表格的标题名字
subGrid : true,//开启子表格支持
//子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id
subGridRowExpanded : function(subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id
bindSubGrid(subgrid_id, row_id);
}
});
/*创建jqGrid的操作按钮容器*/
/*可以控制界面上增删改查的按钮是否显示*/
jQuery("#list").jqGrid('navGrid', '#list', {
edit : false,
add : false,
del : false,
search : false
});
}
function bindSubGrid(subgrid_id, collectLineId) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t"; // (3)根据subgrid_id定义对应的子表格的table的id
var subgrid_pager_id;
subgrid_pager_id = subgrid_id + "_pgr" // (4)根据subgrid_id定义对应的子表格的pager的id
// (5)动态添加子报表的table和pager
$("#" + subgrid_id)
.html(
"<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");
// (6)创建jqGrid对象
$("#" + subgrid_table_id)
.jqGrid(
{
url : 'collectLinePoint/json/all/' + collectLineId, // (7)子表格数据对应的url，注意传入的contact.id参数
datatype : "json",
colNames : [ 'id', '图片', '名称', '描述', '排序', '纬度',
'经度', '海拔', '编辑' ],
colModel : [ {
name : "id",
index : "id",
width : 50,
key : true
}, {
name : "picUrl",
index : "picUrl",
formatter : picFormatter,
width : 100
}, {
name : "name",
index : "name",
width : 80,
align : "left"
}, {
name : "remark",
index : "remark",
width : 80,
align : "left"
}, {
name : "sort",
index : "sort",
width : 50,
align : "left"
}, {
name : "altitude",
index : "altitude",
width : 80,
align : "left"
}, {
name : "longitude",
index : "longitude",
width : 80,
align : "left"
}, {
name : "latitude",
index : "latitude",
width : 80,
align : "left"
}, {
name : "edit",
index : "edit",
width : 150
} ],
rowNum : 10,
rolList : [ 10, 20, 30 ],
pager : subgrid_pager_id,
mtype : "post",
viewrecord : true,
jsonReader : {
root : "content", //数据
page : "", //当前页
total : "totalPages", // 总页数
records : "totalElements",//从服务器端返回的记录数
repeatitems : false,
id : "id"
},
gridComplete : function() { // 数据加载完成后 添加 采购按钮
var ids = jQuery("#" + subgrid_table_id)
.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn = "<div class='btnBox'> "
+ "<button class='btn btn-primary' onclick='editItem("
+ id
+ ")'>编辑</button> "
+ "<button class='btn btn-primary' onclick='deleteItem("
+ subgrid_table_id + "," + id
+ ")'>删除</button></div>";
$("#" + subgrid_table_id).jqGrid(
'setRowData', id, {
edit : editBtn
});
}
},
});
}
/*根据 id删除一条记录*/
function deleteItem(subgrid_table_id, id) {
var r = confirm("确认要删除吗？"); //确认框的字
if (r == true) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "DRWorkDivision/delete/" + id,
error : function() {
alert("失败");
},
success : function(data) {
$("#" + subgrid_table_id.id).trigger("reloadGrid");
}
});
} else {
}
}