jqTable: A table component that integrates all interactions

Add-ons

2026-07-26 03:56 3 次浏览 • 0 次下载 29.2KB

jqTable: A table component that integrates all interactions

Plugin Description: Interaction design inspired by Vue Element. Features include dynamic data, fixed table headers, multi-level headers, optional fixed left and right columns, checkbox selection, batch operations, nested lists with expandable and collapsible sections, fixed or adaptive column widths, sorting, totals, and configurable minimum widths for auto-adjusting columns.

Last Updated: 2018/8/15 4:34:02 PM

Changelog:Fixed a bug in the total calculation feature

Last Updated: 2018/7/3 3:30:45 PM

Changelog:Added support for scrolling lists with the mouse wheel over fixed columns. Compatible with IE8 (some features, including fixed columns, are not supported in IE8).

Last Updated: 2018/4/28 3:12:01 PM

Changelog:Because the awesome library is too large, fonts have been switched from awesome to iconfont. If your existing project uses awesome, you can switch it back yourself by modifying the icon class names in jqTablePlugin.js. See Example 2 for details.

Last Updated: 2018/4/28 10:51:17 AM

Changelog:Optimized compatibility for Safari

Last Updated: 2018/4/16 6:01:20 PM

Changelog:Optimized updateHtml

Last Updated: 2018/4/12 5:56:35 PM

Changelog:Added a feature to preprocess data before sorting. You can configure automatic character matching and replacement with empty strings, or use a custom function for processing. This solves sorting inaccuracies when values contain units, such as amounts formatted as ￥33,999.000. See Example 8 for usage details.

Last Updated: 2018/1/18 8:12:22 PM

Changelog:Added support for fixing multiple columns. Usage:

$('[role="c-table"]').jqTable({
      fixedLeft: 2,
      fixedRight: 2
});

If you need to fix columns that are not in sequential order, modify the table HTML yourself and then call updateHtml.

Last Updated: 2017/11/27 5:04:10 PM

Changelog:Fixed an error in the compressed JS file that prevented expand and collapse functionality from working. The min.js file has been fixed.

jqTable

Features include:

Dynamic table data with a method for updating data
Fixed table headers with support for multi-level headers
Optional fixed columns on the left and right
Checkbox selection and batch operations
Nested lists with expandable and collapsible sections
Fixed or adaptive column widths
Sorting
Totals displayed in a fixed row at the bottom
Minimum width can be configured for automatically adjusted columns

Class Name Reference

Class Name	Function
c-table-border	Add borders
c-table--noWrap	Prevent text wrapping
c-table--striped	Zebra-striped table
g-selectAll--main	Checkbox for selecting parent elements
input type="checkbox" class="g-selectAll"	Checkbox for selecting all elements
input type="checkbox" class="g-selectAll--input"	Checkbox for selecting individual elements
class="g-selectAll--btn" data-tag="select"	Checkbox button. Click to retrieve detailed JSON information about selected values in the callback.
g-toggleTable--main	Expand or collapse parent elements
tr.g-toggleTable--title>th i.g-toggleTable--buttonAll	Operation header - Toggle all or individual items
tr.g-toggleTable--title>th i.g-toggleTable--button	Operation header - Toggle individual items
col data-total="true"	Calculate total count
col data-sort="true"	Enable sorting

Parameter Reference

Parameter Name	Default Value (Optional Values)	Function	Type
fixedLeft	false	Fixed on the left	boolean
fixedRight	false	Fixed on the right	boolean
fixedMinWidth	100	Minimum width	number
totalString	'--'	Calculate total number of columns	string
totalTitle	'Total'	Title for the total count	string

Hidden parameter reference

Parameter Name	Function	Type
data-total="true"	Enable the total calculation feature for this column	boolean
data-sort="true"	Enable sorting for this column	boolean

Usage Example

html:

<div class="c-table c-table--noWrap">
   <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table">
<colgroup>
  <col name="" width="150">
  <col name="" width="120">
  <col name="" width="120">
  <col name="" width="120">
  <col name="" width="">
  <col name="" width="">
  <col name="" width="140">
</colgroup>
<thead>
  <tr>
    <th class="">
      <div class="cell">Date</div>
    </th>
    <th class="">
      <div class="cell">Name</div>
    </th>
    <th class="">
      <div class="cell">Province</div>
    </th>
    <th class="">
      <div class="cell">City/District</div>
    </th>
    <th  class="">
      <div class="cell">Address</div>
    </th>
    <th class="">
      <div class="cell">Postal Code</div>
    </th>
    <th class="">
      <div class="cell">Actions</div>
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="">
      <div class="cell">2016-05-03</div>
    </td>
    <td class="">
      <div class="cell">Wang Xiaohu</div>
    </td>
    <td class="">
      <div class="cell">Shanghai</div>
    </td>
    <td class="">
      <div class="cell">Putuo District</div>
    </td>
    <td class="">
      <div class="cell">Lane 1518, Jinshajiang Road, Putuo District, Shanghai</div>
    </td>
    <td class="">
      <div class="cell">200333</div>
    </td>
    <td class="">
      <div class="cell">
        <button type="button" class="c-button">Remove</button>
      </div>
    </td>
     
  </tr>
</tbody>
</table>
</div>

JS:

1	`$('[role="c-table"]').jqTable();`

JavaScript Explanation for the Examples

jqTable js

// Import separately
js/jqTable.js: Main code, required
js/jqTablePlugins.js: Contains the expand/collapse and checkbox selection code (optional)
// Complete code
js/jqTable.all.js: Main code + expand/collapse and checkbox selection
// Minified code
js/zipJs/

Other JavaScript Files

js/plugins: External plugins used in the examples
js/json.js: JSON data used in the examples