jexpand_使用jExpand创建可扩展表

jexpand

Creating expandable tables with jExpand Haven’t you thought about making your tables expandable? Recently I stumbled to a very interesting and incredibly useful (in my opinion) plugin – jExpand, the plugin perfectly reduces the amount of information on the visitor’s page. jExpand is truly ultra lightweight (only 11 lines of code) jQuery plugin that will make your tables expandable. Typically for business applications, this feature can help you organize your tables better. Therefore, tables can contain more information such as videos, images, diagrams, lists and other elements.

使用jExpand创建可扩展表您是否没有考虑过使表可扩展？ 最近，我偶然发现了一个非常有趣且非常有用的插件(在我看来)– jExpand，该插件可完美减少访问者页面上的信息量。 jExpand是真正的超轻量级(仅11行代码)jQuery插件，它将使您的表可扩展。 通常对于业务应用程序，此功能可以帮助您更好地组织表。 因此，表可以包含更多信息，例如视频，图像，图表，列表和其他元素。

The result of our lesson is as follows:

我们课程的结果如下：

现场演示

步骤1 – HTML (Step 1 – HTML)

The main idea is to reserve two table rows for every entity: the first row contains some basic information, the second row contains additional details. Details row is toggled by clicking on the main (parent) row. Your table can contain as many columns as you need. There is only one important thing – that the additional details row has to span (using colspan attribute) all the columns that main row contains (in case if you need to have full details row area). In the example below, our table contains 5 columns and additional details rows spans exactly 5 columns.

主要思想是为每个实体保留两个表行：第一行包含一些基本信息，第二行包含其他详细信息。 通过单击主(父)行可以切换“详细信息”行。 您的表可以包含所需的任意多列。 只有一件事很重要–附加详细信息行必须跨越(使用colspan属性)主行包含的所有列(以防万一，如果您需要具有完整的详细信息行区域)。 在下面的示例中，我们的表包含5列，其他详细信息行恰好跨越5列。

<table id="example_table">
    <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
        <th>Column header 5</th>
    </tr>
    <tr>
        <td>Record 1</td>
        <td>value 1</td>
        <td>value 2</td>
        <td>value 3</td>
        <td>value 4</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 1) -->
        </td>
    </tr>
    <tr>
        <td>Record 2</td>
        <td>value 5</td>
        <td>value 6</td>
        <td>value 7</td>
        <td>value 8</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 2) -->
        </td>
    </tr>
    <tr>
        <td>Record 3</td>
        <td>value 9</td>
        <td>value 10</td>
        <td>value 11</td>
        <td>value 12</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 3) -->
        </td>
    </tr>
</table>

<table id="example_table">
    <tr>
        <th>Column header 1</th>
        <th>Column header 2</th>
        <th>Column header 3</th>
        <th>Column header 4</th>
        <th>Column header 5</th>
    </tr>
    <tr>
        <td>Record 1</td>
        <td>value 1</td>
        <td>value 2</td>
        <td>value 3</td>
        <td>value 4</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 1) -->
        </td>
    </tr>
    <tr>
        <td>Record 2</td>
        <td>value 5</td>
        <td>value 6</td>
        <td>value 7</td>
        <td>value 8</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 2) -->
        </td>
    </tr>
    <tr>
        <td>Record 3</td>
        <td>value 9</td>
        <td>value 10</td>
        <td>value 11</td>
        <td>value 12</td>
    </tr>
    <tr>
        <td colspan="5">
            <!-- additional custom info is here (for Record 3) -->
        </td>
    </tr>
</table>

第2步-Javascript (Step 2 – Javascript)

In order to turn the table into the expandable table, we have to connect the jExpand plugin:

为了将表转换为可扩展表，我们必须连接jExpand插件：

<script type="text/javascript" src="jExpand.js"></script>

<script type="text/javascript" src="jExpand.js"></script>

And then – initialize the plugin:

然后–初始化插件：

 $('#example_table').jExpand();

 $('#example_table').jExpand();

If you have a look into the plugin sources, you will find that it’s code is rather simple:

如果您查看插件源代码，就会发现它的代码非常简单：

(function($){
    $.fn.jExpand = function(){
        var element = this;
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function() {
            $(this).next("tr").toggle();
        });
    }
})(jQuery);

(function($){
    $.fn.jExpand = function(){
        var element = this;
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function() {
            $(this).next("tr").toggle();
        });
    }
})(jQuery);

The logic of work is very simple: Firstly, it adds .odd class to every odd row in the table (for simplier table styling), then it hides all other (not .odd) rows with our additional content. Then it shows the first table row. Finally, it adds onclick event handler to all .odd rows (with basic info). By clicking on the odd row, it toggles the visibility of related details row (even rows). Short and clear.

工作的逻辑非常简单：首先，它向表中的每个奇数行添加.odd类(用于更简单的表样式)，然后用我们的其他内容隐藏所有其他(非.odd)行。 然后显示第一行。 最后，它将onclick事件处理程序添加到所有.odd行(带有基本信息)。 通过单击奇数行，可以切换相关明细行(偶数行)的可见性。 简短明了。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

翻译自: https://www.script-tutorials.com/creating-expandable-tables-with-jexpand/

jexpand