您好我正在尝试在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];
}