Я хочу, чтобы кто-то помог мне, у меня есть случай, который кажется очень важным, чтобы на одной странице отображалось несколько форматов jqGrid, в зависимости от выбора раскрывающегося списка, который находится вне jqGrid, как на изображении:
Сначала мне нужна рекомендация о том, как лучше всего реализовать раскрывающийся список, если используется jquery напрямую или встроенный html, и как выбрать элемент для работы. Я очень смущен этим, я не знаю, как отправить данные из выпадающего списка в контроллер.
С другой стороны, необходимо знать, возможно ли отобразить другой формат jqGrid в соответствии с элементом, выбранным в раскрывающемся списке, то есть:
Если выбран вариант «A», будут отображаться столбцы: «Идентификатор», «Имя», «Город», если выбран вариант «B», будут отображаться столбцы «Идентификатор», «Имя», «Фамилия», «Телефон». Если выбрано значение «C», необходимо отобразить ID, имя, фамилия, семейное положение, возраст. Это возможно..??? и если можно то как мне это сделать? может помочь мне с примером ..?
Заранее спасибо. Наилучшие пожелания.
РЕДАКТИРОВАТЬ:
Здесь я публикую код Javascript приложения mi, у него есть предложения Мэтта, но пока есть небольшая проблема, когда я выбираю вариант, он показывает мне нужные столбцы. но когда я выбираю другой вариант, я пытаюсь снова выбрать первый, столбцы не меняются....
<script type="text/javascript">
jQuery(document).ready(function () {
var lastsel;
$(function () {
$('#list').jqGrid({
url: '/EquipodeRed/GridData/',
editurl: '/EquipodeRed/EditData/',
datatype: 'json',
height: 250,
colNames: ['Id', 'Descripción', 'Dirección Mac', 'Marca', 'Modelo', 'Numero de Serie', 'Tipo de Equipo'],
colModel: [
{ name: 'Id', index: 'Id', width: 30 },
{ name: 'Descripcion', index: 'Descripcion', width: 100, sortable: true, editable: true, edittype: "text", editoptions: { size: "15", maxlength: "20"} },
{ name: 'DireccionMac', index: 'DireccionMac', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} },
{ name: 'Marca', index: 'Marca', width: 80, editable: true, edittype: "text", editoptions: { size: "5", maxlength: "10"} },
{ name: 'Modelo', index: 'Modelo', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "25"} },
{ name: 'NumerodeSerie', index: 'NumerodeSerie', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} },
{ name: 'TipoEquipo', index: 'TipoEquipo', width: 100, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipodeRed/ListaTiposEquipo/'} }
],
caption: 'Listado de Equipos de Red',
onCellSelect: function (rowid, iCol, cellcontent, e) {
if (rowid && rowid !== lastsel) {
$('#list').restoreRow(lastsel);
lastsel = rowid;
}
$('#list').editRow(rowid, true, iCol);
},
autowidth: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
});
$('#list').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true },
{ url: '/EquipodeRed/EditData/',
},
{ url: '/EquipodeRed/AddData',
},
{ url: '/EquipodeRed/DeleteData/',
},
{ closeAfterSearch: true,
reloadAfterSubmit: true
}
);
});
$("#displaydropdown").change(function () {
var display = $("#displaydropdown option:selected").val();
if (display == '1')
{
$('#list').hideCol('Marca', 'Modelo');
}
else if (display == '2') {
$('#list').hideCol('DireccionMac');
}
else if (display == '3') {
$('#list').hideCol('Descripcion, NumerodeSerie');
}
});
});
});
</script>
<h2>Equipos de Red</h2>
<table width="100%">
<tr>
<td>Tipo de Equipo :</td>
<td><% =Html.DropDownList("TipoId", (SelectList)ViewData["tiposdeEquipo"], "--Seleccione--", new { @id = "displaydropdown" })%> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Mostrar" /></td>
</tr>
</table>
<br />
<br />
<table id="list" class="scroll" cellpadding="0" cellspacing="0" width="100%"></table>
<div id="pager" class="scroll" style="text-align: center;"></div>
РЕДАКТИРОВАТЬ 2: Мэтт. Большое спасибо, особенно за терпение... Я понял, я использовал showcol и hidecol совершенно неправильно, поэтому мне пришлось изменить эту часть код:
$("#displaydropdown").change(function () {
var display = $("#displaydropdown option:selected").val();
if (display == '1')
{
$('#list').hideCol('Marca', 'Modelo');
}
else if (display == '2') {
$('#list').hideCol('DireccionMac');
}
else if (display == '3') {
$('#list').hideCol('Descripcion, NumerodeSerie');
}
});
для этого:
$("#displaydropdown").change(function () {
var display = $("#displaydropdown option:selected").val();
if (display == '1')
{
$('#list').hideCol('Marca');
$('#list').hideCol('Modelo');
$('#list').showCol('Id');
$('#list').showCol('Descripcion');
$('#list').showCol('DireccionMac');
$('#list').showCol('NumerodeSerie');
$('#list').showCol('TipoEquipo');
}
else if (display == '2') {
$('#list').hideCol('DireccionMac');
$('#list').showCol('NumerodeSerie' );
$('#list').showCol('Id');
$('#list').showCol('Descripcion');
$('#list').showCol('Marca');
$('#list').showCol('Modelo');
$('#list').showCol('TipoEquipo');
}
else if (display == '3') {
$('#list').hideCol('Descripcion')
$('#list').hideCol('NumerodeSerie');
$('#list').showCol('Id');
$('#list').showCol('Marca');
$('#list').showCol('Modelo');
$('#list').showCol('TipoEquipo');
$('#list').showCol('DireccionMac');
}
});
И теперь все работает отлично...!! еще раз спасибо.. ;)
