jQuery Table Plugin gridGridManager

Add-ons

2026-07-26 03:32 2 次浏览 • 0 次下载 7.5KB

Plugin Description: GridManager.js can quickly initialize table elements. It is an upgraded version of listManager.

Last Updated: 2019/12/10 5:40:27 PM

Changelog:

- Added

- `rowClick`: Row click event

- `rowHover`: Row hover event

- `cellClick`: Cell click event

- Added support for modifying `gm_row_class_name` in `rowRenderHandler` to control the className of the current row

- Fixed

- `resetLayout`: Fixed an issue where a horizontal scrollbar appeared when the width was just sufficient

- Fixed an issue where instances overwrote each other when multiple versions for different frameworks coexisted on the same page

- Optimized

- Errors in templates are now thrown during tbody rendering

- Expanded the `template` parameter to support four arguments: cell: cell data, row: row data, index: row index, key: unique column key

- Moved the `init()` logic from index.html into `GridManager.init()`. Using new GridManager() is now recommended instead of TableElement.GM('init', {})

- No longer refreshes the table when switching to the same number of items per page as the previous setting

Last Updated: 2017/12/25 12:44:40 PM

Changelog:

Added new parameters and optimized performance.

Improved visual effects and user interactions

Last Updated: 2017/2/6 10:44:34 AM

Changelog:

1. Fixed some bugs;

2. Optimized the code structure.

3. Added unit tests

4. Optimized styles

Implemented Features

GridManager.js can quickly initialize table elements, providing the following features after initialization:

Width Adjustment: Drag to adjust the width of table columns.
Column Reordering: Drag to change the position of table columns.
Column Configuration: Show or hide columns through configuration settings.
Sticky Header: When the table is within the visible area, the header remains fixed at the top.
Sorting: Single-column sorting or multi-column sorting.
Pagination: AJAX-based table pagination, including options to select the number of records displayed per page and jump to a specified page.
User Preference Memory: Remembers user actions, including adjusted column widths, column order, column visibility, and the number of records displayed per page.
Automatically loads data when paginating, sorting, or refreshing, and provides corresponding before and after events.
Row Numbers: Automatically generates a row number column.
Select All: Automatically generates a select-all column.
Export: Download data from the current page or download only the selected table records.
Context Menu: Quickly access commonly used functions through the menu.

Browser Compatibility

Firefox, Chrome, IE10+. A note on why older versions are not supported: Most users of table plugins work with management platforms or systems, where specific browsers are usually required. Therefore, older browser versions were not considered during the initial design.

Demo and Documentation

Usage

1	`<table` `grid-manager="test"></table>`

$('table[grid-manager="test"]').GM({
        supportRemind: true
        ,i18n:'zh-cn'
        ,textConfig:{
            'page-go': {
                'zh-cn':'Jump',
                'en-us':'Go '
            }
        }
        ,disableCache:false
        ,disableOrder:false
        ,supportSorting: true
        ,isCombSorting: true
        ,sortDownText: 'up'
        ,sortUpText: 'down'
        ,supportDrag:true
        ,supportAjaxPage:true
        ,ajax_url: 'data/test.json'
        ,ajax_type: 'POST'
        ,pageSize:30
        ,query: {ex: 'User-defined query parameters, in the format: {key:value}'}
        ,columnData: [{
                key: 'name',
                remind: 'the username',
                sorting: 'up',
                width: '200px',
                text: 'username'
            },{
                key: 'age',
                remind: 'the age',
                width: '200px',
                text: 'age'
            },{
                key: 'createDate',
                remind: 'the createDate',
                sorting: 'down',
                width: '200px',
                text: 'createDate'
            },{
                key: 'info',
                remind: 'the info',
                text: 'info'
            },{
                key: 'operation',
                remind: 'the operation',
                sorting: '',
                width: '200px',
                text: 'operation',
                template: function(operation, rowObject){  //operation: The individual data record corresponding to the current key; rowObject: The complete data for a single row
                    return '<a href=javascript:alert("This is a button");>'+operation+'</a>';
                }
            }
        ]
    });

Data Format

   {
    "data":[{
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "Wild Front-End Developer",
            "operation": "Edit"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "Wild Front-End Developer",
            "operation": "Edit"
        },
        {
            "name": "baukh",
            "age": "28",
            "createDate": "2015-03-12",
            "info": "Wild Front-End Developer",
            "operation": "Edit"
        }
    ],
    "totals": 1682
   }

Frequently Asked Questions

1. How do I configure data that already exists before rendering?

You can configure this using the ajax_data parameter. If ajax_data is configured with data, no data request will be made through ajax_url, and ajax_beforeSend, ajax_error, and ajax_complete will become inactive. Only ajax_success will be executed.

2. How can I add filter conditions to data requests?

You can configure this using the query parameter. This parameter remains available throughout the GirdManager instance's lifecycle. After changing the filter conditions, you can reset it using the $('table').GM('setQuery') method.

3. How can I view the data in the current GirdManager instance during development?

Use $('table').GM('get') to retrieve the complete GirdManager object. Use $('table').GM('getLocalStorage') to retrieve locally stored information.

4. What should I do if initialization fails?

Check whether the DOM node is in the <table grid-manager="test"></table> format
Check whether the key values in the columnData configuration match the fields in the returned data.

5. How can I handle data returned by the backend when its format differs from the plugin's expected format?

You can configure this using the parameters [dataKey: the key for the list data returned by the AJAX request, default is data] and [totalsKey: the key for the total number of records returned by the AJAX request, default is totals].

6. What should I do if the table styles fail to load?

The plugin supports two CSS loading mechanisms: manually including a link tag or automatic loading by setting autoLoadCss=true and configuring the basePath parameter. Most styling errors occur when automatic loading is enabled but the basePath parameter is configured incorrectly.
The key parameters to check are: autoLoadCss (whether to load CSS files automatically) and basePath (the current base path used for automatically loading CSS files).
If you are unsure about the correct basePath, it is recommended to set autoLoadCss to false and load the CSS manually using a link tag.

7. Text in the table's th elements is not fully displayed.

Check the width value in the configuration item [columnData]. Increase this value or leave it unset to let the plugin control it automatically. If it still does not take effect, it is because the current instance has enabled the memory feature. To resolve this, remove the localStorage entry corresponding to the current GridManager table name, or use localStorage.clear() to clear all local storage.

8. How do I clear the currently remembered column widths and positions?

1	`You can use the clear method as follows: $('table').GM('clear');`