使用JavaScript/JQuery創建多字段就地編輯器

我正在尋找一種在JavaScript中創建就地編輯器的方法，如JEditable或類似的插件。然而，不同的是，我的編輯將是一個多字段的形式而不是單個字段。由於相同的表單將用於不同的部分，即編輯現有的項目和創建新的項目，我希望能夠爲每個案例指定回調函數，而不必重複共享功能（例如驗證，取消按鈕等）。使用JavaScript/JQuery創建多字段就地編輯器

目前我試着實現它天真，代碼看起來很糟糕，因爲事件處理程序散佈在源代碼周圍，而不是作爲一個組件在一起。

所以我的問題是什麼是實施這個建議的方式？如果有一個提供功能的jQuery插件，那可能是最簡單的路線。否則，我將如何正確構建我的代碼？

來源

2010-07-06 ejel

問題是您需要將數據與顯示的文本分開。對於顯示的每個數據塊，將json字典（寫入頁面或用ajax拉出）與表單中每個字段的文本相關聯。

例如，如果你使用的名稱（第一，中間，最後），顯示你喜歡這個名字的工作：

<span class="editable">Colin M. Hansen</span>

和你寫這樣的形式：

<form class="nameform" style="display: none;"> 
    <input class="first" type="text"> 
    <input class="mi" type="text"> 
    <input class="last" type="text"> 
</form>

，你有這樣一個字典，形式映射到輸入：

name1 = { 
    first: 'Colin', 
    mi: 'M', 
    last: 'Hansen' 
};

編寫通用代碼切換的形式輸入span元素的onclick上的文本，並用字典中的數據填充每個輸入字段。提交代碼將新數據保存到name1和服務器，並返回新的顯示文本。

來源

2010-07-06 18:32:25 colinmarc

單獨的回調函數的定義，做的編輯回調查找到所需的回調

var callbacks = { // define your callbacks here 
    'field1': function() { 
    alert("You editted field1"); 
    }, 
    'field2': function() { 
    alert("You editted field2"); 
    } 
} 

$("input").each(function(i, o) { 
    $(o).editable('save.php', { 
    'callback': function(value, settings) { 
     // do validation etc. 

     // then call field-specific callback 
     if(callbacks[o.name]) { // I'm using 'name', but you could also use 'id' or something else 
     callbacks[o.name](); 
     } 
    } 
    }); 
});

來源

2010-07-06 18:37:50 Gate

在我的情況，我想只爲形式提交按鈕，而不是爲各個領域的回調。整個表單應該整體顯示/隱藏/提交/取消。 – ejel 2010-07-06 19:12:57

使用JavaScript/JQuery創建多字段就地編輯器

回答

相關問題