Jqgrid dynamic addition of rowlist, jqgrid dynamic rowlist

Jqgrid dynamic addition of rowlist, jqgrid dynamic rowlist

The company encapsulates a label based on jqgrid. Recently, the customer has a new requirement, that is, the option of dynamically adding the number of entries per page in the page. I checked and checked the jqgrid API again, jqgrid does not obtain the pager object. jqgrid regards pager as a part of the grid and seals it at the same time. This is different from easyui's ability to obtain the pager object through the getPager method, and then uses pager. pagination. Although jqgrid does not open related interfaces, the problem still needs to be solved. So I want to convert the idea to directly operate html elements, you need to know that most of the basic components of the rich client framework developed based on javascript language are html elements, including extjs and various UIS Based on jQuery javascript libraries.

The first step is to use the debugging plug-in provided by the browser chrome to find the page number option is actually a select element, so I only need to add an option element to the page number option, so my problem is how to find this select element. In the debugging plug-in, we can see that this select element does not have an id or name attribute, and the document defined by html dom only has getElementsByTagName, in fact, it can also be implemented using the native html dom, but it is just a little bit more judgment, for example, the select has any special attributes, and so on, powerful jQuery library html dom operations are encapsulated based on the above. I chose jQuery, but I don't have jQuery's tag selector, because I found that the outer layer of this select element has a td element with id, so I chose this id to find td, find the select element in the td file so that the efficiency is faster. Now, you can add a new page number to the page number option. After adding the page number, you can select this page number. jqgrid will update the query, however, if you want to perform a paging query based on the new page number option, you need to select the page number. I will use $ (this ). val (); assign values to the select statement, but the query is not triggered. Next, we will look for the events that trigger the grid paging query. Since the numerical changes are for select, I mainly find this select element in the jqgrid source code, so I assigned this select class value ui-pg-selbox for search, and finally let me in row 1946 (jquey. jqGrid4.4.1.src. js) Find the change event bound to this select, so after I add option to the select statement, I need to assign a value to the select statement. After the value is assigned, I also need to manually trigger the change event. The Code is as follows:

Function changePager (){
Var pagerCenter = $ ('# pager_list_pager_center'); // get td
PagerCenter. find ('select'). each (function () {// search for the select element in td
If ($ (this). hasClass ('ui-pg-selbox') {// The current select class value is ui-pg-selbox
$ (This ). append ('<option id = "A' + 1 +'" value = "'+ 1 +'"> all </option> '); // Add option to select
$ (This). val (1); // assign a value to select
$ (This). trigger ('change'); // triggers the select change event
}
});
}

The image is as follows:

How does jqGrid dynamically display columns? For example, in the first case, there are only three columns, but four columns are required in another mode. How does one dynamically add columns?

Isn't there hideCol or showCol? Just hide the display Column

Jqgrid dynamic binding event or gridComplete added later or other

GridObj. setGridHeight ("220px"); gridObj. setGridWidth ("220px ");
GridObj. setGridParam ({sortname: 'myname', width: '100px '}). trigger ("reloadGrid"); trigger ("reloadGrid") is required for some parameters to produce results.
GridObj. setGridWidth ("220px"); gridObj. setGridWidth ("220px ");
Select the three methods as needed.