Geekly Articles each Day
📜 ⬆️ ⬇️

Planting trees with jqGrid

Recently, for the first time, it was possible to “touch” such a jQuery plugin as jqGrid. I think this plugin is familiar to many. But in runet there are not so many materials on its use. Well ... let's fix it!

So, jqGrid is a fairly powerful plugin for creating various kinds of tables in your web applications. It allows you to create not only ordinary two-dimensional tables, but also tables with nested tables (something like an Excel pivot table), as well as trees. But first things first, and in this article, we’ll look at the basic properties of the grids and the tree planting process.


Basic properties


Here are some useful links:
offsite developers
Wiki and documentation
Pretty full and useful demo
')
The plugin has a huge number of parameters for the almost complete customization of any grid. Here are the main ones that we need for an example.

url - property defines the source that provides data for our tables and trees. It is necessary in all cases except the case when the elements of a table or tree are pre-created in the form of a hardcode right in the script. I think that hardly anyone will use this option)) Standardly, it indicates the address of the server function that returns data in one of the established formats.

datatype - the property just indicates the format in which data is returned from the server. It has many use cases (this is material for a separate article). But most often takes the value "xml" or "json". Explain why this is probably unnecessary.

mType - determines which method GET or POST will send requests to the server. Possible values ​​are “GET” (default) and “POST”

treeGrid - determines whether our grid is a table or a tree. true-tree, false-default

caption - table title

colNames - column names displayed directly in the interface. Array of strings In what order you enter in the array, in this and the columns will be named.

ExpandColumn - (only for treeGrid: true) defines the name of the column (colModel -> name, see below), the contents of which will be displayed in the interface. Those. we can have several columns in colModel, but naturally only one will be displayed in the tree, which we will define.

ExpandColClick - (only for treeGrid: true). By default, you can only expand a node by clicking on the triangle to the left of the node name. But by setting this property to true, this can be done by clicking on the label itself. Very convenient, I advise everyone to use.

colModel is the most important attribute in the whole plugin. Defines properties for each column. I will list the most necessary to create a tree :
name is the name by which you can access a specific column or cell of the selected row. It may not coincide with the interface name of the column.
key - a logical value. Required if the server does not return an id for the rows of your table or tree. If set to true, the id attribute for the string will take the value of this field.
hidden is a boolean property that determines whether this column is displayed or hidden.
resizable - a boolean property, determines whether the width of the column can be changed
Next, I'll tell you separately about treeGridModel, knowledge and understanding of which is necessary for the most efficient use of the plugin.

TreeGridModel property


A tree by definition is intended to display information that has a hierarchical structure. So this property defines exactly one of the two methods by which this information can be provided to the plugin.
Here it should be noted that there is another property - treeReader , which is closely associated with the treeGridModel property. TreeReader extends the colModel property, i.e. automatically adds extra utility columns to the end of the table hidden. And the data transmitted from the server must contain information for these columns. So, for each value of treeGridModel, a new treeReader is created. In general, the defined data presentation forms are described in database theory and will be familiar to many.
Let's consider each of the treeGridModel values ​​separately:

adjacency - allows you to use the most simple and understandable form of the representation of hierarchical data. Its essence is that for each line it indicates the level of its nesting and the identifier of the parent element. This is what treeReader looks like:
treeReader = {<br> level_field: "level" , // , 0 <br> parent_id_field: "parent" , // , null <br> leaf_field: "isLeaf" , // <br> expanded_field: "expanded" // <br>} <br><br> * This source code was highlighted with Source Code Highlighter .

As you can see, everything is pretty simple. The main thing is to transfer this data correctly and everything will work fine.

nested is the default value. The presentation of data is more complicated, but it has several advantages compared with adjacency when working with trees that have a high level of nesting. Its essence is that the element does not indicate the parent element, but the left and right keys are specified, which define the starting point of the branch and the breakpoint of the end of the branch, respectively.
treeReader : {<br> level_field: "level" ,<br> left_field: "lft" , // , <br> right_field: "rgt" , // , <br> leaf_field: "isLeaf" ,<br> expanded_field: "expanded" <br>} <br><br> * This source code was highlighted with Source Code Highlighter .

The first and last two properties are similar to the corresponding properties for adjacency treeGridModel.
For more information, I advise you to refer to the following resources on nested set and adjacency list

EXAMPLES


Now let's look at the plug-in using specific examples. Suppose that we are big car lovers and we need to create a kind of tree containing car brands and different models for one brand. In general, we want to get something like that.
An example of creating a tree (tree) with jqGrid



Conclusion


In this article, we looked at the simplest use of the jqGrid plugin to create a tree view of the hierarchical data structure. This is one of the many uses for the plugin. In the following publications I will continue the description of this powerful tool for creating web tables.

Source: https://habr.com/ru/post/91499/

More articles:


All Articles