前段時間需要完成datatables+jeditable實現行內編輯，成功修改並單行刷新，如果數據輸入的不符合規范或超值，重新顯示舊值，以下是我實現過程用到的參數及方法和查閱的資料
屬性配置：submitdata = 在jeditable編輯點擊OK后提交到后台之前的操作函數，里面的value值是舊值
方法：fnDrawCallback = 在每次table被draw完后調用
fnUpdate = 實現單行刷新，可自行選擇刷新后是否重新刷新整個表格
參考資料鏈接： jeditable Link : http://www.cnblogs.com/li-mei/p/5433827.html
datatables Link : http://blog.csdn.net/lithinkingboy/article/details/38539639
jeditable官網 Link : http://www.appelsiini.net/projects/jeditable (如果打不開，試試用Google browser打開)
為查閱方便我直接將“冰檸檬草”整理的參數粘到此處
| 參數名 |
值類型 |
默認值/參數 |
說明 |
| event |
String |
click |
觸發編輯的事件，常用的是click或dblclick。 |
| method |
String |
POST |
內容ajax提交的方式。 |
| callback |
Function |
value, settings |
內容提交完成后的回調函數。接收兩個參數，value是編輯后的內容，setings為插件所有的參數。在函數內還可以使用this,代表調用editable的dom對象，如基本案例中的class為editable的節點元素(一般為td或span等文字內容容器)。 |
| name |
String |
value |
觸發編輯事件后會生成一個form表單，表單內含一個input框，這便是該input框name屬性的值。如平時寫的 name = “username”，這里name=”value”。該參數的值是ajax提交時默認提交的一個參數名，對應的值為input框的內容(也即該 input框的value)。 |
| id |
String |
id |
同name參數，該參數的值是ajax提交時默認提交的另一個參數名，對應的值是調用editable的原dom對象的id值。 |
| submitdata |
Mixed |
提交的數據，默認會提交參數name和參數id的值，通過該參數追加傳遞的數據。該參數可以直接寫一個hash數據，如 {a:’1’, b:’2’}，但一般是動態數據，通過像callback一樣的函數返回一個hash數據。如function(value, settings){return {isempty:$(this).attr(‘isempty’)};}。注意：這里的value是編輯前的值，編輯后的內容自動通過name參數的值 (如默認的value)傳遞。 | |
| type |
String |
text |
生成的form表單內input框的類型，有text、select、textarea三種。當是select時，要顯 示的數據應該是由下面的loadurl或者data參數提供的hash。如果想用第三方插件進行輸入，如時間選擇器等，就需要添加type，文章下面有討 論。 |
| rows |
Interger |
如果type為textarea，該參數的值就是其rows。 | |
| cols |
Interger |
如果type為textarea，該參數的值就是其cols。 | |
| height |
Interger |
auto |
form表單內input框的height屬性的值。html5的input框才有height屬性，但設置了好像沒什么用。要控制input框的高，還是通過css吧。 |
| width |
Interger |
auto |
同height參數。 |
| cssclass |
String |
生成的form表單的class樣式名。控制其內部的input框的寬高，可以通過這個css樣式，如該參數的值為editable，則.editable input{width: 20px, height: 10px}。 | |
| style |
String |
生成的form表單的style屬性。如display: inline。前端不懂，沒看到什么效果。 | |
| loadurl |
String |
通常情況下要編輯的數據都是頁面上顯示的，但也可以通過這個參數的地址獲取數據來展示在編輯框內進行編輯並提交。默認會攜帶觸發editable的dom對象的id參數。 | |
| loadtype |
String |
GET |
loadurl獲取數據的請求方式。說默認為GET，但不寫不會發起請求，還是定上為好。 |
| loaddata |
Mixed |
loadurl請求時額外攜帶的參數，可參見submitdata。 | |
| loadtext |
String |
Loading… |
loadurl請求過程中顯示的提醒信息，如’數據請求中，請稍候…’。 |
| data |
Mixed |
編輯框內顯示的數據，按以下順序來尋找並優先顯示：loadurl參數請求的數據—>data參數的數據—>頁面上已有的數據。data可以直接是一個字符串，也可以是一個像callback中的函數，在需要對數據進行一番處理再編輯時有用。 | |
| onblur |
String |
cancle |
編輯框失去焦點時進行的操作。可以cancle、submit、ignore三個值。cancle：編輯框消失，不進行任何更改；submit：進行提交，相當於點擊了確認按鈕；ignore:不進任何操作，保留編輯框。 |
| indicator |
String |
提交過程中顯示的提醒，在調用callback函數之前顯示。 | |
| tooltip |
String |
鼠標懸停在等編輯元素上面顯示的文字提醒，就是給待編輯元素加了title。 | |
| placeholder |
String |
click to Edit |
當編輯元素為空值時出現在待編輯元素位置的文字 |
| ajaxoptions |
Hash |
ajax提交時ajax的設置，如url,type,data,async等，一般不用寫，上面都基本包括了。 | |
| onsubmit |
Function |
settings,original |
在submit提交前執行。接收兩個參數，settings為當前設置對象，orininal為調用editable的dom對象，相當於callback中的this。該參數中的this是form表單這個dom對象。 |
| onreset |
Function |
settings,original |
在reset前執行，不知哪里來的reset了，不懂。 |
| onerror |
Function |
settings,original |
在發生錯誤時執行。 |
| submit |
String |
確認提交按鈕的值，沒有則沒有該按鈕。 | |
| cancel |
String |
取消編輯按鈕的值，沒有則沒有該按鈕。 |
fnUpdate 的參數介紹：
Parameters:
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
|
1
|
mData | object | array | string | Data to update the cell/row with |
||
|
2
|
mRow | node | int | TR element you want to update or the aoData index |
||
|
3
|
iColumn | int | Optional | The column to update (not used of mData is an array or object) //此處意思是當mData為數組或對象，該參數是無用的 |
|
|
4
|
bRedraw | bool | Optional | true | Redraw the table or not |
|
5
|
bAction | bool | Optional | true | Perform pre-draw actions or not |
* 單行更新數據， mData是Object類型；mRow指行索引，應為數字；iColumn第三個參數指某列，設置為null或undefined則為忽略列配置；bRedraw 為false指不重構表格，不刷新；bAction是否預繪制操作
iColumn如果給定值，mdata的數據將只更新行內的第一個列內容，如果你想實現單行刷新則將iColumn設為null/undefined（此處是查看源碼介紹）
mRow 為整數，（1，2，3，4...）
mData 數據類型應與你表格顯示格式一致
步驟：
1.首先引入文件，然后為元素添加可編輯元素
HTML <i class='moneypay blue'>1000</i>
JS 兩種方式
(1)通過執行后台方法操作數據
$('.moneypay').editable(" Java URL ",{
type:'text',
submit:'OK',
cssclass:'editable'
});
(2)用function代替URL
$('.moneypay').editable(function(value, element){
//如果是靜態頁面建議使用此方式，也可以動態操作數據，執行相應的ajax請求
//注意：此處的value是新值
return value;
},{
type:'text',
submit:'OK',
cssclass:'editable'
});
添加后，當你點擊元素時就可以進行相應的編輯操作，如下圖1；同時我們也可以查看下jeditable產生編輯效果是添加什么HTML代碼，如圖2
圖1 圖2
由於我一行中有四個輸入框的編輯，在依次點擊四個可編輯區域，輸入框顯示的會越來越大，解決方法就是自己控制生成的input的大小，css 代碼：
form.editable{margin-top:-20px;} td form.editable input{height:20px !important;width:40px !important;} form.editable button{margin-top:42px;margin-left:-35px;}
2.介紹可編輯的具體實現
<1>輸入錯誤要顯示舊值，所以我是用hover事件去獲取可編輯區域的值，如果用戶點擊會將此值作為舊值傳入
$('.monthpay').hover(function(){
var oldvalue = $(this).text();
editYjgz(this,oldvalue);
});
<2>在editYjgz方法中對元素綁定編輯事件
function editYjgz(obj, oldvalue){ $(obj).editable(function(value, setting){ //獲取當前行對象 var trObj = $(this).parent().parent(); //獲取每行中第二列的 職工賬號信息 var zgzh = $(this).parent().parent().find('td').eq(1).text(); //獲取索引行元素對象 var colIndexObj = $(this).parent().parent().find('td').eq(0); //獲取行索引值 var rowIndex = colIndexObj.text()-1; //單元格最終返回值 var lableValue; $.ajax({ url:'${pageContext.request.contextPath}/cardinalChangeController/update?value='+value+'&flag=1&zgzh='+zgzh+'&oldstr='+oldvalue, method: 'post', async: false, dataType:'json', success:function(data){ if(data.msg ==" " || data.mret == 0){ //將字符串類型轉化成object var json = $.parseJSON(data.aoData); //var json = { "A001":"085937","A002":"於國","A008":"130929198410070317","A011":12111,"SUMA":2906.64,"A034":1453.32,"A035":1453.32,"A097":0005,"CE":"","GZ":"","RQ":""} //單行更新數據， json是Object類型；rowIndex指行索引，應為數字；第三個參數指某列，設置為null或undefined則為忽略列配置；false指不重構表格 table.fnUpdate(json, rowIndex, null,false,false); //行變化后，DT控件會將行索引變成001，因此這里直接將行索引賦值為原值 colIndexObj.text(rowIndex+1); //設置被修改后的行變色 if(value != oldvalue){ trObj.css("background-color","#C7EDCC"); } //重新為可編輯區綁定點擊事件 addEditEvents(); } lableValue = data.value; if(data.msg != " "){ layer.alert(data.msg); } } }); return (lableValue); }, { type:'text', submit:'OK', cssclass:'editable' }); }
代碼分析：
《一》為使用fnUpdate()對mRow賦值，所以對Datatable表格（下面會簡稱DT）添加行索引
實現代碼：
"columnDefs" : [
{
"bSortable" : false, "targets" : 0, "width" : "30px", "visible": true, "render" : function(data, type, row, meta) { // 顯示行號 var startIndex = meta.settings._iDisplayStart; return startIndex + meta.row + 1; }, } }
效果圖：
對於序號遇到的問題是，調用單行刷新后，序號值會變成001，所以在ajax成功回調中重新對其進行賦值
《二》對於行編輯成功顯示特殊顏色
==>判斷新值value 舊值oldvalue是否相同
《三》可編輯區域第一次編輯成功后，之后再怎么點擊都沒效果，原因是單行刷新，修改一次后元素沒有再綁定可編輯事件方法，需重新為其綁定
//重新為可編輯區域綁定點擊事件 function addEditEvents(){ $('.monthpay').hover(function(){ var oldvalue = $(this).text(); editYjgz(this,oldvalue); }); }
《四》重點是fnUpdate()第一個參數json, var json = $.parseJSON(data.aoData);
DT顯示數據是JSON格式，並且json數據每列順序、數據類型也要和前台一致 （["data":""]代表的序號列）
后台傳到前台的數據格式{ "A001":"085937","A002":"於國","A008":"130929198410070317","A011":12111,"SUMA":2906.64,"A034":1453.32,"A035":1453.32,"A097":0005,"CE":"","GZ":"","RQ":""}
3.如果行內修改后不需要設置表格不刷新，則前台editable可以使用submitdata這個屬性
$('.monthpay').editable('${pageContext.request.contextPath}/cardinalChangeController/edit?flag=1', {
type:'text',
submit:'OK',
//method:'POST',
cssclass:'editable',
submitdata: function(value, settings){
//此函數中的value代表修改之前的舊值 return {
oldstr: value,
zgzh: $(this).parent().parent().find('td').eq(0).text() //獲取賬號單元格內容
}
},
callback: function(value, setting){
}
});
* 后台獲取新值可以直接使用參數value
public String edit(String oldstr, String value,String zgzh){ //操作具體實現代碼 return value; //最后一定要返回一個字符串 }
以上是我實現此功能的過程，如果對你有所幫助，請幫我點贊，如果有錯誤，請您幫我糾正，我會繼續努力 （*^ _ ^*）