jQuery Table Plugin GridManager.2.0 (formerly listManager.js)

Add-ons

2026-07-26 03:27 4 次浏览 • 0 次下载 4.8KB

jQuery Table Plugin GridManager.2.0 (formerly listManager.js)

Plugin Description: A jQuery-based table plugin that supports column width adjustment, column reordering, pagination, sorting, and other features.

GridManager.js

Quickly and flexibly initialize Table elements, bringing your tables to life.

Last Updated: 2018/6/25 1:15:51 PM

Changelog:

1. Added configuration parameters

2. Updated styles

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

Usage Notes

When downloading, please download the release version. -v2.0 is the jQuery version. -The native JavaScript version is currently under development.

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.

Installation command

npm install GridManager

Integration

<link rel="stylesheet" type="text/css" href="/node_modules/GridManager/dist/css/GridManager.css"/>
<script type="text/javascript" src="/node_modules/GridManager/dist/js/GridManager.js"></script>

If you do not want to include a CSS file manually, you can configure the basePath and autoLoadCss parameters to let the plugin load CSS automatically. Example:

$('table').GM({
    basePath:'/node_modules/GridManager/dist/',  // Path to the current JS file
    autoLoadCss: true                          // Enable automatic CSS loading
});

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, which typically specify the supported browsers. Therefore, support for older browsers was not considered during the initial design.

Usage

    <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 follows the format <table grid-manager="test"></table>.

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?

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