0

嗨,我正在使用 jqgrid 子网格的 trirand 示例(Trirand example Hierarchy 2 level)。在我的情况下,子网格行为是在自动生成的 javascript 函数中。当我将示例“翻译”为我的解决方案(mvc3+razor+entity 框架 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>

这是我的模型网格:

    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();

我会感谢任何解决方向...

4

1 回答 1

0

我发现了问题,它在我用来显示手风琴菜单的 javascript 集中:

 <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>

从脚本中删除这个块然后子网格显示很好......似乎这个javascript的一部分正在重置jquery函数。

于 2012-09-25T15:34:26.770 回答