最近項目的特殊性可算是把我折騰得夠嗆，從最開始的整站JS，到現在的Liferay，且不說后臺，單單前臺框架就讓我從Dojo到YUI又到AUI、jQuery、ExtJS，常用API翻了一遍，常見問題解決了一遍，而歸根結底，為的就是一個方便好用、加載迅速的Grid控件。還好目前是定準用ExtJS了，不然常用控件都用一遍也沒找到完全合適的，就困難了。題外話至此，下面開始正題。

剛剛看到同學在之前發的文章，在使用Easyui DataGrid時遇到新增行數據在保存時不能獲取的問題，解決方法是在保存時先執行$('#example′).datagrid('acceptChanges');然后前臺獲取全部行，再拼裝字符串傳到后臺，這樣做是可以解決，但實際上Easyui Datagrid似乎有更好的API供調用。為了和我一樣的新手少走彎路，故寫此篇文章以便參考。

例子如下：

easyloader.locale = "zh_CN";

easyloader.theme = "gray";

using(['datagrid'], function () {

//new Datagrid的代碼寫在這里，下面是Datagrid中相應按鈕調用的方法，是根據官方demo復制過來的。這里推薦使用easyloader，因為他是easyui實現的動態加載模塊，個人認為會比一個個引入好點。

});

var editIndex = undefined;//標示當前編輯行，提高效率，避免使用each遍歷所有行來關閉正在編輯的行。

function endEditing(){

if (editIndex == undefined){return true;}

if ($('#example').datagrid('validateRow', editIndex)){

var ed = $('#example').datagrid('getEditor', {index:editIndex,field:'productid'});

var productname = $(ed.target).combobox('getText');

$('#example').datagrid('getRows')[editIndex]['productname'] = productname;

$('#example').datagrid('endEdit', editIndex);

editIndex = undefined;

return true;

} else {

return false;

}

}

function onClickRow(index){

if (editIndex != index){

if (endEditing()){

$('#example').datagrid('selectRow', index).datagrid('beginEdit', index);

editIndex = index;

} else {

$('#example').datagrid('selectRow', editIndex);

}

}

}

function append(){

if (endEditing()){

$('#example').datagrid('appendRow',{status:'P'});

editIndex = $('#example').datagrid('getRows').length-1;

$('#example').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);

}

}

function remove(){

if (editIndex == undefined){return}

$('#example').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);

editIndex = undefined;

}

function accept(){

if (endEditing()){

var inserted = $dg.datagrid('getChanges', "inserted");

var deleted = $dg.datagrid('getChanges', "deleted");

var updated = $dg.datagrid('getChanges', "updated");

var effectRow = new Object();

if (inserted.length) {

effectRow["inserted"] = JSON.stringify(inserted);

}

if (deleted.length) {

effectRow["deleted"] = JSON.stringify(deleted);

}

if (updated.length) {

effectRow["updated"] = JSON.stringify(updated);

}

$.post("commit", effectRow, function(response) {

if(response.status){

$("#example").datagrid('acceptChanges');

}

}, "JSON");

}

}

function reject(){

$('#example').datagrid('rejectChanges');

editIndex = undefined;

}

function getChanges(){

var rows = $('#example').datagrid('getChanges');

console.log(rows);

}

如上所示，在保存時，其實可以根據新增、修改、刪除，三種狀態來區分具體數據，而在保存之前需要調用endEdit，所以文章一開始說的問題就很明顯了，不是直接acceptChanges而是要先endEdit，之后就能拿到新插入的數據了。而提交的時候可以使用JSON.stringify(object);得到json字符串后提交，后面就是使用ajax請求傳遞字串給后臺了。這里要說一下，使用這個JSON.stringify的時候，我在IE下面有點問題，不知道是不是我使用easyloader的問題，時間關系，我沒深究，因為我們使用的Liferay本身集成有AUI(其實就是YUI的擴展),我就直接調用A.JSON.stringify了，如果大家在使用的時候有遇到問題，可以找其他object to json的轉換方式，同時也歡迎大家轉告給我，以便整理出更簡明、完善的例子。

下面簡單說明一下后臺獲取方式，因為前臺提交時用的是對象，里面最多也就三個元素，分別為inserted、deleted、updated，所以在后臺直接通過request直接get就能得到String型的json數組。我的方式是把數組直接轉換為List>轉換的話就是要json.simple的JSONParser。如果需要直接轉換bean或者其他的話可以根據自己的思路轉換，這里只說明自己的簡單實現。畢竟現在不用了，沒研究那么多。

Easyui Datagrid增刪改及后臺交互(java)

微信打賞

支付寶打賞

總結

以上是生活随笔為你收集整理的easyui框架前后端交互_Easyui Datagrid增删改及后台交互(java)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。