1

我需要将excel宏转换为jquery代码，功能是如果要在column2中键入值，您需要单击加号展开并显示子行以修改column2，其他列可以' t被修改。在展开父行之前，您不能直接修改 column2 的值，因为有许多子行属于父行，比如 Car。Name、Model、Code的值是存在的，都是主数据，不需要输入或修改。

请看快照：

在此处输入图像描述

在此处输入图像描述

除了修改子行中的值之外，我还需要能够知道哪些子行被修改以及这些行的值。最初可编辑的列是空白的。并且当你点击减号时，子行可以再次折叠，但修改后的值不会丢失，再次展开时它们仍然存在。最后一个要求是它是跨设备的，代码必须在 pc、手机、pad 上运行良好。那可能吗？

非常感谢。

4

1 回答 1

0

你不需要插件来做到这一点，这通常使用几行简单的代码来完成。

演示：http: //jsfiddle.net/FHWaw/2/

在这个演示中，我在行和单元格上指定了一个标识“部分”（可以打开或关闭的东西）的属性：

<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>
​

（在此示例中，第一部分首先打开，而第二部分打开）

然后我有这个，在点击时，它决定更改行的类，以便让它们可见或不可见：

$('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，主要是让封闭部分被隐藏（并且开启者可以清楚地识别）：

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;
}

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

于 2012-09-03T15:12:37.260 回答