Я хочу, чтобы кто-то помог мне, у меня есть случай, который, как мне кажется, очень нужен, чтобы на одной странице отображалось несколько форматов jqGrid, в зависимости от выбора выпадающего списка, который находится вне jqGrid, как на изображении:
Сначала мне нужна рекомендация о том, как наилучшим образом реализовать выпадающий список, если использовать jquery напрямую или встроенный html, и как выбрать элемент, с которым можно работать. Я очень смущен этим, я не знаю, как отправить данные из выпадающего списка на контроллер.
С другой стороны, необходимо знать, возможно ли показать другой формат jqGrid, в соответствии с элементом, выбранным в раскрывающемся списке, то есть:
Если параметр «A», столбцы для отображения: Id, Имя, Город, если выбран параметр «B», столбцы для отображения - Id, Имя, Фамилия, Телефон, Если изменение - «C "должен показать удостоверение личности, имя, фамилию, семейное положение, возраст. Это возможно..??? и если возможно, как я могу это сделать? можете мне помочь с примером ..?
Спасибо заранее.
С наилучшими пожеланиями.
EDIT:
Здесь я публикую Javascript-код приложения mi, у него есть предложения Мэтта, но есть небольшая проблема, когда я выбираю опцию, она показывает мне cols, которые я хочу. но когда я выбираю другой вариант у, попробуйте снова выбрать первый, цвета не меняются ....
<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');
}
});
А теперь все работает нормально ... !! еще раз спасибо ..;)