gpt4 book ai didi

jquery - jqGrid 结果溢出网格和 "Please, Select Row"消息

转载 作者:行者123 更新时间:2023-11-28 13:36:44 25 4
gpt4 key购买 nike

(我对网络编程比较陌生,所以这可能是一个容易被忽视的问题)

我正在使用 ASP.NET MVC4 构建一个应用程序,其中包含一个显示 jqGrid 的 Razor View 。它使用 ajax 动态获取列元数据,并且数据似乎都返回正常。当我运行应用程序并显示 View 时,显示了数据,但网格的标题和主体都溢出了网格(见图)。

Rendered Grid

我确实注意到数据下方似乎有一条警告“请选择行”。我怀疑问题是 CSS 或与警告有关。我尝试更改 ui.jqgrid.css、site.css 等中的各种属性,但均无济于事。

这是呈现的 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(主题)在呈现页面时未加载。这是在 IE 的开发者工具上看到的。

此问题的原因似乎是 Razor View 未正确处理 java 脚本。将内容和脚本移动到纯 HTML 页面后,一切都正确呈现。

所以仍然有一个问题,为什么 javascript 没有被渲染,但我现在有足够的解决方法。

关于jquery - jqGrid 结果溢出网格和 "Please, Select Row"消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12876950/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com