jQuery笔记[1]——jqGrid中实现自定义链接弹出subgrid

浏览数：214 / 时间：2015年06月09日

问题描述：

　　jqGrid中可以实现subGrid，但是默认的都是在表格的最左边有一个加号，点击之后在当前行的下面expand出一个子表。我想在表格中添加一个超链接，点击后可以实现expand一个subgird。

参考资料：

http://www.trirand.com/blog/jqgrid/jqgrid.html （Advanced - Grid as Subgrid）
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

解决方法：

　　1.　　首先是实现Grid as Subgrid，在上面两个参考链接中都很清楚。唯一的区别就在于，我现在还在做原型，后台的代码没有实现，所以用的是local的data

datatype : "local",
data : subData,

　　2.　　实现对subgrid的手工expand

　　在第三个参考链接中我找到了三个方法，如下表，可以实现对subgrid的expand、collapse以及两者之间的切换（toggle）。

Method	Parameters	Returns	Description
expandSubGridRow	rowid	jqGrid object	dynamically expand the subgrid row with the id = rowid
collapseSubGridRow	rowid	jqGrid object	dynamically collapse the subgrid row with the id = rowid
toggleSubGridRow	rowid	jqGrid object	dynamically toggle the subgrid row with the id = rowid

　　我最开始的思路是在链接的onclick里面调用一个function，这个function里面再实现上面的方法。但是没有实现，原因可能是jqgrid不允许被外部的函数操作。

　　后来不调用function，直接调用上面的方法：

gridComplete : function() {
    var ids = jQuery("#student_list").jqGrid(‘getDataIDs‘);
    var showData;for ( var i = 1; i <= ids.length; i++) {
　　　　　//i表示rowid，从1开始
        showData = "<a class=‘showData‘ href=‘#‘ onclick=\"$(‘#student_list‘).toggleSubGridRow(‘"+ i + "‘);\">显示/隐藏数据项</a>";
        jQuery("#student_list").jqGrid(‘setRowData‘,ids[i - 1], {dataItem : showData});
    }
}