在Moody's Analytics這樣一個(gè)數(shù)據(jù)導(dǎo)向的公司娇澎，會(huì)碰到各式各樣的表格笨蚁，涉及到許多對表格的編輯、保存趟庄、過濾括细、搜索等操作，本文介紹幾種編輯和保存的模式戚啥，下一篇將講過濾和搜索奋单。
"Inline editing" 從字面上看上去第一眼會(huì)以為是在一行中做編輯，其實(shí) “Inline” 是 “內(nèi)聯(lián)的” 的意思猫十，指的是在原頁面進(jìn)行編輯和保存览濒，而不是跳到另一個(gè)頁面進(jìn)行編輯。相比于另起一個(gè)頁面進(jìn)行編輯的形式，Inline editing更符合用戶的直覺，更不容易迷失溅固。
1. 知乎
知乎的個(gè)人資料可以用Inline editing 進(jìn)行編輯拼弃。下圖是我的知乎個(gè)人資料頁癌淮。
當(dāng)鼠標(biāo)懸浮到某一欄上時(shí)，出現(xiàn)編輯按鈕：
點(diǎn)擊“修改按鈕”，則原欄目變?yōu)榭删庉嫚顟B(tài)诉探，同時(shí)出現(xiàn)“確定”按鈕：
編輯完后點(diǎn)擊“確定”即可完成編輯汇荐。整個(gè)過程沒有涉及到任何的頁面跳轉(zhuǎn)洞就，用戶清楚地知道他編輯的內(nèi)容會(huì)顯示在哪里。
2. 在表格中的應(yīng)用
經(jīng)過以上介紹掀淘，大家想必也了解了Inline editing在表格中如何使用旬蟋，對，就是直接在表格上進(jìn)行編輯革娄。
2.1 舉個(gè)最簡單的例子咖为，下面的表格是一張已保存的表格。
用戶將鼠標(biāo)點(diǎn)到某一欄時(shí)稠腊，該欄即變?yōu)榭删庉嫚顟B(tài)：
這時(shí)用戶可以任意修改。并且當(dāng)鼠標(biāo)點(diǎn)擊到其他欄或者表格以外的地方時(shí)鸣哀，該可編輯欄lose focus之后自動(dòng)保存修改后的內(nèi)容架忌，并變回不可編輯狀態(tài)。
具體demo可參考：http://www.zkoss.org/zkdemo/grid/inline_editing
2.2 Inline editing的形式基本上如2.1的例子那樣我衬，不同的地方在于觸發(fā)編輯的條件叹放。如下圖，表格中的每一欄都有 edit 和 delete 按鈕挠羔。
用戶點(diǎn)擊 edit 即觸發(fā)編輯狀態(tài)井仰，整行都變?yōu)榭删庉嫚顟B(tài)。修改完后可進(jìn)行“update” 或者 "Cancel"破加。這種編輯方式適合做部分修改的時(shí)候使用俱恶，如果整個(gè)表格都要修改，那么用戶需要一行一行地點(diǎn)擊edit范舀、update合是，就會(huì)很麻煩。
具體demo可參考：http://demos.telerik.com/kendo-ui/grid/editing-inline
2.3 觸發(fā)編輯的條件還可以是雙擊锭环，如下圖為原圖：
當(dāng)雙擊某一欄時(shí)聪全，該欄變?yōu)榭删庉嫚顟B(tài)，并出現(xiàn)“update” 和 “Cancel” 按鈕辅辩。這種模式顯示隱藏的更深难礼，用戶不容易發(fā)現(xiàn)雙擊進(jìn)入可編輯狀態(tài)這樣一個(gè)動(dòng)作，所以適合作為彩蛋輔助使用玫锋，不適合作為主要編輯動(dòng)作蛾茉。
具體demo可參考：http://dev.sencha.com/extjs/5.0.0/examples/grid/row-editing.html
3. 其他形式
有些形式的編輯也是在原頁面進(jìn)行，但是有彈出框景醇，我不確定算不算inline editing臀稚，暫且認(rèn)為是inline editing。
3.1 淘寶購物車三痰，原圖如下：
當(dāng)鼠標(biāo)懸浮到顏色分類欄時(shí)吧寺，出現(xiàn)修改按鈕：
點(diǎn)擊修改窜管，彈出顏色分類選項(xiàng)，用戶可重新選擇顏色分類稚机。彈出框沒有屏蔽原頁面幕帆，并且彈出框懸停在編輯位置處。當(dāng)用戶點(diǎn)擊彈出框以外的區(qū)域時(shí)赖条，彈出框自動(dòng)消失失乾。與Dialogue彈出框不同，這種彈出框不會(huì)阻斷原頁面和編輯頁面的關(guān)聯(lián)性纬乍，暫且認(rèn)為也屬于Inline editing碱茁。
3.2 LinkedIn 的個(gè)人資料編輯，原圖如下：
鼠標(biāo)懸浮時(shí)出現(xiàn)編輯圖標(biāo)仿贬，點(diǎn)擊編輯圖標(biāo)彈出編輯器：
這個(gè)形式和淘寶購物車的彈出編輯器一樣纽竣，都是在原編輯內(nèi)容旁邊彈出一個(gè)編輯器，不發(fā)生頁面的跳轉(zhuǎn)茧泪，不阻斷編輯器和原文的關(guān)聯(lián)性蜓氨。
4.總結(jié)：
Inline editing是指在原頁面編輯并保存而不需要跳轉(zhuǎn)頁面進(jìn)行編輯的一種形式，符合用戶的直覺队伟，適合小范圍的編輯穴吹。可能有顯性的編輯按鈕進(jìn)入Inline editing 狀態(tài)嗜侮，也可能是隱形的編輯按鈕在鼠標(biāo)懸浮時(shí)才出現(xiàn)港令，甚至沒有編輯按鈕，通過鼠標(biāo)單擊或雙擊就能進(jìn)入編輯狀態(tài)棘钞，最后一種方法隱藏太深缠借，不適合做主要編輯方式。
=====我的公眾號：BaolingUX====
