jqGrid动态填充选择列表

时间:2019-12-17 04:27:47

标签: javascript jquery free-jqgrid

使用jqGrid 4.13.3-免费的jqGrid

在“添加”表单中,我有一个静态输入元素和一个选择列表元素。 我在beforeInitData中使用dataEvents将keyup ajax函数绑定到输入元素。 在“添加”表单显示之后,我在静态元素中输入一个值。 Ajax回调函数返回格式化为选择列表的字符串。

我正在尝试使用此代码填充选择列表,但从未填充。

function faiLogDocumentItemListResults(wResults){

        if(wResults.validItemList){

            $("#ifailocloglist").setColProp('item', { editoptions: { value: wResults.itemSelectList}});
            $('#tr_item',addFormId).show();
            $('#tr_comment',addFormId).show();
        }

    }

更新以添加完整代码:

$(document).ready(function(){

    var cName = "";
    var selID = "";
    var temp = "";
    var sourcevalue = "";
    var addFormId = "";
    var requestedchangelink = "";
    $("#ifailocloglist").jqGrid({
    url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataload',
    editurl:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
    datatype: "json",
    height: "auto",
    colNames:['Badge#','Index#','PriorityIndex','Priority','Delete Request','Location','Document#','Due Date','Part#','Planner#','Airline','Log Data','Inspector','FAI Started','FAI Finished','Comments','Status','IFlag'],
    colModel:[
        {name:'badgeno', index:'badgeno', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Badge#:"}},
        {name:'id', index:'id', width:100, hidden: false, editable: true, editoptions:{ disabled:'disabled'}, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"Index#:"}},
        {name:'priority', index:'priority', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Priority:"}, edittype: "select", editoptions: { size: 1}},
        {name:'priorityicon', index:'priorityicon', width:50},
        {name:'requesttodelete', index:'requesttodelete', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:4, colpos:1,label:"Delete Request:"}, edittype: "select", editoptions: { size: 1}},
        {name:'location', index:'location', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:5, colpos:1,label:"Location:"}, edittype: "select", editoptions: { size: 1}},
        {name:'documentNumber', index:'documentNumber', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:6, colpos:1,label:"Document#:", elmsuffix: " type in Document# and press 'Enter' key"}},
        {name:'duedate', index:'duedate', width:50, hidden: false},
        {name:'item', index:'item', width:100, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:8, colpos:1,label:"Item:"}, edittype: "select", editoptions: { size: 1}},
        {name:'planner', index:'planner', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'airline', index:'airline', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'logdata', index:'logdata', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'inspector', index:'inspector', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'startdate', index:'startdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'finishdate', index:'finishdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
        {name:'comment', index:'comment', width: 250, hidden: false, editable: true, editrules:{edithidden:true}, edittype:'textarea',editoptions:{rows:'3',cols:'50'}, formoptions:{rowpos:15, colpos:1,label:"Comments:"}},
        {name:'faistatus', index:'faistatus', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
        {name:'initializedflag', index:'initializedflag', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
        ],
        onSelectRow: oSelect,
        rowNum:5,
        rowList:[5,10,15,20,25,30],
        loadonce: true,
        pager: '#ifailocloglistpager',
        viewrecords: true,
        gridview: true,
        userdata: "userdata",
        rowattr: colorrow,
        loadComplete: lComplete,
        reloadAfterSubmit: true,
        caption:"First Article Location Log"

    });
    $("#ifailocloglist").jqGrid('navGrid','#ifailocloglistpager',
        {edit:true,add:true,del:true,search:true,view:false,
        beforeRefresh: function(){
            $(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
            }},
        {url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
         recreateForm: true,
         width: 700,
         beforeShowForm: bsForm,
         viewPagerButtons: false,
         checkOnSubmit: true,
         zIndex: 500200},
        {recreateForm: true,
         width: 700,
         beforeShowForm: absForm,
         beforeInitData: biAddForm,
         afterShowForm: asForm,
         afterComplete: afComp,
         beforeSubmit: bsubForm,
         afterSubmit: afSubmit,
         zIndex: 500200},
        {zIndex: 500200},
        {zIndex: 500200},
        {recreateForm: true,
         width: 700,
         viewPagerButtons: false             
         }
    );

    $("#ifailocloglist").setGridWidth(gridouterwidth);

    function lComplete(data){

        $('.faiLocationLog-error-msg').load("/QMSWebApp/GenericControllerServlet",
        {lifecycle:"errorMessageDisplay"});

        $('.faiLocationLog-error-msg span').text($("#ifailocloglist").getGridParam('userData').elapsedtime);

        hideProgressDisplay();           
    };
    function colorrow(rd){

        switch(rd.faistatus){
            case 1:
                return {"class": "greenBGrow1"};
            break;

            case 2:
                return {"class": "redBGrow1"};
            break;

            default:
                if(rd.initializedflag){
                    return {"class": "yellowBGrow1"};
                }
            break;
        }

    };
    function oSelect(id){
        $("#ifailocloglist").setColProp('priority', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogpriorityoptionslist'}});
        $("#ifailocloglist").setColProp('requesttodelete', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=twowayoptionlist'}});
        $("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}});

    };
    function bsForm(formId){

        $('#tr_documentNumber',formId).hide();
        $('#tr_badgeno',formId).hide();
        $('#tr_duedate',formId).hide();

    };
    function absForm(formId){
        $('#tr_priority',formId).hide();
        $('#tr_id',formId).hide();
        $('#tr_requesttodelete',formId).hide();
        $('#tr_duedate',formId).hide();
        $('#tr_item',formId).hide();
        $('#tr_comment',formId).hide();

        //$('#tr_badgeno',formId).addClass("badgeenter");
        //$('#tr_documentNumber',formId).addClass("docenter");

        $('#badgeno',formId).val($('#savebadgenov').val());

        //$('.badgeenter').on("keyup", function(){
            //if(event.keyCode=='13'){
                //$('#documentNumber',formId).focus();
            //}
        //});
        //$('.docenter').on("keyup", function(){
            //if(event.keyCode=='13'){
                //$("#sData").click();
            //}
        //});

    };
    function biAddForm(formId){
        addFormId = formId;
        $("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}, defaultValue: 0});
        $("#ifailocloglist").setColProp('documentNumber', { editoptions: {dataEvents: [{ type: 'keyup', fn: function(e) {if(event.keyCode=='13'){getDocumentItemList(this.value);  }}}]}});
    };
    function getDocumentItemList(wValue){

        $.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
        {lifecycle:"faiLogDocumentItemList",
        documentNumber:wValue}, faiLogDocumentItemListResults, 'json');

    }
    function faiLogDocumentItemListResults(wResults){

        var cm = $('#ifailocloglist').jqGrid('getColProp','item');

        if(wResults.validItemList){

            cm.edittype = "select";
            cm.editoptions = { size: 1};
            setTimeout(function(){
                $('#tr_item select').html(wResults.itemSelectList);
                $('#tr_item',addFormId).show();
                $('#tr_comment',addFormId).show();
            },500); 
        }
        else{

            cm.edittype = "text";
            cm.editoptions = { size: 20};
            setTimeout(function(){
                $('#tr_item',addFormId).show();
                $('#tr_comment',addFormId).show();
            },500);
        }
    }
    function asForm(formId){

        //if($('#badgeno').val() != ""){
            //$('#documentNumber',formId).focus();
        //}
        //else{

            //$('#badgeno',formId).focus();
        //}     
    };

    function bsubForm(postdata, formid){
        $('#savebadgenov').val($('#badgeno').val());
        $('#savelocv').val($('#location').val());
        if($('#badgeno').val() == ""){
            return [false,"ATTENTION - Record was not saved. Badge# field is blank."];
        }
        else if($('#location').val() == ""){
            return [false,"ATTENTION - Record was not saved. Location field is blank."];
        }
        else if($('#documentNumber').val() == 0){
            return [false,"ATTENTION - Record was not saved. MO/PO field is blank."];
        }
        else{
            return [true,"Ok"];
        }

    };
    function afComp(response,postdata,formID){
        $('#badgeno',formID).val($('#savebadgenov').val());
        $('#location',formID).val($('#savelocv').val());
        $('#documentNumber',formID).focus();
    }
    function afSubmit(response, postdata) {
        var res = $.parseJSON(response.responseText);
        if(res){
            if(res.errorCode == "BadgeFailure"){
                return [false,"Your badge number could not be validated."];
            }
            else if(res.errorCode == "DocFailure"){
                return [false,"Document# could not be validated."];
            }
            else{
                $(this).jqGrid("setGridParam", {datatype: 'json'});
                return [true,"Ok"];
            }
        }
        else{
            $(this).jqGrid("setGridParam", {datatype: 'json'});
            return [true,"Ok"];
        }
        //return [true];
    }

    $('.ifaiappenddialog').click(function(){

    });

    $('.failocationlogPrint').on("click", function(){
        $.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
        {lifecycle:"printfialocationlogqueue"}, exportDisplayResults, 'json');
    });

1 个答案:

答案 0 :(得分:0)

这将不起作用。下次打开添加表单时,edittype的更改。不仅需要更改编辑类型,还需要物理上将输入字段从文本更改为select,反之亦然。下面的代码对我有效。希望您能明白

function faiLogDocumentItemListResults(wResults){

    var cm = $('#ifailocloglist').jqGrid('getColProp','item');
    if(wResults.validItemList){
        //create a clone from another select
        var test = $("#location").clone();
        test.attr({id:"dummy",size:1}).html("");
        // initialize the new remove the old and place the new
        $("#item").after(test).remove();            
        test.attr("id","item");
        cm.edittype = "select";
        cm.editoptions = { size: 1};
        setTimeout(function(){
            $('#tr_item select').html(wResults.itemSelectList);
            $('#tr_item',addFormId).show();
            $('#tr_comment',addFormId).show();
        },500); 
    }
    else{
        // see the comments above
        var test = $("#documentNumber").clone();
        test.attr({id:"dummy",size:20}).val("");
        $("#item").after(test).remove();            
        test.attr("id","item");
        // now change it in colModel
        cm.edittype = "text";
        cm.editoptions = { size: 20};
        setTimeout(function(){
            $('#tr_item',addFormId).show();
            $('#tr_comment',addFormId).show();
        },500);
    }
}

希望这对您有所帮助。