在同一页面中显示不同的jqgrid格式
我希望有人能够帮助我,我有一个案例,似乎非常特别需要在单个页面中显示多个jqGrid格式,具体取决于jqGrid之外的下拉列表的选择,例如形象:在同一页面中显示不同的jqgrid格式
首先,我需要一个关于如何最好地实现下拉列表,如果直接或内置HTML和使用jQuery如何让选择与之合作的项目推荐。我对此非常困惑,我不知道如何将数据从dropdownlist发送到控制器。
在另一方面需要知道,如果有可能表现出不同的jqGrid的格式,根据在下拉列表中选择的项目,即:
如果选项是“A”的要显示的列:身份证,姓名,城市,如果选择的选项是“B”列将显示ID,姓名,姓氏,电话,如果更改为“C”必须显示身份证,姓名,婚姻状况,年龄。这可能吗..???如果可能的话,我该怎么做?可以帮助我举一个例子..?
在此先感谢。 最好的问候。
编辑:
在这里,我MI后应用的Javascript代码,它是有马特的sugestions,但有一点问题的是,当我选择一个选项,它`告诉我我要的cols。但是当我选择另一个选项是尝试再次选择第一,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');
}
});
现在一切工作正常...!再次感谢..;)
不可否认,我只在很短的时间内进行web开发,所以可能有更好的方法来使用。但一种方法是,您可以使用jQuery来处理下拉列表的“更改”。
假设你已经有了一些下拉列表可能看起来像:
@Html.DropDownListFor(model => model.Display,
new SelectList(Model.Displays, "Name", "Name", new {@id= "displaydropdown"})
,然后你可以使用jQuery的变化处理所选择的项目在列表中的切换做一些事情:
$("#displaydropdown").change(function(){
// The on-change code goes in here.
});
然后你可以利用jqGrid的“hideCol”和“showCol”功能来隐藏/显示列数据。这些电话的样子:
$('#myTableId').hideCol('someColumn');
$('#myTableId').showCol('anotherColumn');
开始,你可以与所有你可能曾经显示列网格创建colModel
,然后使用这些hideCol
和showCol
功能来调整基于所选择的网格显示上的显示。
所以,也许是这样的:
$("#displaydropdown").change(function(){
var display = $("#displaydropdown option:selected").val();
if (display == 'A') // or whatever
{
$('#myTableId').hideCol('someColumn');
$('#myTableId').showCol('anotherColumn');
}
else if (display == 'B')
{
$('#myTableId').showCol('someColumn');
$('#myTableId').showCol('anotherColumn');
}
});
总之,这是最基本的想法。它可能会使用一些改进,它会将显示逻辑推入该jQuery函数 - 可能会比我的更好,更优雅的解决方案 - 但这个想法应该工作。希望能帮助到你。
谢谢.. !!但我试图使用这个,只有第一次,当我选择,即:选项A,它显示第1,3,4,当我选择选项B它显示列1,2,5,6时我再次选择选项A没有工作,仍然显示列1,2,5,6 ...因为它发生.. ??我做错了什么.. ?? – verofairy
你可以在你的问题更新中发布一些代码吗? – itsmatt
好的......我现在正在编辑mi post ...;)谢谢你的帮助.. – verofairy