jqGrid结果溢出网格和“请选择行”信息 [英] jqGrid Results over flow the grid and "Please, Select Row" message
问题描述
（我对web编程相对较新，所以它可能是一个容易被忽视的问题）
(I am relatively new to web programming so it may be an easily overlooked issue)
我使用ASP.NET MVC4构建一个包含剃刀的应用程序视图显示一个jqGrid。它使用ajax动态获取列元数据，并且数据都似乎返回正常。当我运行应用程序和视图显示，数据显示，但网格的标题和正文流动网格（见图像）。
I am using ASP.NET MVC4 to build an application which contains a razor view displaying a jqGrid. It is dynamically getting the column meta data using ajax, and the data all seems to return fine. When I run the app and the view is displayed, the data is shown but both the headers and body of the grid over flow the grid (see image).
我注意到似乎有一个警告在请选择行的数据下。我的怀疑是问题是CSS还是与警告有关。我尝试改变ui.jqgrid.css，site.css等中的各种属性无效。
I did notice that there appears to be a warning beneath the data stating "Please, select row". My suspicion is the issue is either CSS or related to the warning. I have tried changing various properties in the ui.jqgrid.css, site.css, etc to no avail.
这里是渲染的html：
Here is the rendered html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Feed List Preview</title>
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"></script>
<script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
var jqDataUrl = "LoadData";
var jqMetaUrl = "GetColumnData";
$(document).ready(function () {
$.ajax(
{
type: "POST",
url: jqMetaUrl,
data: "",
dataType: "json",
success: function (result) {
col_names = result.colNames;
col_model = result.colModel;
$("#jqTable").jqGrid({
url: jqDataUrl,
datatype: "json",
mtype: "POST",
//Specify the column names
colNames: col_names,
//Configure the columns
colModel: col_model,
//Grid total width and height
width: 800,
shrinkToFit:false,
height: 400,
//Paging
toppager: true,
pager: $('#jqTablePager'),
rowNum: 25,
rowList: [25, 50, 100],
viewrecords: true, //Specify if total number of records is displayed
//Formatting
altRows: true
//Default Sorting (ignored)
//Grid Caption
//caption: "Feed List Preview"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, //settings for edit
{}, //settings for add
{}, //settings for delete
{ sopt: ["cn"] } //search options, Some options can be set on column level
)
},
error: function (x, e) {
alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";");
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>
Header
</h1>
</div>
<h2>Feed List Preview</h2>
<div>
<table id="jqTable" class="scroll"></table>
<div id="jqTablePager" />
</div>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</body>
</html>
推荐答案
好的，在一位同事的帮助下，标识了ui.jqgrid.css和jquery-ui * .css（theme）在页面呈现时未加载。这在IE的开发者工具上可以看到。
Ok, with the help of a colleague, we identified the ui.jqgrid.css and the jquery-ui*.css (theme) were not loading when the page was rendered. This was seen on the developer tools in IE.
这个问题的原因似乎是Razor视图没有正确处理java脚本。将内容和脚本移动到一个纯HTML页面后，一切正常。
The cause of this issue appears to be the Razor view not processing the java script correctly. After moving the content and scripts into a plain HTML page, everything rendered properly.
所以还有一个问题，为什么javascript没有被渲染，现在有足够的解决方法。
So there is still a question as to why the javascript didn't get rendered, but I now have a sufficient workaround.
这篇关于jqGrid结果溢出网格和“请选择行”信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
