jQuery - Tutorial overview jqGrid Plugin

This article summarize and give you an overview of the functions and how to use this component. JQuery Grid Plugin This is a fairly common used to display and manage the data in tabular form. Its function very much, I only introduce the main features and how to use it client side script.

 

Note: This article does not aim to introduce you to using jqGrid from AZ that can only be seen as a brief introduction or quick reference. To find out. So if you have not worked with jqGrid, read all instructions in the link below before you begin:

My First Grid: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

to introduce

- An Ajax-enabled JavaScript control.
- A plugin for jQuery Library.
- Provides solutions for representing and tabular data on the web manipulat.
- Can be integrated with any server-side technology, Including PHP, ASP, Java Servlets, JSP, ColdFusion , and Perl.

jqGrid can handle many different types of data sources, such as:
- xml, xmlstring
- json, jsonp, jsonstring
- array
- function (...)

The upper part of jqGrid interface:

jQuery - Tutorial overview jqGrid Plugin
(Source: http://www.trirand.com/jqgridwiki )

The basic functions

- CSS based themes (jqGrid is compatible with UI theming).
- Paging.
- Resizable Columns.
- Sorting & various data types.
- Auto loading data khi scrolling.
- Cross browser. Supports for IE 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9.2+ and Google Chrome.
- Multilanguage support (more than 20 languages).
- Support for XML, JSON and arrays as data sources.
- SubGrids.

The global configuration

The default configuration is saved in jQuery.jgrid.defaults jqGrid, so you can change it to affect the entire grid is created. Here I use the methods jQuery.extend () to execute the config merge two objects.

$ .extend (JQuery.jgrid.defaults, {
        jsonReader: {
              id: "0" ,
              repeatitems: false
        },
        MTYPE: 'POST' ,
        sortname: '' ,
        toppager: false ,
        rownum: 50,
        viewrecords: true ,
        loadtext: "Loading ..." ,
        height: "550px" ,
        rowList: [50,100,500,1000],
        gridComplete: function (grid) {
             // Do something, như resizing grid ...
        }
});

Get the JSON data types

For each type of data (xml, json, local), you need to have a corresponding object to help reader understand the structure jqGrid of data. For example with JSON data type, a predefined jqGrid jsonReader as follows:

jQuery ( "#gridid" ) .jqGrid ({
...
   jsonReader: {
     root: "rows" ,              // points to the array data chứa
     page: "page" ,              // current page
     total: "total" ,            // total pages
     records: "records" ,        // total records
     repeatitems: true ,         // the data in the row is repeatable
     cell: "cell" ,              // name of array data for the row chứa.
     id: "id" ,                  // descibes the unique id for the row
     userdata: "userdata" ,      // custom data from the request trả
     ...
   },
...
});

Objects on the reader can analyze the data returned from the server JSON follows:

{
  "Total" : "xxx" ,
  "Page" : "yyy" ,
  "Records" : "zzz" ,
  "Rows" : [
    { "id" : "1" , "cell" : [ "cell11" , "cell12" , "cell13" ]},
    { "id" : "2" , "cell" : [ "cell21" , "cell22" , "cell23" ]},
      ...
  ]
}

To explain:

Tag Description
total total pages for the query
page current page of the query
records total number of records for the query
rows mảng chứa the actual data
id the unique id of the row
cell mảng chứa the data for a row

Creating Grid

The code illustrates the creation of an id jqGrid on a table with the list and div # pager as navigator to contain ingredients paging buttons and manipulating data.

...
< table id = "list" > < tr > < td /> </ tr > </ table >
< div id = "pager" > </ div >
...
< script type = 'text / javascript' >
    $ ("# List"). JqGrid ({
    jsonReader: {
        id: "0",
        repeatitems: false
    },
    url: 'example.php'
    datatype: 'json',
    MTYPE: 'GET',
    colNames: ['id', 'Name', 'RegionID', 'Region', 'Description', 'DisplayOrder', 'Enabled'],
    colModel: [
          {Name: 'CountryID' index 'CountryID', width: 50, align: 'center', key: true},
          {Name: 'COUNTRYNAME' index 'COUNTRYNAME',},
          {Name: 'RegionID' index 'RegionID', hidden: true},
          {Name: 'regionname' index 'regionname'},
          {Name: 'description' Index: 'description'},
          {Name: 'DisplayOrder' index 'DisplayOrder' align 'center'},
          {Name: 'IsEnabled' index 'IsEnabled', width: 80, align: 'center', formatter: "checkbox"}
    ],
    pager: '#pager'
    viewrecords: true,
    caption: "Countries Table"
 });
 </ script >

Navigating

To activate the built-in button (add, edit, del, view, search) on the navigator bar jqGrid, should call the method navGrid () with the following options when creating grid:

// Config the built-in buttons for the pager
$ Grid.jqGrid ( "navGrid ' , '# pager1' ,
    {
    search: false , view: true , edit: true , add: true , del: true ,
    },
    // Edit options
    options,
    // Add options
    options,
    // Del_options, search_options, view_options
);

We can also add another button on using navButtonAdd ():

// Add a custom button to navigator
$ Grid.jqGrid ( "navButtonAdd" , "# pager1" , {
    caption: "Click Me" ,
    buttonicon: "none" ,
    onClickButton: function () {
        alert ( "Hello! I'm a custom button." );
    },
    position: "last"
});

Result:

jQuery - Tutorial overview jqGrid Plugin

Searching

Default jqGrid provided with Single Search function is activated when the button Search for the navigator. We can add the option {multipleSearch: true} for parameter search_options (see above) to jqGrid switched Advanced Search function. This function lets you search for more complex conditions.

To search based on the toolbar, we call the method filterToolbar ():

$ Grid.jqGrid ( 'filterToolbar' , options);

Inline Interface and Advanced Searching:

jQuery - Tutorial overview jqGrid Plugin

Editing

jqGrid offers three ways to edit data as Cell, Inline and Form. The fix in the form was integrated into the Edit button of the navigator.
First, when creating grid, we define the columns are allowed to correct the data in the two attributes colModel editable and edittype:

colModel: [
              {Name: 'CountryID' , index: 'CountryID' , align: 'center' , key: true },
              {Name: 'COUNTRYNAME' , index: 'COUNTRYNAME' , width: 150, editable: true , edittype: 'text' },
              {Name: 'RegionID' , index: 'RegionID' , hidden: true , editable: true , edittype: 'text' },
              {Name: 'regionname' , index: 'regionname' , width: 150, editable: true , edittype: 'text' },
              {Name: 'description' , index: 'description' , width: 150, editable: true , edittype: 'text' },
              {Name: 'DisplayOrder' , index: 'DisplayOrder' , align: 'center' , editable: true , edittype: 'text' },
              {Name: 'IsEnabled' , index: 'IsEnabled' , width: 80, align: 'center' , formatter: "checkbox" , editable: true , edittype: 'checkbox' }
        ]

To enable Cell Editing (edit a cell in the data table), we add two options when creating grid cellEdit and cellurl:

// Creating grid cell editing with support
$ Grid.jqGrid ({
    // ...
    cellEdit: true ,
    cellurl: '/ url / to / handling / the / changed / cell / value'
});

For Inline Editing features (edit raw data line), we will process the event and invokes onSelectRow editRow () where:

// Handle the event onSelectRow khi tạo grid
$ Grid.jqGrid ({
    // ...
    onSelectRow: function (id) {
    if (id id &&! == lastSel) {
        $ Grid.restoreRow (lastSel); // you can call saveRow () thay
        lastSel = id;
    }
    $ Grid.editRow (id, true );
    }});

Form Editing Interface:

jQuery - Tutorial overview jqGrid Plugin

Grouping

Grouping the data:
- The data in the table will be collected into sections based on the columns specified. When creating the grid, we offer the following options to collect data and dimensional regionname column is sorted in ascending (asc). Note groupField and groupOrder the array so you can pass on many different columns.

$ Grid.jqGrid ({
    // ...
    grouping: true ,
    groupingView: {
    groupField: [ 'regionname' ],
    groupOrder: [ 'asc' ]
}});

In addition to data clustering, jqGrid can gather together the column header (Header Grouping) by methods setGroupHeaders ():

$ Grid.jqGrid ( 'setGroupHeaders' , {
    useColSpanStyle: true ,
    groupHeaders: [
            {StartColumnName: 'CountryID' , numberOfColumns: 2,
                titleText: '<em> Info </ em>' },
            {StartColumnName: 'description' , numberOfColumns: 2,
                            titleText: 'Config' }
    ]
});

Result:

jQuery - Tutorial overview jqGrid Plugin

Formatter

To display format for each data type, jqGrid provide Predefined Formatter as number, date, link, checkbox, ... Also, we can create the custom formatter to format the data for the particular column.
For I create a custom formatter instance with myformatter name and assign attributes to the corresponding column formatter colModel array.

$ Grid.jqGrid ({
    // ...
    colModel: [
          {Name: 'COUNTRYNAME' , index: 'COUNTRYNAME' , formatter: myformatter},
        // ...
    ]
});

myfomatter essentially a function with three parameters in particular:

function myformatter (cellvalue, options, rowObject)
{
    return rowObject.countryid +
        "- <Span class =" highlight ">" + cellvalue + "</ span>" ;
}

- Cellvalue - the value to be formatted
- options - an object containing element sau
options: {RowID: Rid, colModel: cm}
- rowObject - represented a row in the format data from datatype định option.
Result:

jQuery - Tutorial overview jqGrid Plugin

How to refresh the data or view of grid

pqGrid tries to refresh view on its own prior to version 2.0.2 in most cases when dataModel properties are changed. This behaviour is sometimes undesirable e.g. consecutive calls to API changing dataModel properties may lead to undesirable refreshes and reloads of data which is not good for performance. This has changed starting from 2.0.2 whereby the data or view of grid can be refreshed in a more controlled manner. pqGrid can be refreshed in various ways depending upon what or which part of the grid needs to be refreshed. Please see the below comparison table to know which method to use:

refresh refreshView refreshDataAndView
Refresh Column Header Yes Yes Yes
Refresh view for updated rows Yes Yes Yes
Refresh view for added rows No Yes Yes
Refresh view for removed rows No Yes Yes
Reload data from server (location = 'remote') No No Yes
Reload data from dataModel.data (location = 'local') - Yes Yes
Refresh local paging No Yes Yes
Refresh local sorting No No Yes
Refresh local filtering No No Yes
Refresh row grouping No Yes Yes
Refresh cell merging No Yes Yes

Refer

YinYangIt's Blog

25 beautiful free Mini World Skins available for players to download

25 beautiful free Mini World Skins available for players to download

25 beautiful free Mini World Skins available for players to download.​​​​​​​Skin is one of the most loved features by players when playing Mini World Block Art game. However, creating Skin Mini World is quite difficult. Tiemruaxe.com will present you 25 beautiful free Mini World Skins for you. Follow us now

Instructions for using Mini Star Runway in Mini World: Block Art

Instructions for using Mini Star Runway in Mini World: Block Art

Mini Star Runway is a new DIY feature for Mini World Block Art players. It allows players to manually draw and create unique character skins. Just draw on the DIY Drawing card. Use Mini Star Runway in the game and take pictures of drawing cards. It will become part of the game skin.

How to fix GameTV Plus errors when entering Room

How to fix GameTV Plus errors when entering Room

How to fix GameTV Plus errors when entering Room. Recently, some new users using GameTV Plus have reflected to Taimienphi.vn about the error of GameTV Plus when entering Room. Through research, we realize that this problem has existed for a long time and is handled through the following method.

Common mistakes on GameTV Plus when playing Online games

Common mistakes on GameTV Plus when playing Online games

Introduce and guide to fix some basic errors when playing games on GameTV Plus so that players can get the best experience.

3 Best English to Vietnamese translation software 2020

3 Best English to Vietnamese translation software 2020

Evaluate 3 best English to Vietnamese translation software in 2020. Translating into Vietnamese through text, voice, image is very simple, ...

How to bypass PUBG Emulator detected (new method)

How to bypass PUBG Emulator detected (new method)

How to bypass PUBG Emulator detected (new method),Every year, there are some new best games on the top of most downloaded and popular games, and this year PUBG Mobile is one of them. Whenever you want to play PUBG Mobile on your PC using any android emulator, then PUBG servers automatically connect you to the other players who are also using Android Emulator. This editor can help you mask your specific device id information and make the PUBG mobile bypass more effective for you.

How to avoid detection when using the PUBG Mobile emulator on PC

How to avoid detection when using the PUBG Mobile emulator on PC

Recently, PUBG Mobile announced to gamers that PUBG Mobile players using Android emulator on computer will only be able to play with each other without those who play with phone. After the PUBG Mobile gaming community complained those people

Gameloop Latest Version AIO(all-in-one) For PC in 2021

Gameloop Latest Version AIO(all-in-one) For PC in 2021

Gameloop Latest Version AIO(all-in-one) For PC in 2021. Gameloop 2021 (Tencent Gaming Buddy indir) 120FPS update version is one of The Best Android Emulator For Windows PC. IT is created by Tencent Gaming Company for Playing the Most popular battle royale video games PUBG Mobile, Call of Duty Mobile, brawl stars on low-end gaming PC. it is the updated version of TGB that comes with a completely new rename brand into the game loop. The Best feature of this emulator is a lag-free, smooth play, high-quality graphics gaming experience.

How to update GameLoop to the latest version

How to update GameLoop to the latest version

Each time GameLoop is updated, this emulator adds one to several new titles for users to experience.

How To Install Games In Gameloop/Tencent Gaming Buddy

How To Install Games In Gameloop/Tencent Gaming Buddy

How To Install Games In Gameloop/Tencent Gaming Buddy.Learn how to install the latest updated PUBG Mobile version in Gameloop/Tencent Gaming Buddy and how to install other games(APK, XAPK, OBB Copy/Pasting)

How to download and install PUBG Mobile VNG on Tencent Gaming Buddy

How to download and install PUBG Mobile VNG on Tencent Gaming Buddy

How to download and play PUBG Mobile VNG on your computer using the Tencent Gaming Buddy emulator.

Instructions for renaming characters in Auto Chess VN

Instructions for renaming characters in Auto Chess VN

Instructions for renaming characters in Auto Chess VN.Similar to Rules of Survival, PUBG Mobile, Pica Legend, Auto Chess VN also allows players to rename characters easily. If you are bored with the original name, quickly change it to another one.

Instructions to see the character ID in Auto Chess VN

Instructions to see the character ID in Auto Chess VN

The character ID in the game Auto Chess VN is a sequence of characters including letters and numbers, which is attached to a certain account. Each account has a different character ID that does not overlap with each other.

Download GunPow - Chicken Shoot Teen PK on PC

Download GunPow - Chicken Shoot Teen PK on PC

Download GunPow - Chicken Shoot Teen PK on PC.GunPow 3D VNG is the newly launched coordinates game of VNG and we can install GunPow 3D VNG on the computer to play like a normal PC game.

How to install and play GunPow 3D on the computer

How to install and play GunPow 3D on the computer

GunPow 3D VNG is the newly launched coordinates game of VNG and we can install GunPow 3D VNG on the computer to play like a normal PC game.

Instructions to download and install FIFA Online 4 on PC.

Instructions to download and install FIFA Online 4 on PC.

Instructions to download and install FIFA Online 4 on PC. To support coaches on their way to fulfill their dream team, we would like to introduce how to download and install FIFA Online 4 on PC.

How to download and play FIFA Online 4

How to download and play FIFA Online 4

The top football management game FIFA Online 4 will be officially released (Open Beta) in Vietnam on June 14. Right now players can download FO4 to install, get ready to experience.

How to create a Minecraft server using Hamachi

How to create a Minecraft server using Hamachi

How to create a Minecraft server using Hamachi. This article shows you how to create a Minecraft server on a Windows or Mac computer using a free program called Hamachi. Remember that this method is only applicable to the Java version of Minecraft on the desktop (desktop); that is, you cannot try this method for Windows 10, Pocket Edition, or console version of Minecraft.

How to play Minecraft with Hamachi

How to play Minecraft with Hamachi

Playing Minecraft with Hamachi is a simple but extremely effective way for players to connect with friends and invite them to join their world, together to create a cohesive, fun and close Mine World. as close as possible.

Instructions for teleportation in Mini World: Block Art

Instructions for teleportation in Mini World: Block Art

In the latest Mini World: Block Art update, players can use the new feature - The Transfer Core Block to teleport instantly. Thanks to it, you can reach anywhere in Mini World in a snap.