哪些基于jquery的表插件可以隐藏子行? [英] What jquery based table plugin can hide sub rows?

问题描述

我需要将excel宏转换为jquery代码，其功能是，如果要在column2中键入值，则需要单击加号以展开并显示子行以修改column2，其他列无法修改.在展开父行之前，您无法直接修改column2的值，因为有许多子行属于父行，例如Car.名称，模型，代码的值是现有的，它们是主数据，无需键入或修改.

I'm in the need to convert excel macros into jquery code, the function is that you need to click on the plus sign to unfold and show the sub rows to modify column2 if you want to type values in column2, the other columns can't be modified. You can't straightly modify values of column2 until you unfold the parent row, because there are many sub rows belonging to parent row,say Car. The values of Name, Model, Code are existing, they are master data, no need to type or modify.

请查看快照:

除了修改子行中的值之外，我还需要知道哪些子行被修改以及这些行的值.最初，可编辑列为空白.当您单击减号时，子行可以再次折叠，但是修改后的值不会丢失，再次展开时它们仍然存在.最后一个要求是它是跨设备的，代码必须在PC，手机，平板电脑上都能很好地运行.有可能吗?

Besides modifying values in sub rows , I need to be able to know which sub rows are modified and values of those rows.Initially the editable columns are blank. And when you click on the minus sign, the sub rows can be folded again,but the modified values won't be lost,they are still there when unfolded again. One last requirement is it's cross devices, the code must run well on pc,mobile phone,pad. Is that possible?

非常感谢.

推荐答案

您不需要插件即可完成此操作，通常使用几行简单的代码即可完成操作.

You don't need plugins to do that, this is commonly done using a few lines of simple code.

DEMO: http://jsfiddle.net/FHWaw/2/

在本演示中，我在行和单元格上指定一个标识"section"(可以打开或关闭的东西)的属性:

In this demonstration, I specify on rows and cells an attribute identifying the "section" (the thing which can be opened or closed) :

<table>
<tr><td section-opener=mysection1 section-state=open> SOME HEADER </td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr section-content=mysection1><td>some AAA</td><td>some zaaother text</td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr><td section-opener=anothersection section-state=close> Hu ? </td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
</table>
​

(在此示例中，第一个部分首先打开，而第二个部分打开)

(in this sample, the first section is open at first while the second one is open)

然后我有了这个，单击该按钮便决定更改行的类别，以使行可见或不可见:

Then I have this which, on click, decides to change the class of the rows in order to let them be visible or not :

$('body').on('click', 'td[section-opener]', function() {
    changeState($(this).attr('section-opener'));
});

changeState = function(sectionId, newstate) {
    var $opener = $('td[section-opener="'+sectionId+'"]');
    var oldstate = $opener.attr('section-state');
    if (oldstate==newstate) return newstate;
    newstate = oldstate=='open' ? 'close' : 'open'; // sanitization
    $opener.attr('section-state', newstate);
    $('tr[section-content="'+sectionId+'"]').attr('section-state', newstate);
    return newstate;
};​

我有一个CSS，主要用于隐藏封闭的部分(并且可以清楚地识别打开器):

And I have a CSS which mainly lets closed section be hidden (and the openers be clearly identifiable) :

td[section-opener] {
    font-weight: bold;
    cursor: pointer;
}
td[section-opener][section-state="close"]:before {
    color: #ccc;
    content: " \25B6  ";
}
td[section-opener][section-state="close"]:hover:before{
    color: #aaa;
    content: " \25B6  ";
}
td[section-opener][section-state="open"]:before {
    content: "\25BC  ";
}
tr[section-content][section-state="close"] {
    display: none;
}
tr[section-content][section-state="open"] {
    display: table-row;
}

由于永不删除任何内容，因此关闭并再次打开时不会丢失您编辑的输入.

​As nothing is never deleted, your edited input won't be lost when closing and then opening again.

这篇关于哪些基于jquery的表插件可以隐藏子行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！