データベースからのデータを表示する Web ページに jqgrid を配置しました。列の 1 つは「ステータス」です。データベース クエリはセル値をステータス ID として設定しますが、グリッドには実際のステータスの説明が表示されます。これは正しいです。
ここで、jquery を使用して実際のセル テキストを取得する必要があります。
私は試しました:
var selRowId = $("#contratos").jqGrid('getGridParam', 'selrow');
var estActualDesc = $("#contratos").jqGrid ('getCell', selRowId, 'estId');
しかし、セルのテキストではなく、常にステータス ID を取得します。
これを解決する方法はありますか?
ありがとうハイメ
編集:
$("#contratos").jqGrid({
url: "{{ path('_lista_contratos') }}",
datatype: "json",
mtype: "GET",
colNames: ["N° de WF",
"Fecha Ingreso",
"Fecha Despacho",
"Fecha Cierre",
"Fecha Término",
"Fecha Aviso",
"Nombre Fantasía",
"RUT Contraparte",
"Nombre Contraparte",
"Nombre Dado por Contraparte",
"Gerencia Corporativa",
"Agencia o Unidad Operativa",
"Abogado",
"Estado",
"Materia",
"Tipo",
"Complejidad",
"N° Memo",
"Monto UF (anual 3 decimales)",
"Duración",
"Cláusula de Salida",
"Link",
"Borrador",
"Observaciones",
"Fecha de Estado"],
colModel: [
{name: "cntWorkflow", width: 90, editable: true, editoptions: {maxlength: 11, size: 17}, editrules: {required: true, custom: true, custom_func: check_wf}, formoptions: {elmsuffix: '<span class="required">*</span>'}},
{name: "cntFechaIngreso", width: 100, editable: true, editrules: {date: true, required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaDespacho", width: 110, editable: true, editrules: {date: true, required: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaCierre", width: 100, editable: true, editrules: {date: true, required: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaTermino", width: 100, editable: true, hidden: true, editrules: {date: true, required: false, edithidden: true}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntFechaAviso", width: 100, editable: true, hidden: true, editrules: {date: true, required: false, edithidden: true}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y'}, editoptions: {size: 17, dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}, searchoptions: {dataInit: function(el) {
$(el).datepicker({dateFormat: 'dd-mm-yy'});
$(el).mask("?99-99-9999");
}}},
{name: "cntNombreFantasia", width: 150, editable: true, editoptions: {maxlength: 80, size: 50}},
{name: "cntRutContraparte", width: 110, editable: true, editoptions: {maxlength: 20, size: 17, dataInit: function(el) {
$.mask.definitions['~'] = '[0-9kK]';
$(el).mask("?99.999.999-~");
}}, editrules: {required: true, custom: true, custom_func: is_rut}, formoptions: {elmsuffix: '<span class="required">*</span>'}, searchoptions: {dataInit: function(el) {
$.mask.definitions['~'] = '[0-9kK]';
$(el).mask("?99.999.999-~");
}}},
{name: "cntNombreContraparte", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "cntNombreDadoContraparte", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "gerencia", width: 200, editable: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ gerencias }}',
dataEvents: [
{type: 'change',
fn: function(e) {
populate_agencias(this.value, 0);
}
}
]}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ gerencias }}'}},
{name: "agcId", width: 200, editable: true, edittype: "select", formatter: 'select', editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, editoptions: {style: 'width: 310px', value: '{{ agencias }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ agencias }}'}},
{name: "abgRut", width: 150, editable: true, edittype: "select", formatter: 'select', editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, editoptions: {style: 'width: 310px', value: '{{ abogados }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ abogados }}'}},
{name: "estId", width: 200, editable: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ estados }}'}, editrules: {required: true}, formoptions: {elmsuffix: '<span class="required">*</span>'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ estados }}'}},
{name: "dmnMateriaId", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ materias }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ materias }}'}, editrules: {required: false, edithidden: true}},
{name: "tipo", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ tipos }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ tipos }}'}, editrules: {required: false, edithidden: true}},
{name: "dmnComplejidadId", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ complejidades }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ complejidades }}'}, editrules: {required: false, edithidden: true}},
{name: "cntMemo", width: 90, editable: true, hidden: true, editoptions: {maxlength: 11, size: 17, dataInit: function(el) {
$(el).spinner({min: 0});
}}, editrules: {required: false, edithidden: true}},
{name: "cntMonto", width: 90, editable: true, hidden: true, editoptions: {maxlength: 11, size: 17, dataInit: function(el) {
$(el).spinner({min: 0});
}}, editrules: {required: false, edithidden: true}},
{name: "cntDuracion", width: 200, editable: true, hidden: true, edittype: "select", formatter: 'select', editoptions: {style: 'width: 310px', value: '{{ duraciones }}'}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ duraciones }}'}, editrules: {required: false, edithidden: true}},
{name: "cntEsSalida", editable: true, hidden: true, edittype: "checkbo x", formatter: 'checkbox', editrules: {required: false, edithidden: true}},
{name: "cntLink", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: "cntEsBorrador", editable: true, hidden: true, edittype: "checkbox", formatter: 'checkbox', editrules: {required: false, edithidden: true}},
{name: "cntObservacion", width: 150, hidden: true, editable: true, editoptions: {maxlength: 80, size: 50}, editrules: {required: false, edithidden: true}},
{name: 'cntFechaEstado', hidden: true, editable: true, edittype: 'custom', editoptions: {custom_element: statusDateElement, custom_value: statusDateValue}, editrules: {edithidden: false}, formatoptions: {srcformat: 'SortableDateTime', newformat: 'd-m-Y H:i:s'}}
],
jsonReader: {
repeatitems: true,
id: "cntWorkflow"
},
pager: "#paginacion",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "cntWorkflow",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
multiselect: false,
shrinkToFit: false,
caption: "Listado de Contratos",
rownumbers: true,
rownumWidth: 40,
autowidth: true,
height: 'auto',
editurl: "{{ path('_almacena_contrato') }}",
});
$("#contratos").jqGrid('navGrid', '#paginacion',
{edit: true, add: true, del: false, search: false},
{closeAfterEdit: true, width: 550, beforeShowForm: function(formid) {
var selRowId = $("#contratos").jqGrid('getGridParam', 'selrow');
populate_agencias($("#contratos").jqGrid('getCell', selRowId, 'gerencia'), $("#contratos").jqGrid('getCell', selRowId, 'agcId'));
var estActualId = $("#contratos").jqGrid('getCell', selRowId, 'estId');
$.ajax({
type: 'GET',
url: '{{ path('_obtiene_estados_permitidos') }}',
data: 'estado=' + estActualId,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(estados) {
$('#estId').empty();
var optgroup = $('#estId').append(new Option('-- Estado Actual --', estActualId));
if (estados.length > 0)
{
$('<optGroup/>').attr('label', 'Estados Siguientes').appendTo('#estId');
$.each(estados, function() {
optgroup.append(new Option(this.descripcion, this.id));
});
}
}
});
}, afterShowForm: function(form) {
$('#cntWorkflow').attr('readonly', true);
$('#agcId').empty();
$('#agcId').append(new Option('Seleccione primero la Gerencia', ''));
form.css("height", "400px");
form.closest('div.ui-jqdialog').center();
form.append('<input type="hidden" id="oldEstId" value="' + $('#estId').val() + '" />');
},
onclickSubmit: function(params, posdata) {
return {oldEstId: $('#oldEstId').val()};
},
editData: {
'_csrf_token': '{{ csrf_token }}'
}
},
{closeAfterAdd: true, recreateForm: true, width: 550, beforeShowForm: function(formid) {
$.ajax({
type: 'GET',
url: '{{ path('_obtiene_estados_permitidos') }}',
data: 'estado=0',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(estados) {
$('#estId').empty();
$('#estId').append(new Option('', ''));
$.each(estados, function() {
$('#estId').append(new Option(this.descripcion, this.id));
});
}
})
}, afterShowForm: function(form) {
$('#agcId').empty();
$('#agcId').append(new Option('Seleccione primero la Gerencia', ''));
form.css("height", "400px");
form.closest('div.ui-jqdialog').center();
},
editData: {
'_csrf_token': '{{ csrf_token }}'
}
},
{},
{multipleSearch: false, multipleGroup: false})
.navSeparatorAdd("#paginacion", {sepclass: "ui-separator", sepcontent: ''})
.navButtonAdd("#paginacion",
{caption: "",
buttonicon: "ui-icon-note",
onClickButton: function() {
if ($('#contratos').jqGrid('getGridParam', 'selrow') == null)
$.jgrid.info_dialog($.jgrid.errors.errcap, 'Seleccione un contrato', $.jgrid.edit.bClose);
else
location.href = '{{ path('_bitacora') }}/' + $('#contratos').jqGrid('getGridParam', 'selrow');
},
position: "last", title: "Ver bitácora del contrato seleccionado", cursor: "pointer"
});
$("#contratos").jqGrid('filterToolbar', {searchOperators: false});
$.jgrid.edit.addCaption = "Agregar Contrato";
$.jgrid.edit.editCaption = "Modificar Contrato";
$.jgrid.edit.saveData = "¡El contrato fue modificado! ¿Almacena los cambios?";
$.jgrid.formatter.date.newformat = 'd-m-Y H:i';