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

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

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

例子如下:

<table id="example"></table>
<script type="text/javascript">
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);    
}
</script>

如上所示,在保存時,其實可以根據新增、修改、刪除,三種狀態來區分具體數據,而在保存之前需要調用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<String,Map<String,String>>轉換的話就是要json.simple的JSONParser。如果需要直接轉換bean或者其他的話可以根據自己的思路轉換,這里只說明自己的簡單實現。畢竟現在不用了,沒研究那么多。

Easyui Datagrid增刪改及后臺交互(java)
文章《Easyui Datagrid增刪改及后臺交互(java)》二維碼
  • 微信打賞
  • 支付寶打賞

已有10條評論

  1. hl

    還可以啦…..

    2017-10-10 10:03 回復
  2. Jessica

    后臺如何獲取 effectRow 里的這些內容?

    2014-12-02 20:21 回復
  3. 虎門婚紗攝影

    試試,看看效果如何嘞!

    2013-05-16 10:53 回復
  4. 養生

    效果看起來很不錯

    2013-05-15 17:26 回復
  5. 嬰兒游泳池

    折騰出真知啊

    2013-05-10 16:19 回復
  6. airoschou

    不錯,學有所用,現在許多公司用不到你懂的技能,時間長了就荒廢了

    2013-05-08 09:49 回復
  7. php學習

    java感覺比php難多了。。。

    2013-05-04 18:32 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