頁面 table 可編輯的實現

標籤：style   blog   http   color   io   os   使用   ar   java   

可編輯table 實現目前我用到的比較好用的有兩個：

 

X-editable

  支援bootstrap，jqueryUi, jquery

用法：

　　引入jquery.min.js  就不用說了

　　其次頁面引入：

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

　js  調用：

$(".deport").editable({ type: ‘select‘,source:deport});

 

　　有兩種編輯：行內開啟和tips 開啟檔案：

這種事popur

這種是inline

代碼設定 

$.fn.editable.defaults.mode = ‘inline‘;

　　

 

編輯方式：

 $(‘#status‘).editable({        value: 2,            source: [              {value: 1, text: ‘Active‘},              {value: 2, text: ‘Blocked‘},              {value: 3, text: ‘Deleted‘}           ]    });

　　

$(‘#username‘).editable({    type: ‘text‘,    pk: 1,    url: ‘/post‘,    title: ‘Enter username‘});

type :滑鼠點擊的編輯方式，text  表示 是文字框，select  表示是下拉，source 表示綁定下拉的資料來源。支援以下的

• text
• textarea
• select
• date
• datetime
• dateui
• combodate
• html5types
• checklist
• wysihtml5
• typeahead
• typeaheadjs
• select2

還有一個提交驗證的方法 validate，值得注意的是validate方法是在修改完成之後調用，但是並不表示資料已經在頁面上了，此時的資料還沒有更新到頁面上。

還有提供ajax 提交的，具體更多參考：http://vitalets.github.io/x-editable/docs.html

 

 

editableTableWidget

這個來說相比簡單的多

http://mindmup.github.io/editable-table/

 

使用：

$(‘#table‘).editableTableWidget();

驗證資料：

$(‘table td‘).on(‘validate‘, function(evt, newValue) {if (....) { return false; // mark cell as invalid }});

修改完成事件：

$(‘table td‘).on(‘change‘, function(evt, newValue) {// do something with the new cell value if (....) { return false; // reject change}});

　　這裡的onchange 和x-edittable 不一樣，這裡的onchange是資料已經修改完成之後觸發的回調。

 技巧：此js 會讓所有的td 可編輯，如果不想編輯某個儲存格，將td標籤換成th 就行

 

頁面 table 可編輯的實現