jQuery Multifunctional Table Plugin ParamQuery Grid

Add-ons

2026-07-26 03:30 4 次浏览 • 0 次下载 55.4KB

jQuery Multifunctional Table Plugin ParamQuery Grid

Plugin Description: ParamQuery Grid is an open-source, multifunctional jQuery table plugin. You can modify its source code and customize its themes. It can be imported directly into a project without copying a bunch of unrelated files, making it suitable for simple backend projects.

ParamQuery Plugin Features:

Sorting
Pagination
Adjustable data column widths
Adjustable table height and width
Customizable themes
Show or hide columns
Freeze any number of columns, just like in Excel
Display data in various formats, such as HTML, arrays, XML, and JSON
Compatible with various server-side frameworks, such as ASP.NET, MVC3, JSP, JSF, PHP, and more
Virtual scrolling and rendering
Direct cell editing
Consistent appearance and functionality across all major browsers (IE 6+, Firefox, Chrome, Opera, etc.)

Practical Methods:

First, add references to jQuery and jQuery UI in the HTML head:

<link rel="stylesheet" href="http://libs.useso.com/js/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>   
<script src="http://libs.useso.com/js/jqueryui/1.9.1/jquery-ui.min.js"></script>

Then add a reference to ParamQuery Grid:

// This CSS file must be included, regardless of whether you use a theme or not
<link rel="stylesheet" href="/Content/pqgrid/pqgrid.min.css" />          
// This JS file must be included
<script type="text/javascript" src="/Scripts/pqgrid.min.js" ></script>

Add the following script code:

$(function() {
    var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'], [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'], [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'], [4, 'BP', '267,600.0', '22,341.0'], [5, 'General Motors', '192,604.0', '-10,567.0'], [6, 'Chevron', '189,481.0', '14,099.0'], [7, 'DaimlerChrysler', '186,106.3', '3,536.3'], [8, 'Toyota Motor', '185,805.0', '12,119.6'], [9, 'Ford Motor', '177,210.0', '2,024.0'], [10, 'ConocoPhillips', '166,683.0', '13,529.0'], [11, 'General Electric', '157,153.0', '16,353.0'], [12, 'Total', '152,360.7', '15,250.0'], [13, 'ING Group', '138,235.3', '8,958.9'], [14, 'Citigroup', '131,045.0', '24,589.0'], [15, 'AXA', '129,839.2', '5,186.5'], [16, 'Allianz', '121,406.0', '5,442.4'], [17, 'Volkswagen', '118,376.6', '1,391.7'], [18, 'Fortis', '112,351.4', '4,896.3'], [19, 'Crédit Agricole', '110,764.6', '7,434.3'], [20, 'American Intl. Group', '108,905.0', '10,477.0']];
    var obj = {
        width: 700,
        height: 400,
        title: "ParamQuery Grid Example",
        resizable: true,
        draggable: true
    };
    obj.colModel = [{
        title: "Rank",
        width: 100,
        dataType: "integer"
    },
    {
        title: "Company",
        width: 200,
        dataType: "string"
    },
    {
        title: "Revenues ($ millions)",
        width: 150,
        dataType: "float",
        align: "right"
    },
    {
        title: "Profits ($ millions)",
        width: 150,
        dataType: "float",
        align: "right"
    }];
    obj.dataModel = {
        data: data
    };
    $("#grid_array").pqGrid(obj);
});

Finally, add a div element where you want the table to be displayed:

1	`<div` `id="grid_array"></div>`

That's it! Run the code to see the results.