Hi i am trying to build a 3 levels dependent dropdowns in jqgrid. i follow this example and works great but i need 3 levels of dependent dropdowns and not two, i made some changes and all dropdowns begins with correct data, and change event from first dropdown works good. My problem is the middle dropdown is not triggering the change event at all. It is not the best solution but it is partially working, it will be done if i can fire the change event in the dropdown in the middle. thanks in advance
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];
}