Table component of JSU series -- jsu.Table

Note to the author: jsu.Table is a native table plug-in based on jQuery extension. The design concept comes from Element.ui The UI library is based on vue.js, and the jQuery version is not found temporarily, so we build the wheel here. This document will record jsu series All problems and solutions encountered in the process of component development are welcome to discuss and correct. Less nonsense, let's start to enter the theme!

First look at the effect.


The above figure shows the function test effect of fixed header + nested table + expandable column + MVVM editing table data.

Main configuration code

<table class="table" data-max-height="500">
    <thead>
    <tr>
        <th data-type="index" data-text></th>
        <!-- annotation① -->
        <th data-type="expand">...</th>
        <th data-type="selection" data-selection="checkbox"></th>
        <th data-type="text" data-prop="name">text</th>
        <th data-type="enum" data-prop="gender" data-enum='{"MALE":"male","FEMALE":"female"}'>enumeration</th>
        <th data-type="date" data-prop="date" data-date-format="yyyy-MM-dd hh:mm:ss:S" data-text="Registration time"></th>
        <th data-type="html" data-prop="note">brief introduction</th>
        <th data-type="html" data-prop="note" data-writable>Editor's profile</th>
        <th data-type="date" data-prop="date" data-date-format="yyyy-MM-dd hh:mm:ss:S" data-writable>Edit registration time</th>
        <!-- annotation② -->
        <th data-type="enum" data-prop="gender" data-writable data-enum='{"MALE":"male","FEMALE":"female"}' data-text="Editing gender"></th>
        <!-- annotation③ -->
        <th data-type="template" data-text="operation"></th>
    </tr>
    </thead>
</table>
  • Note ①: expand line template
<th data-type="expand">
    <!-- Expand row template -->
    <div data-expand>
        <table class="table" style="color:#AAA; display:none;".../table>
    </div>
</th>
  • Note ③: editable cell template
<th data-type="enum" data-prop="gender" data-writable data-enum='{"MALE":"male","FEMALE":"female"}' data-text="Editing gender">
    <div data-writable>
        <label>
            <select name>
                <option value="MALE">male</option>
                <option value="FEMALE">female</option>
            </select>
        </label>
    </div>
</th>
  • Note ③: cell content display template
<th data-type="template" data-text="operation">
    <div data-template>
        <a href="javascript:" class="row-data">Get Data</a>
        <button class="update-name">Update Name</button>
    </div>
</th>
  • Javascript main code
// Analog data
var data = [];
for (var i = 0; i < 5; i++) {
    data.push({
        name: 'name_' + (i + 1),
        gender: 'MALE',
        date: new Date().getTime(),
        note: 'I am<b>Thickening</b>content',
        birthday: new Date().getTime()
    });
}

// Application plug-in
var table = jsu.Table($('.grid_2'), true, true);
table.data(data);

How to use

The detailed API can be found in jsu.Table.dir on the console or in / test.../index.html. Some contents are listed here:

Design purpose

The author intends to implement the following functions for jsu.Table:

  1. Basic table data presentation (implemented)
  2. Column order adjustment (implemented)
  3. Column width adjustment (implemented)
  4. Fixed header (implemented)
  5. Left column fixed
  6. Right column fixed
  7. User configurable hide / show partial column data
  8. Cell vertical merge - merge rows
  9. Horizontal cell merge - merge columns

Among them, 4 / 5 / 6 can refer to the freezing function of office word.

Author's note: 2018-12-14 is not completed, continuous updating

Tags: Javascript JQuery Vue less

Posted on Sat, 30 Nov 2019 19:35:09 -0800 by HUWUWA