こんにちは私はjqgridサブグリッドのtrirandの例を使用しています（Trirandの例の階層2レベル）。私の場合、サブグリッドの動作は自動生成されたjavascript関数内にあります。例をソリューション（mvc3 + razor + entity Framework Cf）に「変換」すると、自動生成されたサブグリッド関数で「オブジェクトはプロパティまたはメソッドをサポートしていません」というエラーが発生します。これは単純な間違いだと思いますが、私はそれを保存することはできません...そしてあなたが私を助けてくれることを願っています。
これは私の静的ビューです：
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
function showRolesSubGrid(subgrid_id, row_id) {
// the "showSubGrid_OrdersGrid" function is autogenerated and available globally on the page by the second child grid.
// Calling it will place the child grid below the parent expanded row and will call the action specified by the DaraUrl property
// of the child grid, with ID equal to the ID of the parent expanded row
showSubGrid_RolesSubGrid(subgrid_id, row_id);
}
</script>
<div class="bloque">
<div class="ui-widget">
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
@Html.AntiForgeryToken()
<div>
@Html.Trirand().JQGrid(Model.MenuGrid, "MenuGrid")
@Html.Trirand().JQGrid(Model.RolesSubGrid, "RolesSubGrid")
</div>
@Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataUrl = Url.Action("AutoCompleteName", "MenuItem")
}, "AutoCompleteName")
@Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataUrl = Url.Action("AutoCompletePadre", "MenuItem")
}, "AutoCompletePadre")
</div>
</div>
これは私のModelGridです：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Trirand.Web.Mvc;
using System.Web.UI.WebControls;
namespace MVC.Models.Grids
{
public class MenuGridModel
{
public JQGrid MenuGrid { get; set; }
public JQGrid RolesSubGrid { get; set; }
public MenuGridModel()
{
RolesSubGrid = new JQGrid
{
Columns = new List<JQGridColumn>
{
new JQGridColumn { DataField = "RoleID",
HeaderText = "ID",
PrimaryKey = true,
Width = 50 },
new JQGridColumn { DataField = "RoleName" }
},
Width = Unit.Pixel(650),
Height = Unit.Pixel(350)
};
MenuGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn { DataField = "ID",
// always set PrimaryKey for Add,Edit,Delete operations
// if not set, the first column will be assumed as primary key
PrimaryKey = true,
Editable = false,
Width = 20 },
new JQGridColumn { DataField = "Name",
Editable = true,
Width = 100 },
new JQGridColumn { DataField = "ActionName",
Editable = true,
Width = 100},
new JQGridColumn { DataField = "ControllerName",
Editable = true,
Width = 100 },
new JQGridColumn { DataField = "Url",
Editable = true
},
new JQGridColumn { DataField = "Padre",
Editable = true
}
},
Width = Unit.Percentage(100),
Height = Unit.Percentage(100)
};
MenuGrid.ToolBarSettings.ShowRefreshButton = true;
}
}
}
これは私のコントローラーの一部です：
...
...
public JsonResult Datos()
{
// instanciar el modelo
var gridModel = new MenuGridModel();
JsonResult verresul;
ConfigGrid(gridModel);
JQGridState gridState = gridModel.MenuGrid.GetState();
Session["gridState"] = gridState;
// devolver un databind según EF
var prueba = GetMenuItem().AsQueryable();
verresul = gridModel.MenuGrid.DataBind(prueba);
return gridModel.MenuGrid.DataBind(GetMenuItem().AsQueryable());
}
// Este método se llama cuando la SUBgrilla requiere datos
public JsonResult DatosRoles(string parentRowID)
{
int menu_padre_id = Convert.ToInt32(parentRowID);
// instanciar el modelo
var gridModel = new MenuGridModel();
ConfigGrid(gridModel);
// devolver un databind según EF
//var Roles = from o in db.aspnetdb_Roles_vw
// where o.RoleId == menu_padre
// select o;
List<List<aspnetdb_Roles_vw>> roles;
//MenuItem pmenu;
roles = (from pmenu in db.MenuItems
where pmenu.Id == menu_padre_id
select pmenu)
.Select(rr => rr.aspnetdb_Roles_vw.ToList()).ToList();
return gridModel.RolesSubGrid.DataBind(roles);
}
...
...
public void ConfigGrid(MenuGridModel modeloGrid)
{
var entidadGrid = modeloGrid.MenuGrid;
var sub1Grid = modeloGrid.RolesSubGrid;
// Personalizar o cambiar algunos comportamientos del modelo
// ID de la grilla, por si hay varias
entidadGrid.ID = "MenuGrid";
// DataUrl mapea el método que devuelve los datos
entidadGrid.DataUrl = Url.Action("Datos");
// EditUrl mapea el método que hace ABM
entidadGrid.EditUrl = Url.Action("ABM");
entidadGrid.ToolBarSettings.ShowEditButton = true;
entidadGrid.ToolBarSettings.ShowAddButton = true;
entidadGrid.ToolBarSettings.ShowDeleteButton = true;
entidadGrid.EditDialogSettings.CloseAfterEditing = true;
entidadGrid.AddDialogSettings.CloseAfterAdding = true;
entidadGrid.MultiSelect = true;
entidadGrid.MultiSelectMode = MultiSelectMode.SelectOnCheckBoxClickOnly;
// SUBgrilla
#region SubGrilla
entidadGrid.ClientSideEvents.SubGridRowExpanded = "showRolesSubGrid";
entidadGrid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
entidadGrid.HierarchySettings.ReloadOnExpand = Convert.ToBoolean(ViewData["reloadOnExpand"]);
entidadGrid.HierarchySettings.SelectOnExpand = Convert.ToBoolean(ViewData["selectOnExpand"]);
entidadGrid.HierarchySettings.ExpandOnLoad = Convert.ToBoolean(ViewData["expandOnLoad"]);
entidadGrid.HierarchySettings.PlusIcon = Convert.ToString(ViewData["plusIcon"]);
entidadGrid.HierarchySettings.MinusIcon = Convert.ToString(ViewData["minusIcon"]);
entidadGrid.HierarchySettings.OpenIcon = Convert.ToString(ViewData["openIcon"]);
sub1Grid.ID = "RolesGrid";
sub1Grid.DataUrl = Url.Action("DatosRoles");
sub1Grid.HierarchySettings.HierarchyMode = HierarchyMode.Child;
#endregion
...
...
これは、自動生成されたサブグリッド関数を使用して動的に生成されたビューです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="../../Content/notificaciones.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jquery-ui/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Content/jquery-ui/js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui/css/redmond/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/openid-shadow.css" rel="stylesheet" type="text/css" />
<link href="/Content/openid.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/openid-jquery.js" type="text/javascript"></script>
<script src="/Scripts/openid-en.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () {openid.init('openid_identifier'); }); </script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.cookie.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.7.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.7.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/black.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/dcaccordion.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/blue.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/clean.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/demo.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/graphite.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/grey.css" />
<link href="../../Content/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jqGrid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="../../Content/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqAutoComplete.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Content/Flexigrid/js/flexigrid.js"></script>
<link href="../../Content/Flexigrid/css/flexigrid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/wiltel.js" type="text/javascript"></script>
<script type="text/javascript">
var menuLoaded = false;
$(document).ready(function () {
$.ajax({
url: "/Home/MenuLayout",
type: "GET",
success: function (response, status, xhr)
{
var nvContainer = $('#navcontainer');
nvContainer.html(response);
menuLoaded = true;
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
var nvContainer = $('#navcontainer');
nvContainer.html(errorThrown);
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div id="header" class="row-fluid">
<div class="content-wrapper">
<p class="site-title"><img src="../../Content/images/LOGO1.png" align ="middle" />
WILTEL COMUNICACIONES S.A </p>
</div>
<div class="login" >
<p>
Hola, <a class="username" href="/Account/ChangePassword" title="Change password">WILTEL01\eallasino</a>!
<a href="/Account/LogOff">Log off</a>
</p>
</div>
</div>
</div>
<div id="body">
<div class= "menu1">
<div >
<div id="navcontainer">
</div>
</div>
</div>
<script type="text/javascript">
function showRolesSubGrid(subgrid_id, row_id) {
// the "showSubGrid_OrdersGrid" function is autogenerated and available globally on the page by the second child grid.
// Calling it will place the child grid below the parent expanded row and will call the action specified by the DaraUrl property
// of the child grid, with ID equal to the ID of the parent expanded row
showSubGrid_RolesSubGrid(subgrid_id, row_id);
}
</script>
<div class="bloque">
<div class="ui-widget">
<h2>Index</h2>
<p>
<a href="/MenuItem/Create">Create New</a>
</p>
<input name="__RequestVerificationToken" type="hidden" value="1kCOOa9WHClxCC_hs3GU_kmTYaRTvE2iB1Wk5SLCNp18j3CJv15Kvu9sUrA92qUP-nC9DnXoqx7LoIvMPJMfUoXMFjWjcz0tdZV2VN78MhY4Hcwhv1mv5LXZ58zroMVIX7oXaBsvJFI77wRBC_zs8zP1XpY1" />
<div>
<table id='MenuGrid'></table><div id='MenuGrid_pager'></div><script type='text/javascript'>
jQuery(document).ready(function() {jQuery('#MenuGrid').jqGrid({url: '/MenuItem/Datos?jqGridID=MenuGrid',editurl: '/MenuItem/ABM?jqGridID=MenuGrid&editMode=1',mtype: 'GET',datatype: 'json',page: 1,colNames: ["ID","Name","ActionName","ControllerName","Url","Padre"],colModel: [{"key":true,"searchoptions":{},"index":"ID","width":20,"name":"ID"},{"editable":true,"searchoptions":{dataInit:function(el) {setTimeout(function() {var ec = 'AutoCompleteName';if (typeof(jQuery(el).autocomplete) !== 'function')alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js');jQuery(el).autocomplete( eval(ec + '_acid') );},200);}},"index":"Name","width":100,"name":"Name"},{"editable":true,"searchoptions":{},"index":"ActionName","width":100,"name":"ActionName"},{"editable":true,"searchoptions":{},"index":"ControllerName","width":100,"name":"ControllerName"},{"editable":true,"index":"Url","searchoptions":{},"name":"Url"},{"editoptions":{"value":"Inicio:Inicio;Acerca de...:Acerca de...;Tipos de Problemas:Tipos de Problemas;Menus:Menus;Usuarios:Usuarios;Áreas:Áreas;Workflow:Workflow;Interfaces:Interfaces;ERP:ERP;Administración:Administración;Prueba2:Prueba2;SubP1:SubP1;Roles:Roles"},"searchoptions":{dataInit:function(el) {setTimeout(function() {var ec = 'AutoCompletePadre';if (typeof(jQuery(el).autocomplete) !== 'function')alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js');jQuery(el).autocomplete( eval(ec + '_acid') );},200);}},"editable":true,"index":"Padre","name":"Padre","edittype":"select"}],viewrecords: true,scrollrows: false,prmNames: { id: "ID" },headertitles: true,pager: jQuery('#MenuGrid_pager'),subGrid: true,subGridOptions: {},subGridRowExpanded: showRolesSubGrid,loadError: jqGrid_aspnet_loadErrorHandler,hoverrows: false,rowNum: 10,rowList: [10,20,30],editDialogOptions: {"closeAfterEdit":true,"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"closeAfterAdd":true,"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "ID" },sortorder: 'asc',multiselect: true,multiboxonly: true,width: '100%',height: '100%',viewsortcols: [false,'vertical',true]})
.navGrid('#MenuGrid_pager',{"edit":true,"add":true,"del":true,"search":true,"refresh":true,"view":false,"position":"left","cloneToTop":true},jQuery('#MenuGrid').getGridParam('editDialogOptions'),jQuery('#MenuGrid').getGridParam('addDialogOptions'),jQuery('#MenuGrid').getGridParam('delDialogOptions'),jQuery('#MenuGrid').getGridParam('searchDialogOptions') ).bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {jQuery(document.body).css('font-size','100%'); jQuery(document.body).html(xht.responseText);};jQuery('#MenuGrid').filterToolbar({});});</script>
<table id='RolesSubGrid'></table><div id='RolesSubGrid_pager'></div><script type='text/javascript'>
function showSubGrid_RolesSubGrid(subgrid_id, row_id, message, suffix) {var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+'_t';
pager_id = 'p_'+ subgrid_table_id;
if (suffix) { subgrid_table_id += suffix; pager_id += suffix; }
if (message) jQuery('#'+subgrid_id).append(message);
jQuery('#'+subgrid_id).append('<table id=' + subgrid_table_id + ' class=scroll></table><div id=' + pager_id + ' class=scroll></div>');
jQuery('#' + subgrid_table_id).jqGrid({url: '/MenuItem/DatosRoles?jqGridID=RolesSubGrid&parentRowID=' + row_id + '',editurl: '?jqGridID=RolesSubGrid&editMode=1&parentRowID=' + row_id + '',mtype: 'GET',datatype: 'json',page: 1,colNames: ["ID","RoleName"],colModel: [{"key":true,"searchoptions":{},"index":"RoleID","width":50,"name":"RoleID"},{"index":"RoleName","searchoptions":{},"name":"RoleName"}],viewrecords: true,scrollrows: false,prmNames: { id: "RoleID" },headertitles: true,pager: jQuery('#' + pager_id),loadError: jqGrid_aspnet_loadErrorHandler,hoverrows: false,rowNum: 10,rowList: [10,20,30],editDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "RoleID" },sortorder: 'asc',width: '650',height: '350',viewsortcols: [false,'vertical',true]})
.bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {jQuery(document.body).css('font-size','100%'); jQuery(document.body).html(xht.responseText);};}</script>
</div>
<script type='text/javascript'>var AutoCompleteName_acid = { id: 'AutoCompleteName',source: '/MenuItem/AutoCompleteName' };</script>
<script type='text/javascript'>var AutoCompletePadre_acid = { id: 'AutoCompletePadre',source: '/MenuItem/AutoCompletePadre' };</script>
</div>
</div>
</div>
<footer>
<div class ="Info">
<h3>INFO/NOVEDADES:</h3>
</div>
</footer>
</body>
</html>
ここでエラーが発生します：
jQuery('#' + subgrid_table_id).jqGrid({
url: '/MenuItem/DatosRoles?jqGridID=RolesSubGrid&parentRowID=' + row_id + '',
editurl: '?jqGridID=RolesSubGrid&editMode=1&parentRowID=' + row_id + '',
mtype: 'GET',
datatype: 'json',
page: 1,
colNames: ["ID", "RoleName"],
colModel: [{
"key": true,
"searchoptions": {},
"index": "RoleID",
"width": 50,
"name": "RoleID"
}, {
"index": "RoleName",
"searchoptions": {},
"name": "RoleName"
}],
viewrecords: true,
scrollrows: false,
prmNames: {
id: "RoleID"
},
headertitles: true,
pager: jQuery('#' + pager_id),
loadError: jqGrid_aspnet_loadErrorHandler,
hoverrows: false,
rowNum: 10,
rowList: [10, 20, 30],
editDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
editData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
addDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
editData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
delDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
delData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
searchDialogOptions: {
"resize": false,
"recreateForm": true
},
jsonReader: {
id: "RoleID"
},
sortorder: 'asc',
width: '650',
height: '350',
viewsortcols: [false, 'vertical', true]
}).bindKeys();
解決の方向性を高く評価します...