JqGrid-同一级别上的多个子网格 [英] JqGrid - Multiple subgrid at the same level
问题描述
任何人都可以在同一级别的演示或示例中指向多个子网格.我已经看过 http://www.trirand.net/demoaspnet.aspx .我正在寻找Javascript中的内容.
Can anyone point to multiple subgrid at the same level demo or example . I have already looked at http://www.trirand.net/demoaspnet.aspx. I'm looking for something in javascript.
推荐答案
The demo from the trirand.net shows just the following
创建上图所示的子网格非常容易.您应该只了解 Subgrid as Grid 的工作原理.
It's very easy to create the subgrids like on above picture. You should just understand how the technique Subgrid as Grid works.
如果用户单击扩展"("+")图标jqGrid，则在扩展下方创建一个空的新行.行(<tr>)将获得类"ui-subgrid".在jqGrid行的内部，创建两个<td>元素，其中一个td.subgrid-cell和另一个td.subgrid-data以及主要的子网格信息. jqGrid分配colspan，以便将<td>扩展到网格的最后一列.在td.subgrid-data jqGrid内部创建空div.tablediv .空的div获取唯一的id属性，该属性将由网格ID的ID，字符"_"和扩展行的ID构成.
If the user click on "Expand" ("+") icon jqGrid create empty new row below of the expanding. The row (<tr>) will get the class "ui-subgrid". Inside of the row jqGrid create two <td> elements one td.subgrid-cell and another td.subgrid-data with the main subgrid information. jqGrid assign colspan so that the <td> will be extended till the last column of the grid. Inside of the td.subgrid-data jqGrid create empty div.tablediv. The empty div get unique id attribute which will be constructed from the id of the grid id, the character "_" and id of expanding row.
下一步是最重要的. jqGrid调用subGridRowExpanded回调.回调的第一个参数是空<div>(div.tablediv)的id，应在其中放置"subgrid"内容.代替<table>元素，可以放置任何其他HTML片段.请参见<table>元素放置一些唯一的ID，然后使用jqGrid在表的位置上创建网格.
The next step is the mostly important. jqGrid call subGridRowExpanded callback. The first parameter of the callback is the id of empty <div> (the div.tablediv) where "subgrid" content should be placed. Instead of <table> element one can place any other HTML fragmant . See the old demo from the answer. So to create "multiple subgrid at the same level" one need just place two <table> element with some unique ids and use jqGrid to create grids on place of the tables.
这篇关于JqGrid-同一级别上的多个子网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
