显示不同的jqGrid格式在同一个页面 [英] Show different Jqgrid formats in the same page
问题描述
我希望有人来帮我，我有一个似乎在单一页面显示多个jqGrid的格式非常特别的需要，这取决于一个DropDownList这超出jqGrid的，就像在图像中的选择的情况下：
I want someone to help me, I have a case that seems very particular need in a single page display multiple jqGrid formats, depending on the selection of a dropdownlist which is out of jqGrid, like in the image:
首先，我需要一个关于如何最好地实现DropDownList的，如果直接或内置的HTML和使用jQuery如何让选择一起工作的项目建议。我很困惑这个问题，我不知道如何从DropDownList的数据发送到控制器。
First I need a recommendation about how best to implement the dropdownlist, if using jquery directly or built in html and how to get the item selected to work with. I am very confused with this, I do not know how to send data from dropdownlist to the controller.
在另一方面需要知道是否能够显示不同的jqGrid的格式，根据在DropDownList选择的项目，即：
On the other hand need to know if is possible to show a different jqGrid format, according to the item selected in the dropdownlist, ie:
如果选择要显示A的列：要显示的ID，姓名，城市，如果选择的选项是B列ID，名称，姓名，电话，如果变化是C 必须出示身份证，姓名，婚姻状况，年龄。这可能吗..？？？如果可能的话，我该怎么办呢？可以帮我用一个例子..？
If the option is "A" the columns to be displayed are: Id, Name, City, if the selected option is "B" columns to be displayed are Id, Name, Last Name, Phone, If change is "C "must show ID, Name, Surname, Marital Status, Age. Is this possible..??? and if possible, how can I do this? can help me with an example ..?
在此先感谢。
最好的问候。
Thanks in advance. Best Regards.
编辑：
下面我发布英里应用的Javascript code，它是有马特的sugestions，但有一点问题没有，当我选择一个选项，它`告诉我我想要的COLS。但是当我选择另一个选项是尝试再次选择第一，COLS不会改变......
Here I post the Javascript code of mi application, it's have the Matt's sugestions, but have a little problem yet, when I select an option it`s show me the cols I want. but when I choose another option y try to choose again the first, the cols doesn't change....
<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完全错误的，，所以我不得不改变code的这一部分：
EDIT 2: Matt Thank you very much, especially for being patient ... I realized I was using the showcol and hidecol completely wrong, so I had to change this part of code:
$("#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');
}
});
而现在一切工作正常...！再次感谢..;）
And now all works fine...!! thanks again.. ;)
推荐答案
诚然，我只是一直在做Web开发的时间很短，所以有可能是一个更好的方法来使用。但是，一种方法是，你可以使用jQuery来处理就变DropDownList的。
Admittedly, I've only been doing web development for a very short time, so there might be a much better approach to use. But one approach is that you could use jQuery to handle the "on change" to the dropdownlist.
假设你已经有了一些DropDownList的，可能是这样的：
Say you've got some dropdownlist that might look like:
@Html.DropDownListFor(model => model.Display,
new SelectList(Model.Displays, "Name", "Name", new {@id= "displaydropdown"})
然后你可以使用jQuery的变化处理所选择的项目列表中的切换做一些事情：
and then you could use the jQuery change handler to do something upon the switching of the selected item in the list:
$("#displaydropdown").change(function(){
// The on-change code goes in here.
});
和那么你可以利用的jqGridhideCol和showCol功能隐藏/显示列数据。这些电话如下：
And then you could utilize the jqGrid "hideCol" and "showCol" functions to hide/show column data. Those calls look like:
$('#myTableId').hideCol('someColumn');
$('#myTableId').showCol('anotherColumn');
最初，你可以创建你的 colModel 与所有你可能曾经展示，然后使用列网格的 hideCol 和 showCol 函数来调整根据所选择的网格显示上的显示。
Initially you could create your colModel for the grid with all the columns you might ever show and then use those hideCol and showCol functions to adjust the display based on the selected grid display.
所以，也许是这样的：
$("#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的功能 - 有可能是比我在那里一个更好，更优雅的解决方案 - 但这个想法应该工作。希望它帮助。
Anyhow, that's the basic idea. It probably could use some improvement and it does push the display logic into that jQuery function - there might be a much better and more elegant solution than mine out there - but the idea should work. Hope it helps.
这篇关于显示不同的jqGrid格式在同一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
