Jqgrid Subgrid Configure how the first load dynamically expands all the sub-tables

Sometimes the need to load the table by default when the table data is also shown, after studying the relevant Subgrids API configuration is as follows:

Properties	type	Description	Default Value
Subgrid	Boolean	Set to True to enable the sub-table. If you enable a sub-table, additional columns are added to the left of the parent table. This column contains a "plus" picture indicating that the user can click on it to expand the row, and the default all rows of the sub-table are shrunk.	False
Subgridoptions	Object	Configuration of the Sub-table, below is the default value of the configuration -Shrink JavaScript Code { Plusicon: "Ui-icon-plus", Minusicon: "Ui-icon-minus", Openicon: "UI-ICON-CARAT-1-SW", Expandonload: false, Selectonexpand: false, Reloadonexpand: True } Plusicon and Minusicon : Defines an icon to expand/Shrink a sub-table. The name needs to be chosen from the set theme. Openicon : When line expands, the icon that appears under Minusicon expandonload : Set to True if the sub-table data is automatically expanded after it has been loaded (when set to true make it so and all rows would be expanded automatically When a new set of data is loaded. ） selectonload : Set to True, clicking the expand icon (Plusicon) will select this row of data in the parent table Reloadonexpand : Set to False, expand only once data, then click Icon click Action Just Show or hide the sub-table, and no longer send Ajax re-fetch data
Subgridmodel	Array	The column model that describes the sub-tabular data is only available when Subgrid is set to Grud, syntax -ShrinkageJavaScriptCode Subgridmodel: [ {Name: [' name_1 ',' name_2 ',...,' Name_n '], Width: [width_1,width_2,..., Width_n], Align: [' left ',' center ',...,' right '], params: [Param_1,..., Param_n], mapping:['name_1_map ',' name_2_map ',..., 'Name_n_map ']} name: Sub-table list header display label content width: Array of column widths, which need to match the length of the name array align: The column is in its way and can be left,center,right. Do not set default to left params: Add additional parameter to Subgridurl configuration (an array in which we can add a name from main grid ' s Colmodel to pass as additional P Arameter to the Subgridurl.) mapping: Used when repeatitems in the sub-table is set to False. The mapping used to define the name of the sub-table data column. If this parameter is not set, the name configuration is used as the mapping.
Subgridtype	Mixed	The Settings sub-table can be loaded as a service (this option allows loading subgrid as a services.). If this item is not set, the datatype configuration of the parent table will be used, as shown in the following example	Null
Subgridwidth	Integer	Set the sub-table width	20
Subgridurl	String	Configures the sub-tabular data source URL address. Jqgrid adds the parent row ID as a parameter to the add-on pass to this URL address. If you do not need to pass additional parameters, you can configure the params in Subgridmodel to pass additional parameters.	Empty string
Ajaxsubgridoptions	Object	Sets the global configuration of the Sub-table AJAX request data. Overrides all current Ajax request configurations in the sub-table, including the complete event.	Empty Object

To configure a sub-table, you need to configure Subgrid configuration items in XmlReader or Jsonreader, and the XmlReader default configuration is as follows:

-Shrink JavaScript code XmlReader: {...   Subgrid: {      "rows",              "Row",true,       "cell"   }} 

jsonreader-shrink JavaScript code jsonreader: {...   Subgrid: {      "rows",       true,       "cell"   }}

The mapping rule is the same as the parent table, for more information refer to:
Jqgrid XML data source Reader option configuration
Jqgrid JSON data source Reader option configuration
Jqgrid datatype configured as function
Jqgrid Custom Data

In order for the child table to be the server, the Subgridtype needs to be set correctly (in the order to use correct subgridtype as service), the following example shows the implementation:

JQuery ("#grid_id"). Jqgrid ({...    function (ROWIDPRM) {      jquery.ajax ({         URL:' url_to_the_service ',         DATA:ROWIDPRM,         dataType: "JSON",         function(jsondata,stat) {            if(stat== "Success") {                var thegrid = JQuery ("#grid_id")//[0];               Thegrid.subgridjson (eval ("+jsondata.responsetext+"), Rowidprm.id);}}      );   Subgrid ...});

The ROWIDPRM parameter, which contains the ID of the expanded row for the key value pair object, sets additional parameters for the Subgridmodel configuration, as described in the Subgridjson method below.

Event

Event parameter Description

• PID: Unique ID of the DIV element where the content of the sub-table is placed
• ID: data row ID
• Spostdata: Data submitted when a sub-table sends a request

Event	Parameters	Description
Subgridbeforeexpand	PID, ID	Triggered before the sub-table is expanded. Need to return True/false, return false to prevent expansion of the sub-table
subgridrowexpanded	PID, ID	Triggers when a sub-table is expanded to add custom data to the child table
Subgridrowcolapsed	PID, ID	Trigger after shrinking sub-table, need to return True/false, return false do not shrink sub-table
Serializesubgriddata	Spostdata	Serializing the data passed to the AJAX request requires that the serialized data be returned. Used when you need to pass custom data to the server, such as strings in json/xml format.

Methods

Method	Parameters	return value	Description
Expandsubgridrow	rowID	Jqgrid Object	Dynamically expands the sub-table of the specified rowID row
Collapsesubgridrow	rowID	Jqgrid Object	Dynamically shrinks a sub-table of a row that specifies ROWID
Togglesubgridrow	rowID	Jqgrid Object	Dynamically toggles the expansion/contraction state of a sub-table of a specified rowid row
Subgridjson	JSON, ROWID	False	Add data to the sub-table, JSON to object, ROWID to the data row ID you want to add
Subgridxml	XML, ROWID	False	Add data to the child table, XML is an XML DOM node, ROWID is the data row ID that needs to be added

Display detailed data from each row of data and display it to the table

JQuery (document). Ready (function() {JQuery ("#list"). Jqgrid ({URL:' Example.php ', datatype:' XML ', Mtype:' GET ', colnames:[' Inv No ', ' Date ', ' Amount ', ' tax ', ' total ', ' Notes '], Colmodel: [{name:' Invid ', index: ' Invid ', width:55}, {name:' Invdate ', index: ' Invdate ', width:90}, {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}], pager:' #pager ', RowNum:10, rowlist:[10,20,30], Sortname:' Invid ', SortOrder:' Desc ', Viewrecords:true, Caption:' My first grid ', Subgrid:true, Subgridurl:"Subgrid.php",

Subgridoptions: {

Plusicon: "Ace-icon fa fa-plus Center bigger-110 Blue",
Minusicon: "Ace-icon fa Fa-minus Center bigger-110 Blue",
Openicon: "Ace-icon FA fa-chevron-right Center Orange",
Expandonload:true,
Selectonexpand:false,
Reloadonexpand:false
},

Onselectrow:function (ROWID, status, E) {
Selectoptid = rowID;
Console.log (' selectoptid--: ' + rowid);
//$ ("#grid-table"). Expandsubgridrow (ROWID);
$ ("#grid-table"). Jqgrid (' Expandsubgridrow ', rowid);
},

    Subgridmodel: [       {      name  :[' No ', ' Item ', ' Qty ', ' Unit ', ' line Total '],      width: [       align, "left", "left", "right", "right", "right",and      params: [' Invdate ']       }  

<?PHP//get the ID passed automatically to the request$id = $_get[' id ']; //Get the invoice date passed to this request via params array in//Subgridmodel. We don't use it here-this are only demostration$date _INV = $_get[' invdate ']; Suboptions={plusicon:"Ui-icon-plus", Minusicon:"Ui-icon-minus", Openicon:"UI-ICON-CARAT-1-SW", Expandonload:false, Delayonload:50, Selectonexpand:false, Reloadonexpand:true        }; //Connect to the database$db = mysql_connect ($dbhost, $dbuser, $dbpassword) or Die ("Connection Error:". Mysql_error ()); mysql_select_db ($database) or Die ("Error conecting to DB."); //construct the query suboptions = {Plusicon: "Ui-icon-plus", Minusicon:"Ui-icon-minus", Openicon:"UI-ICON-CARAT-1-SW", Expandonload:false, Delayonload:50, Selectonexpand:false, Reloadonexpand:true        }; $SQL= "Select Item_num, Item, qty, Unit from Invlines WHERE invid=". $id. " ORDER by Item "; $result= mysql_query ($SQL) or Die ("couldn?t execute query."). Mysql_error ()); //set the header informationif(Stristr ($_server["http_accept"), "Application/xhtml+xml") {header ("Content-type:application/xhtml+xml;charset=utf-8"); } Else{Header ("Content-type:text/xml;charset=utf-8"); } Echo"<?xml version= ' 1.0 ' encoding= ' utf-8 '?> '; Echo"<rows>"; //Be sure to put text data in CDATA while($row =mysql_fetch_array ($result, MYSQL_ASSOC)) {echo"<row>"; Echo"<cell>". $row [Item_num]. " </cell> "; Echo"<cell><! [cdata[]. $row [item]. "] ></cell> "; Echo"<cell>". $row [qty]. " </cell> "; Echo"<cell>". $row [unit]. " </cell> "; Echo"<cell>". Number_format ($row [qty]* $row [unit],2, '. ', '). " </cell> "; Echo"</row>"; } Echo"</rows>"; ?>

Enable/disable sub-tables

The Sub-table can be dynamically enabled or disabled.

// Disable sub-tables:jQuery ("#grid_id"). Hidecol (' Subgrid '); // enable the Sub-table:jQuery ("#grid_id"). Showcol (' Subgrid ');

Example description

• GRID_ID: ID of parent table
• Subgrid: Fixed parameters, do not set other content

To dynamically set whether a sub-table is available, you need to configure the Subgrid of the parent table to True, or the code above has no effect

Jqgrid Subgrid Configure how the first load dynamically expands all the sub-tables