2014-07-09 65 views
2

我的jqGrid工作正常,正確加載數據。即使排序和分頁工作正常。 但是,當filterToolBar用於搜索數據時,它不搜索任何數據...只是繼續顯示「正在加載...」。jqGrid:Uncaught TypeError:讀取xml數據時無法讀取屬性'getAccessor'undefined

下面是包含在HEAD部分腳本引用的Tagging:

<script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>  
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="~/Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script> 

HTML:

<table id="jqGrid" ></table> 
<div id="pager"></div> 


<script type="text/javascript"> 
$("#jqGrid").jqGrid({ 
    url: "GetData.asmx/LoadData", 
    datatype: "xml",  
    xmlReader: { 
     repeatitems: false,    
     root: "Rowset", 
     row: "Row" 
    }, 
    colNames: ["Id","Contact Name", "City", "Country"], 
    colModel: [ 
     { name: 'id', index: 'id', width: 40, stype: 'text',sortable:true }, 
     { name: "ContactName", index: "ContactName", sortable: true, width: 300,  search: true, stype: 'text' }, 
     { name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' }, 
     { name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 50, 100], 
    pager: "#pager", 
    gridview: true, 
    rownumbers: true, 
    viewrecords: true, 
    height: "auto",   
    loadonce: true,  
    sortorder: "desc", 
    caption: "List of Employees", 
    ignoreCase: true   
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" }); 

</script> 

請看看這個代碼,並引導我,在那裏得到錯誤的。

由於提前, Dipti謝斯

更新:

以下是XML響應:

 <Rowsets DateCreated="2013-05-02T09:18:07" EndDate="2013-05-02T09:18:07" StartDate="2013-05-02T08:18:07" Version="12.0.6 Build(13)"> 
<Rowset> 
<Columns> 
<Column Description="Id" MaxRange="1" MinRange="0" Name="Id" SQLDataType="12" SourceColumn="Id"/> 
<Column Description="ContactName" MaxRange="1" MinRange="0" Name="ContactName" SQLDataType="12" SourceColumn="ContactName"/> 
<Column Description="City" MaxRange="1" MinRange="0" Name="City" SQLDataType="12" SourceColumn="City"/> 
<Column Description="Country" MaxRange="1" MinRange="0" Name="Country" SQLDataType="12" SourceColumn="Country"/> 
</Columns> 
<Row> 
<id>1</id> 
<ContactName>Maria Anders</ContactName> 
<City>Berlin</City> 
<Country>Germany</Country> 
</Row> 
<Row> 
<id>2</id> 
<ContactName>Ana Trujillo</ContactName> 
<City>México D.F.</City> 
<Country>Mexico</Country> 
</Row> 
<Row> 
<id>3</id> 
<ContactName>Antonio Moreno</ContactName> 
<City>México D.F.</City> 
<Country>Mexico</Country> 
</Row> 
<Row> 
<id>4</id> 
<ContactName>Thomas Hardy</ContactName> 
<City>London</City> 
<Country>UK</Country> 
</Row> 
<Row> 
<id>5</id> 
<ContactName>Christina Berglund</ContactName> 
<City>Luleå</City> 
<Country>Sweden</Country> 
</Row> 
<Row> 
<id>6</id> 
<ContactName>Hanna Moos</ContactName> 
<City>Mannheim</City> 
<Country>Germany</Country> 
</Row> 
</Rowset> 
</Rowsets> 

響應標頭:在Chrome

的調試器的網絡標籤 ​​ 個

感謝, Dipti謝斯

編輯: _Layout.cshtml頁:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 

    <link href="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.theme.css" rel="stylesheet" media="screen" type="text/css" /> 
    <link href="~/Content/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" /> 
    <style> 
    html, body { 
     margin: 0; 
     padding: 0; 
     font-size: 75%;    
    } 
    </style> 
    <script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $.jgrid.no_legacy_api = true; 
    $.jgrid.useJSON = true; 
    </script> 
    <script src="~/Scripts/js/jquery.jqGrid.src.js" type="text/javascript"></script> 
    </head> 
    <body> 

    <div class="container body-content"> 
    @RenderBody()  
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

Index.cshtml頁:

@{ 
    ViewBag.Title = "Home Page"; 
    } 

    <table id="jqGrid" ></table> 
    <div id="pager"></div> 

<script type="text/javascript"> 
    //<![CDATA[ 
    /*global $ */ 
    /*jslint browser: true */ 
    // $(function() { 
    // "use strict"; 
     $("#jqGrid").jqGrid({ 
     url: "GetData.asmx/GetData/LoadData",   
     datatype: "xml",  
     xmlReader: { 
     repeatitems: false,   
     root: "Rowset", 
     row: "Row" 
    }, 
    colNames: ["Id","Contact Name", "City", "Country"], 
    colModel: [ 
     { name: 'id', index: 'id', width: 40, stype: 'text',sortable:true }, 
     { name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' }, 
     { name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' }, 
     { name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 50, 100], 
    pager: "#pager", 
    gridview: true, 
    rownumbers: true, 
    viewrecords: true, 
    height: "auto",   
    loadonce: true,  
    sortorder: "desc", 
    caption: "List of Employees", 
    ignoreCase: true   
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" }); 
// }); 
    //]]> 
    </script> 

它顯示空白頁面,如果$(功能ion(){})在那裏。如果我評論這部分,那麼它會在網頁上顯示網格和數據。但仍然,工具欄搜索不起作用。

請指導我哪裏出問題了。

+0

@DiptiSheth:我無法使用您發佈的數據重現錯誤。試試[演示](http://www.ok-soft-gmbh.com/jqGrid/DiptiSheth.htm)。 – Oleg

+0

@Oleg:感謝演示。當它作爲獨立的HTML頁面工作時,它工作正常,但不適用於MVC模式。這很奇怪。請在問題的EDITED部分查看我的MVC代碼。 THanks –

+0

@DiptiSheth:對不起,但從靜態文件加載XML數據和加載動態數據應該沒什麼區別。我在你的代碼中看到的一個可疑部分是@Scripts.Render(「〜/ bundles/jquery」)**,**之前明確包含了jQuery和jQuery UI。它可能會覆蓋以前的一些設置。您可以放置​​'$(function(){...});'並將Javascript代碼移至''。您之前發佈的錯誤號非常奇怪。它顯示錯誤發生在'reloadGrid'裏面。它不存在於您發佈的代碼中。 – Oleg

回答

2

大概你包含了jQuery JavaScript文件兩次。在你第一次包括有在<head>通過

<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js" 
     type="text/javascript"></script> 
<script src="~/Scripts/js/src/i18n/grid.locale-en.js" 
     type="text/javascript"></script> 

以後你放置的jqGrid和其他的Java腳本文件。問題在於你用

@Scripts.Render("~/bundles/jquery") 

接近結尾<body>。第二個包括jQuery定義可以覆蓋一些之前設置的jQuery擴展或reset/覆蓋一些以前初始化的jQuery內部結構。

簡單的規則是:您必須在每個HTML頁面上包含每個JavaScript文件一次

此外,我個人更喜歡在<head>之內放置JavaScript代碼。在這種情況下,您應該將創建網格的代碼放入$(function() {/*here*/});

相關問題