What is the best Grid Control in jquery?

I found flexigrid, its ext style appearance, simple code,

The powerful functions have deeply attracted me. So I used it.

Although it lacks documentation, there is a useful demo for reference,

There is a very detailed article on codeproject: http://www.codeproject.com/KB/aspnet/MVCFlexigrid.aspx

You can directly access and view it.

Although flexigrid looks good, the gray default style is not very fond of it, so I changed it to blue.

The HTML structure is relatively satisfactory, that is, each part has a separate Div container package, and its functions are relatively independent. You can also set whether to display the package through attribute settings. Note that

The actual content of the table header and table is not in the same container, so that the table header is fixed when the drop-down scroll is reached, and the table header is synchronized when the horizontal scroll is performed.

The process of modifying CSS is complicated and long, but the final effect is quite satisfactory. I will not analyze it here, because there are a lot of results, so I will skip it. (The Code will be downloaded in the next section)

Let's take a look at its functions? Official function list

• Resizable columns (resetting column width, cool)
• Resizable height and width (reset the table size, which seems to be less practical)
• Sortable column headers (change the column order)
• Cool theme (cool style, more cool now)
• Can convert an ordinary table (a common table can be formatted)
• Ability to connect to an Ajax data source (XML and JSON [new]) (supports multiple data formats)
• Paging (pagination supported)
• Show/hide columns (supports displaying hidden columns)
• Toolbar (new) (toolbar supported)
• Search (new) (supports quick search)
• Accessible API (easy-to-use API)
• More (others. White match)

Let's take a look at other controls. The first step is to look at the parameters. There are many default parameters and most parameters are useful.

02 // reference the default Property

03 P = $. Extend ({

04 Height: 200, // The height of the flexigrid plug-in, in PX

05 width: 'auto', // width value. Auto indicates that the value is automatically calculated based on the width of each column. We recommend that you set the specific value under IE6. Otherwise, the problem may occur.

06 striped: True, // whether to display the striped effect. The default mode is parity interaction.

07 novstripe: false, // This attribute has never been used

08 minwidth: 30, // minimum column width

09 minheight: 80, // minimum column height

10 resizable: false, // whether the resizable table is scalable

11 URL: false, // Ajax URL, URL corresponding to the Ajax Method

12 method: 'post', // data sending method, data transmission method

13 datatype: 'json', // type of data loaded, data loading type, XML, JSON

14 errormsg: 'error occurred ', // error escalation message

15 usepager: false, // whether the page is displayed

16 nowrap: True, // do not wrap

17 page: 1, // current page, default current page

18 total: 1, // total pages, total number of pages

19 userp: True, // use the results per page select box. Can I dynamically set the number of results displayed on each page?

20 RP: 25, // results per page, default number of results per page

21 rpoptions: [10, 15, 20, 25, 40,100], // you can select the number of results per page.

22 title: false, // whether the title is included

23 pagestat: 'display records from {from} to {to}, total number of {total} entries ', // display the style of the current page and the total page

24 procmsg: 'processing data. Please wait... ', // The prompt message that is being processed

25 query: '', // search for query Conditions

26 qtype: '', // search for the queried category

27 qop: "EQ", // search operator

28 nomsg: 'No matching record exists ', // No result prompt information

29 mincoltoggle: 1, // the minimum number of columns allowed to be displayed

30 showtogglebtn: True, // whether to show hidden columns. If this attribute has a bug, set it to false. The script that clicks the header reports an error.

31 hideonsubmit: True, // whether to hide during callback

32 showtabletogglebtn: false, // whether to display the hide grid button

33 autoload: True, // automatic loading, that is, the first Ajax request initiated

34 blockopacity: 0.5, // transparency settings

35 ontogglecol: false, // when switching between rows, You can override the default implementation in this method, which is basically useless.

36 onchangesort: false, // when sorting is changed, you can rewrite the default implementation in this method to sort the client by yourself

37 onsuccess: false, // executed after successful

38 onsubmit: false, // It is useless to call a custom computing function.

39 // Style

40 gridclass: "bbit-grid" // Style

41}, P );

 

The other two attributes, colmodel and buttons, are not the default attributes. The content is described as follows:

Colmodel: Column-defined array

An array. The elements of the array are described as follows:
Colmodel parameter description:
Display: Display name
Required. Type: String. Default Value: None
Name: Field name
Required. Type: String. Default Value: None
Width: Width
Required. Type: String. Default Value: None
Sortable: Sorting or not
Type: boolen; default value: false
Process: Handler
Type: function, which can be used to format cells
Hide: Hide or not
Type: boolen; default value: false

Buttons: Tool bar button Definition

An array. The elements of the array are described as follows:
Buttons parameter description:
Name: Botton ID
Type: String, default value: None
Bclass: Style
Type: boolen; default value: None
Onpress: Events triggered when a button is clicked
Take the name of the button as the first parameter, and grid as a function of the second parameter.
Separator: Whether it is a separator
It is mutually exclusive with the previous four attributes. When this attribute is set to true, a separator is output, not a button default value: false

The parameter description is complete. For how to use it, please refer to the article described in this article?

Although flexigrid is already excellent, are there any problems? For example:

1: If you add a checkbox column to the beginning of the column (not supported by default ),

2: How do I add an event (such as right-click or double-click) to a row or add an operation column to the last column? Get the data of this column at the same time?

3: How can I be compatible with jquery 1.3 +? (Incompatible by default)

4: how to improve performance (ie's script execution capability is really poor, especially in IE6, when there are too many columns, there will always be 2-3 seconds of stagnation)

5: How to Make a column not participate in Toggle?

..............................

In the next article, I will analyze how to implement the above problems. These problems are all solved in my actual project. Modify the list.

1: Modify the bug where the number of records is to be retrieved each time. If the number of returned records is less than 0, that is, the total number of records is not obtained, the number of records obtained last time is used.
2: When showtogglebtn is set to false, click the bug reported in the header (not modified)
3: Modify the prompt information to Chinese
4: Modify the default style to provide blue skin
5. Add displayname to the button in the toolbar;
6. Add Regular Expression verification for quick search
7. added the Select column and select all function. Set the default row to false.
8: You can integrate row events from external sources-Example: Integrate the right-click Function
9: Modify the bug after jquery is upgraded to 1.3.1.
10: add the resize Method
11: optimize the dynamic addition of tables
12: fixed the error reported by the script when the row of JSON data is null.
13: The getcheckedrows method is added to obtain the selected row in the grid. The returned result is an array of the primary keys of the row.

14: Add grid to obtain Option
15
The pagination style is slightly adjusted, and the title is added to the button.
16
Adding a column does not participate in toggle. You only need to configure toggle = false for the column.
Modified the logic for adding data, improving performance by about 60%