jqgrid三个依赖的下拉菜单

时间:2012-04-28 22:41:57

标签: php jquery select jqgrid drop-down-menu

您好我正在尝试在jqgrid中构建3级依赖的下拉列表。我遵循这个example并且工作得很好,但我需要3个级别的依赖下拉菜单而不是两个,我做了一些更改,所有下拉菜单都以正确的数据开始,并且从第一个下拉列表中更改事件效果很好。我的问题是中间下拉列表根本没有触发更改事件。它不是最好的解决方案,但它部分工作,如果我可以在中间的下拉列表中触发更改事件,它将会完成。提前谢谢

    var divisiones = {"1":"DIVISION_NOM_COLCH","3":"DIVISION_NOM_ESPU","4":"DIVISION_NOM_PLAS","5":"test"};
var categorias = {"6":"CATEGORIA_ORG","9":"sub test1","10":"sub test2","11":"sub test13","12":"CATEGORIA_ESPU_B","13":"CATEGORIA_ESPU_Z","14":"CATEGORIA_PLAST_B","15":"CATEGORIA_PLAST_ENVO","16":"CATEGORIA_IE","17":"CATEGORIA_Z","18":"CATEGORIA_C","19":"CATEGORIA_H"};
var familias = {"1":"FAMILIA_ORG","2":"FAMILIA_IEV","3":"FAMILIA_Z","4":"FAMILIA_COL","5":"FAMILIA_HOT","6":"FAMILIA_ESPU_R","7":"FAMILIA_ESPU_P","8":"FAMILIA_ESPU_C","9":"FAMILIA_ESPU_R","10":"FAMILIA_ESPU_P","11":"FAMILIA_ESPU_C","12":"aaa","13":"bbb","14":"ccc-1","17":"FAMILIA_PLAST_CO","18":"FAMILIA_PLAST_IND","19":"FAMILIA_PLAST_EM","20":"FAMILIA_PLAST_L","21":"DEFAULT","22":"DEFAULT","23":"DEFAULT"};
var categoriasDeDivisiones = {1:{'6':'CATEGORIA_ORG', '16':'CATEGORIA_IE', '17':'CATEGORIA_Z', '18':'CATEGORIA_C', '19':'CATEGORIA_H'},3:{'12':'CATEGORIA_ESPU_B', '13':'CATEGORIA_ESPU_Z'},4:{'14':'CATEGORIA_PLAST_B', '15':'CATEGORIA_PLAST_ENVO'},5:{'9':'sub test1', '10':'sub test2', '11':'sub test13'}};
var familiasDeCategorias = {6:{'1':'FAMILIA_ORG', '21':'DEFAULT'},9:{'12':'aaa'},10:{'13':'bbb'},11:{'14':'ccc-1'},12:{'6':'FAMILIA_ESPU_R', '7':'FAMILIA_ESPU_P', '8':'FAMILIA_ESPU_C'},13:{'9':'FAMILIA_ESPU_R', '10':'FAMILIA_ESPU_P', '11':'FAMILIA_ESPU_C'},14:{'17':'FAMILIA_PLAST_CO', '18':'FAMILIA_PLAST_IND'},15:{'19':'FAMILIA_PLAST_EM', '20':'FAMILIA_PLAST_L'},16:{'2':'FAMILIA_IEV', '22':'DEFAULT'},17:{'3':'FAMILIA_Z', '23':'DEFAULT'},18:{'4':'FAMILIA_COL'},19:{'5':'FAMILIA_HOT'}};

var lastSel = -1;
var grid = jQuery("#subfamilia");

var resetDependienteValuesC = function () {
    jQuery("#subfamilia").setColProp('categoria', { editoptions: { value: categorias} });
};
var resetDependienteValuesF = function () {
    jQuery("#subfamilia").setColProp('familia', { editoptions: { value: familias} });
};

