jqgrid实现子表格
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代码
$(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 {
}
}方法deleteItem()中，把子表格的id当做参数，但是在接收参数时，参数是一个HTMLTableElememt，通过subgrid_table_id.id获取表格id
版权声明：本文为dreamstar99原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。