easyui中datagrid行內編輯自動計算

在專案開發中，如果列表中涉及的有計算邏輯的，最偷懶的辦法的辦法，先建乙個form表單，擺一些文字框，讀取文字框內的值，編寫計算邏輯得出結果，so easy!!!

可是有些客戶對開啟乙個新的表單，太麻煩（客戶就是上帝，能解決的麻煩，就給客戶解決了），希望能在列表中直接編輯字段內容，自動計算值。我這個需求讓我廢了半天時間。對計算的列，客戶想手動的修改計算的結果。然後還有一列，不手動改，也是實時顯示計算結果，直接看截圖吧。

目標：紅色標註的列修改後，現金和藍色標註列會根據紅色標識列自動算出來；藍色標註列手動修改後，現金自動變換。

實現過程：

根據easyui官方文件，需要為datagrid，設計全域性變數，當前編輯行索引editindex；

新增單擊編輯單元格事件，設定當前行為編輯狀態，上次編輯行結束編輯;

為編輯的單元格新增onchange事件，當編輯的內容發生改變是，獲取到改變後的值，計算現金和藍色標註列；

在計算過程中獲取文字框的值，editors[0].target.val()

$('#gridlist').datagrid('endedit', editindex);

$("#gridlist").datagrid(}}

},}}},
}}
},]],
onclickcell: onclickcell
//滑鼠單擊某一行時開啟該行的編輯狀態
});//
全域性變數需要編輯的行
var editindex =undefined; 
function
endediting() 
if ($('#gridlist').datagrid('validaterow', editindex))  
else
}function
onclickcell(index, field) );
if(ed) 
editindex =index;
} else
, 0);
}}}/*
function: 自動計算結算金額值
* param:autocol4--布林型別，true表示手動修改藍色列
*/function
calculate(autocol4) 

EasyUI中datagrid控制項的Editor

datagrid 中的editor 每個editor 支援如下方法 方法 引數 說明 init container,options 初始化editor 並返還目標物件 destroy target 銷毀 editor getvalue target 從 editor text 中讀取值 setval...

在easyui中實現datagrid滾動條聯動

豎向滾動條聯動 var contents importform div.datagrid body contents.scroll function 橫向滾動條聯動 var contents2 importform div.datagrid view2 div.datagrid header con...

easyui學習筆記 datagrid中相關學習

value 當前列對應字段值。row 當前的行記錄資料。index 當前的行下標。var ele json.stringify user replace g,修改 或者 var ele json.stringify user replace g,修改 formatter function value...