jQuery("#subfamilia").jqGrid({
    height: 600,
    width:700,
    url:"http://myurl/listar.json",
    datatype: "json",
    mtype:'POST',
    colNames:['ID','División', 'Categoría','Familia','Nombre','Descripción','Url','Visible','Orden'],
    colModel:[
        {name:'id',index:'id', width:30, editable:true, editoptions:{readonly:true}, sorttype:'int'},
        {name:'division',index:'division', width:100, editable:true, edittype: 'select',
            editoptions: {
                value: divisiones,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    grid.setColProp('categoria', { editoptions: { value: categoriasDeDivisiones[v]} });
                    //MOD-MM pasar array inicial para familia
                    var id = jQuery("#subfamilia").jqGrid('getGridParam','selrow'); 
                    var ret = jQuery("#subfamilia").jqGrid('getRowData',id); 
                    var cat = ret.categoria;

                    $.each(categorias, function(key, value) {
                        if(value==cat){
                            //alert("key:"+key+" value:"+value);
                            grid.setColProp('familia', { editoptions: { value: familiasDeCategorias[key]} });
                        }
                    });

                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            //construir categorias de la division seleccionada
                            resetDependienteValuesC();
                            resetDependienteValuesF();
                            var v = parseInt($(e.target).val(), 10);
                            var sc = categoriasDeDivisiones[v];
                            var newOptions = '';
                            for (var categoriaId in sc) {
                                if (sc.hasOwnProperty(categoriaId)) {
                                    newOptions += '<option role="option" value="' + categoriaId +
                                        '">' + categorias[categoriaId] + '</option>';
                                }
                            }
                            if ($(e.target).is('.FormElement')) {
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#categoria.FormElement", form[0]).html(newOptions);

                            }
                             //MOD-MM
                                //construir familia de la primera categoria de la division seleccionada
                                //(al cambiar division, categoria tiene el primer valor asociado del array)
                                //obtener el primer key del array categorias
                                var i=0;
                                var fcat=0;
                                $.each(sc, function(key, value) {
                                    i=i+1;
                                    if(i==1){
                                        fcat = key;
                                    }
                                });
                                //buscar las familias que pertenecen a la primera categoria encontrada
                                var newOptions2 = '';
                                var fd=familiasDeCategorias[fcat];
                                for (var famId in fd) {
                                    if (fd.hasOwnProperty(famId)) {
                                        newOptions2 += '<option role="option" value="' + famId +
                                            '">' + familias[famId] + '</option>';
                                    }
                                }
                                $("select#familia.FormElement", form[0]).html(newOptions2);
                        }
                    }
                ]
            }
        },   
        {
            name: 'categoria',index:'categoria', width: 200, editable: true, edittype: 'select', 
            editoptions: { 
            readonly:true,
                value: categorias,
                dataEvents: [
                        { 
                        type: 'change',
                        fn: function(e) {
                alert("entra");
                            resetDependienteValuesF();
                            var w = parseInt($(e.target).val(), 10);

                            var scf = familiasDeCategorias[w];
                            var newOptions = '';
                            for (var familiaId in scf) {
                                if (scf.hasOwnProperty(familiaId)) {
                                    newOptions += '<option role="option" value="' + familiaId +
                                        '">' + familias[familiaId] + '</option>';
                                }
                            }
                            if ($(e.target).is('.FormElement')) {
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#familia.FormElement", form[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'familia',index:'familia', width: 200, editable: true, 
            edittype: 'select', editoptions: { value: familias }
        },
        {name:'nombre',index:'nombre', width:150, editable:true, editrules:{required:true}},
        {name:'descripcion',index:'descripcion', width:80, editable:true, edittype:"textarea"},
        {name:'url',index:'url', width:80, align:"right",editable:true},
        {name:'visible',index:'visible', width:35, align:"right",editable:true,edittype:"checkbox",editoptions: {value:"1:0"}}, 
        {name:'orden',index:'orden', width:35, align:"right",editable:true,editrules:{number:true}}

    ],
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            if (lastSel != -1) {
                resetDependienteValuesC();
                resetDependienteValuesF();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    rowNum:25,
    rowList:[10,20,30],
    pager: '#psubfamilia',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    editurl: "http://myurl/editar.json", 
    caption:"Páginas"
});
jQuery("#subfamilia").jqGrid('navGrid','#psubfamilia',{edit:true,add:true,del:true,view:true,search:false},
{
    afterSubmit:processAddEdit,
    recreateForm:true,
    onClose:function() {
        resetDependienteValuesC();
        resetDependienteValuesF();
    },
    closeAfterEdit: true,
    closeAfterAdd: true,
    closeAfterDel: true,
    reloadAfterSubmit:true
},{
    afterSubmit:processAddEdit,
    recreateForm:true,
    onClose:function() {
        resetDependienteValuesC();
        resetDependienteValuesF();
    },
    closeAfterAdd: true,
    closeAfterEdit: true,
    closeAfterDel: true,
    reloadAfterSubmit:true
},{
    afterSubmit:processAddEdit,
    recreateForm:true,
    onClose:function() {
        resetDependienteValuesC();
        resetDependienteValuesF();
    },
    closeAfterEdit: true,
    closeAfterAdd: true,
    closeAfterDel: true,
    reloadAfterSubmit:true 

},{},{}
  );
function processAddEdit(response,postdata){
    var success=true;
    var message="Error: ";
    var new_id=13;
    var json = eval('(' + response.responseText + ')');
    if(json.errors.length>0) {
        success = false;
        for(i=0; i < json.errors.length; i++) {
            message += json.errors[i] + '<br/>';
        }
    }
    return [success,message,new_id];
}

0 个答案:

没有答案