bootstrap可編輯整個表格

我正在嘗試使平滑的窗體比平常。我在看Bootstrap Editable，但是在那個時候你只能編輯一個字段。所以我一直在尋找一種方法來使整個表單可編輯。bootstrap可編輯整個表格

要清楚我想要一個像普通文本的用戶配置文件的頁面，當您按「編輯」更改爲Web窗體;一個文本字符串更改爲一個文本框等....

我可以自己做這個，但我已經看到這樣做的形式，但我現在找不到任何人，谷歌沒有發現任何有用的東西。

問題是，有沒有圖書館/插件，或者我應該自己做？

來源

2016-04-07 VikingIT

自己做。使用插件與brad練習相當。你沒有完全控制它。它也可能會與其他插件發生衝突。再加上你想要的代碼似乎並不難寫。 – Chay22

這應該是非常簡單的做你自己。爲你的元素定義一些標記（在我的示例中，我使用了span），並掛接一個事件偵聽器來檢查編輯按鈕/鏈接上的點擊，並用輸入替換文本。

實施例：https://jsfiddle.net/dwynzhfg/2/

此代碼當然可以清理位和優化。您需要弄清楚如何最好地處理實際將值傳遞到您的服務器（如果值正在保存，可能是!editable分配上的掛鉤，以返回到服務器）

來源

2016-04-07 23:40:12

不需要太多很多代碼來做到這一點。

HTML：

<div class="container"> 
<form class="is-readonly"> 
    <div class="form-group"> 
    <label for="exampleInputPassword1">Full Name</label> 
    <input type="text" class="form-control is-disabled" id="exampleInputPassword1" placeholder="Name" value="Jon Stewart" disabled> 
    </div> 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control is-disabled" id="exampleInputEmail1" placeholder="Email" value="[email protected]" disabled> 
    </div> 
    <button type="button" class="btn btn-default btn-edit js-edit">Edit</button> 
    <button type="button" class="btn btn-default btn-save js-save">Save</button> 
</form> 
</div>

的jQuery：

$(document).ready(function(){ 
    $('.js-edit, .js-save').on('click', function(){ 
    var $form = $(this).closest('form'); 
    $form.toggleClass('is-readonly is-editing'); 
    var isReadonly = $form.hasClass('is-readonly'); 
    $form.find('input,textarea').prop('disabled', isReadonly); 
    }); 
});

SCSS：

form { 
    &.is-readonly { 
    .btn-save { 
     display: none; 
    } 
    input,textarea{ 
     &[disabled] { 
     cursor: text; 
     background-color: #fff; 
     border-color: transparent; 
     outline-color: transparent; 
     box-shadow: none; 
     } 
    } 
    } 
    &.is-editing { 
    .btn-edit{ 
     display: none; 
    } 
    } 
}

JsFiddle Working Example。

只讀：

編輯：

來源

2016-04-08 00:01:57

bootstrap可編輯整個表格

回答

相關問題