Extjs學習總結之23EditGridPanel可編輯表格

 

Ext.onReady(function(){
    /*
     * EditorGridPanel的工作過程
     * 1、用戶點擊單元格
     * 2、單元格按照預設的組件顯示單元格的內容並處於編輯狀態
     * 3、離開單元格的編輯狀態
     * 4、更新編輯後的內容，出現三角號表示已經被修改過
     * 5、程序內部變化：將記錄設置爲髒讀數據狀態，並將修改後的記錄存放在Record類型的數組modified中。
     */


    //準備數據
    var data = [
        {id:1,date:new Date(),name:"呂鵬",address:"中華人民共和國",bank:"中國光大銀行",isFast:true},
        {id:2,date:new Date(),name:"張三",address:"中華人民共和國",bank:"中國農業銀行",isFast:false},
        {id:3,date:new Date(),name:"李四",address:"中華人民共和國",bank:"中國商業銀行",isFast:false},
        {id:4,date:new Date(),name:"王五",address:"中華人民共和國",bank:"中國招商銀行",isFast:false}
    ];
    //Proxy
    var proxy = new Ext.data.MemoryProxy(data);
    //描述數據結構
    var Order = Ext.data.Record.create(
        [
            {name:"ID",type:"int",mapping:"id"},//編號
            {name:"DATE",type:"date",mapping:"date"},//日期
            {name:"NAME",type:"string",mapping:"name"},//姓名
            {name:"ADDRESS",type:"string",mapping:"address"},//地址
            {name:"BANK",type:"string",mapping:"bank"},//銀行
            {name:"ISFAST",type:"boolean",mapping:"isFast"}//銀行
        ]
    );
    //Reader
    var reader = new Ext.data.JsonReader({},Order);
    //Store  列模型中的dataIndex必須和Human結構中的name屬性保持一致
    var store = new Ext.data.Store({
        proxy:proxy,
        reader:reader,
        autoLoad:true,
        pruneModifiedRecords:true
    });

    //交易銀行
    var banks = [
        ["中國光大銀行","中國光大銀行"],
        ["中國農業銀行","中國農業銀行"],
        ["中國商業銀行","中國商業銀行"],
        ["中國招商銀行","中國招商銀行"]
    ]

    //列模型
    var cm = new Ext.grid.ColumnModel([
        {header:"訂單編號",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},
        {header:"下單日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({
            format:"Y-m-d"
        }))},
        {header:"收貨人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header:"收貨人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header:"交易銀行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
            store:new Ext.data.SimpleStore({
                fields:["value","text"],
                data:banks
            }),
            displayField:"text",
            valueField:"value",
            mode:"local",
            triggerAction:"all",
            readOnly:true,
            emptyText:"請選擇銀行"

        }))},
        {header:"快遞",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快遞":"非快遞"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}
    ]);
    //EditorGridPanel定義
    var grid = new Ext.grid.EditorGridPanel({
        store:store,
        cm:cm,
        autoExpandColumn:"ADDRESS",
        width:800,
        autoHeight:true,
        renderTo:"a",
        autoEncode:true, //提交時是否自動轉碼
        tbar:[{
            text:"添加一行",
            cls:"x-btn-text-icon",
            handler:function(){
                var initValue = {
                        ID:"",
                        DATE:new Date(),
                        NAME:"",
                        ADDRESS:"",
                        BANK:"",
                        ISFAST:false
                    };

                var order = new Order(initValue);
                grid.stopEditing();
                grid.getStore().add(order);

                //設置髒數據
                order.dirty = true;
                //只要一個字段值被修改了，該行的所有值都設置爲髒讀標記
                order.modified = initValue;
                if(grid.getStore().modified.indexOf(order) == -1){
                    grid.getStore().modified.push(order);
                }
            }

        },{
            text:"刪除一行",
            cls:"x-btn-text-icon",
            handler:function(){
                var sm = grid.getSelectionModel();
                if(sm.hasSelection()){
                    Ext.Msg.confirm("提示","真的要刪除選中的行嗎？",function(btn){
                        if(btn == "yes"){
                            var cellIndex = sm.getSelectedCell();//獲取被選擇的單元格的行和列索引
                            var record = grid.getStore().getAt(cellIndex[0]);
                            grid.getStore().remove(record);
                        }
                    });
                }else{
                    Ext.Msg.alert("錯誤","請先選擇刪除的行，謝謝");
                }
            }
        },"-",{
            text:"保存",
//          icon:"",
            cls:"x-btn-text-icon",
            handler:function(){
                var store = grid.getStore();
                //得到修改過的Recored的集合
                var modified = store.modified.slice(0);
                //將數據放到另外一個數組中
                var jsonArray = [];
                Ext.each(modified,function(m){
                    //alert(m.data.ADDRESS);//讀取當前被修改的記錄的地址
                    //m.data中保存的是當前Recored的所有字段的值json，不包含結構信息
                    jsonArray.push(m.data);
                });

                var r = checkBlank(modified);
                if(!r){
                    return;
                }else{
                    //通過ajax請求將修改的記錄發送到服務器最終影響數據庫
                    Ext.Ajax.request({
                        method:"post",//最好不要用get請求
                        url:"../../../editGridServlet",
                        success:function(response,config){
                            var json = Ext.util.JSON.decode(response.responseText);
                            //grid.getStore().reload();
                            Ext.Msg.alert("提交成功",json.msg);
                        },
                        params:{data:Ext.util.JSON.encode(jsonArray)}

                    });
                }
            }
        }]
    });
    //刪除一行時，同步數據庫
    grid.getStore().on("remove",function(s,record,index){
        var jsonArray = [record,data];//因爲servlet只處理數組，所以先變成數組
        if(record.data.ID != ""){
            Ext.Ajax.request({
                method:"post",
                url:"../../../editGridServlet",
                params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},
                success:function(response,config){
                    var msg = Ext.util.JSON.decode(response.responseText);
                    //grid.getStore().reload();
                    Ext.Msg.alert("",msg.msg);
                }
            });
        }
    });

    //驗證是否輸入的數據是有效的
    var checkBlank = function(modified/*所有編輯過的和新增加的Record*/){
        var result = true;
        Ext.each(modified,function(record){
            var keys = record.fields.keys;//獲取Record的所有名稱
            Ext.each(keys,function(name){
                //根據名稱獲取相應的值
                var value = record.data[name];
                //找出指定名稱所在的列索引
                var colIndex = cm.findColumnIndex(name);
                //var rowIndex = grid.getStore().indexOfId(record.id);

                //根據行列索引找出組件編輯器
                var editor = cm.getCellEditor(colIndex).field;
                //驗證是否合法
                var r = editor.validateValue(value);
                if(!r){
                    Ext.MessageBox.alert("驗證","對不起，您輸入的數據非法");
                    result = false;
                    return;
                }

            });
        });
        return result;
    }
});