javascript jqGrid：未捕获的类型错误：在读取 xml 数据时无法读取未定义的属性“getAccessor”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24652519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid : Uncaught TypeError: Cannot read property 'getAccessor' of undefined while reading xml data
提问by Dipti Sheth
My jqGrid works fine, loads data properly. Even sorting and pagination are working fine. But, when filterToolBar is used to search data, it doesn't search any data...just keeps showing 'Loading...'.
我的 jqGrid 工作正常，正确加载数据。甚至排序和分页也能正常工作。但是，当 filterToolBar 用于搜索数据时，它不会搜索任何数据...只是一直显示“正在加载...”。
Below are script taggings included in HEADpart:
以下是HEAD部分中包含的脚本标记：
<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:
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>
Please look into this code and guide me, where it is getting wrong.
请查看此代码并指导我，哪里出错了。
Thanks in advance, Dipti Sheth
提前致谢， Dipti Sheth
UPDATED:
更新：
Following is the xml response:
以下是 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>
RESPONSE HEADER:in Network tab of debugger of Chrome
响应头：在 Chrome 调试器的网络选项卡中
Cache-Control:private, max-age=0
Content-Encoding:gzip
Content-Length:636
Content-Type:text/xml; charset=utf-8
Date:Wed, 09 Jul 2014 12:34:15 GMT
Server:Microsoft-IIS/8.0
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcanFHcmlkU2FtcGxlXGpxR3JpZFNhbXBsZVxHZXREYXRhLmFzbXhcTG9hZERhdGE=?=
ConsoleSearchEmulationRendering
Thanks, Dipti Sheth
谢谢，迪普蒂·谢斯
EDITED:_Layout.cshtml page:
编辑：_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 page:
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>
It shows blank page if $(function () {})is there. If I comment this part, then it shows grid and data on the web-page. But still, toolbar searching does not work.
如果$(function () {})存在，则显示空白页 。如果我评论这部分，那么它会在网页上显示网格和数据。但是，工具栏搜索仍然不起作用。
Please guide me where it's going wrong.
请指导我哪里出错了。
采纳答案by Oleg
Probably you included jQuery JavaScripts files twice. At the first time you include there in <head>by
可能您两次包含 jQuery JavaScripts 文件。在你第一次包括有在<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>
later you placed JavaScripts files of jqGrid and other. The problem is that you use
后来你放置了 jqGrid 和其他的 JavaScripts 文件。问题是你使用
@Scripts.Render("~/bundles/jquery")
near to the end of <body>. The second including of jQuery definitions can overwrite some previously set extensions of jQuery or reset/ overwritesome previously initialized internal structures of jQuery.
接近尾声<body>。jQuery 定义的第二个包括可以覆盖一些先前设置的 jQuery 扩展或重置/覆盖一些先前初始化的 jQuery 内部结构。
The simple rule is: you have to include every JavaScript file only onceon every HTML page.
简单的规则是：您必须在每个 HTML 页面上只包含每个 JavaScript 文件一次。
Additionally I personally prefer to place JavaScript code inside of <head>. In the case you should place the code which creates the grid inside of $(function () {/*here*/});
此外，我个人更喜欢将 JavaScript 代码放在<head>. 在这种情况下，您应该将创建网格的代码放在$(function () {/*here*/});
