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

Source: Internet
Author: User
Tags new set jqgrid

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 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.
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",

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.