[英]What jquery based table plugin can hide sub rows?
我需要將excel宏轉換為jquery代碼,其功能是,如果要在column2中鍵入值,則需要單擊加號以展開並顯示子行以修改column2,其他列可以。不能修改。 除非展開父行,否則您不能直接修改column2的值,因為有許多子行屬於父行,例如Car。 名稱,模型,代碼的值是現有的,它們是主數據,無需鍵入或修改。
請查看快照:
除了修改子行中的值之外,我還需要知道修改了哪些子行以及這些行的值。最初,可編輯列為空白。 並且當您單擊減號時,子行可以再次折疊,但是修改后的值不會丟失,再次展開時它們仍然存在。 最后一個要求是它是跨設備的,代碼必須在PC,手機,平板電腦上運行良好。 那可能嗎?
非常感謝。
您不需要插件即可執行此操作,通常使用幾行簡單的代碼即可完成此操作。
演示: 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;
}
``由於絕不會刪除任何內容,因此在關閉然后再次打開時不會丟失您編輯的輸入。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.