網頁

2014年12月18日 星期四

JQGrid開啟時,跟Server要資料

通常在EditForm中有使用select的時候,會在colModel加入buildSelect,使EditForm打開的時候跟Server要select的資料回來填充。
剛好遇到一個問題,Form中的select,在Edit的時候要disable,Add的時候則要enable。

所以使用 buildSelect,找不到好的時間點enable select。
在beforeShowForm或是afterShowForm進行enable select,在第一次開啟Form跟server要資料的時候,都有很大的機會造成select沒有正常的enable,因為畫面開好了,資料還沒要回來。

所以找到下面這個方法。
colModel:[{label:"Dest Cd"    ,name:"destCode"    ,index:"destCode"    ,width:60 ,editable:true ,edittype:"select" ,editoptions:{disabled:"disabled"} ,formoptions:{elmsuffix:"<span class='required-field'>*</span>"}}
    , {label:"Ctry cd" ,name:"dimDestination.ctryCode" ,index:"dimDestination.ctryCode" ,width:60 ,editable:false }
    , {label:"Country" ,name:"dimDestination.country" ,index:"dimDestination.country" ,width:140 ,editable:false }
    , {label:"Area" ,name:"dimDestination.area" ,index:"dimDestination.area" ,width:140 ,editable:false }
    , {label:"Alarm Miniutes"    ,name:"alarmMin"    ,index:"alarmMin"    ,width:80 ,editable:true ,editoptions:{maxlength:11}}],
loadComplete: function(){ /* 在JQGrid載入時執行*/
    getDestCodeSelect();}


並在script中加入AJAX查詢,要注意async: false,沒有這個參數AJAX會非同步執行。
function getDestCodeSelect() {
    /*editoptions:{disabled:"disabled" ,dataUrl:"<c:url value='/query-destCodes' />" ,buildSelect:buildDestCodeSelect} ,*/
    $.ajax({
        url:"<c:url value='/query-destCodes' />",
        type:'GET',
        datatype: 'json',
        async: false,
        success: function(response){
            buildDestCodeSelect(response);
        }
    });
}

function buildDestCodeSelect(response) {
    var message = response;
    if(isResponseMessages(message)) {
        var s = "";
        var datas = message.queryResult.datas;
        var data;
        for(var i=0,len=datas.length;i<len;i++) {
            data = datas[i];
            s+=data.destinationPk.destCode+":"+data.destinationPk.destCode+"-"+data.country;
            if(data.area){
                if(data.area != "null" ){
                    s += "-"+data.area;
                }
            }
            if(i!=len-1){
                s+=";";
            }
        }
    } else {
        s+="'':查詢錯誤";
    }
    $("#list").jqGrid('setColProp', 'destCode', { editoptions: { value: s} });
}

沒有留言:

張貼留言