jQuery Grid css没有加载.net核心2
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery Grid css没有加载.net核心2相关的知识,希望对你有一定的参考价值。
我的JqGrid Css样式未正确加载。我正在使用.net core 2.0和jqgrid 4.4.3。你能帮我解决一下我做错了什么。我尝试了手动css类到表。但仍然没有帮助。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
</script>
<script src="~/js/grid.locale-en.js"></script>
<script src="~/js/jquery.jqGrid.min.js"></script>
<link href="~/css/ui.jqgrid.css" rel="stylesheet" />
<table id="list-student"></table>
<div id="pager"></div>
<script>
$('#list-student').jqGrid({
url: '/Home/GetProductsList',
datatype: 'json',
colNames: ['proID', 'ID', 'name', 'SKU', 'Price', 'vendorname', 'Active'],
colModel: [
{ name: 'proID', index: 'proID', editable: false, width: 100, align: 'center' },
{ name: 'ID', index: 'ID', editable: true, width: 240 },
{ name: 'name', index: 'name', editable: true, width: 240 },
{ name: 'SKU', index: 'SKU', editable: true, width: 240 },
{ name: 'Price', index: 'Price', editable: true, width: 240 },
{ name: 'vendorname', index: 'vendorname', editable: true, width: 240 },
{ name: 'Active', index: 'Active', editable: true, width: 240 }
],
rowNum: 1,
rowList: [1, 2, 3],
pager: '#pager',
sortname: 'id',
viewrecords: true,
height: 'auto',
width: 'auto',
sortorder: 'asc',
loadonce: true,
caption: 'List Students',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
}).navGrid('#pager',
{
edit: true,
add: true,
del: true,
search: true,
refresh: true,
closeAfterSearch: true
});
</script>
这是我的cshtml页面,我的控制器是这样的。
[HttpGet]
public virtual ActionResult GetProductsList()
{
List<ResponseMessage> respmsg = new List<ResponseMessage>();
respmsg.Add(new ResponseMessage { proID = 1, ID = 5, name = "Product1", SKU = "sku1", Price = 100, vendorname = "Nike", Active = true });
respmsg.Add(new ResponseMessage { proID = 2, ID = 6, name = "Product2", SKU = "sku2", Price = 100, vendorname = "Addidas", Active = false });
var result = new
{
total = respmsg.Count,
page = 1,
records = 2,
rows = respmsg
};
//return Content(Newtonsoft.Json.JsonConvert.SerializeObject(result), "application/json");
return Json(result);
}
这就是我的页面的样子
我编辑保存创建的所有功能都运行正常。除了CSS风格。
答案
你错过了加载jQuery UI CSS文件jquery-ui.css,就像这样
...
<link rel="stylesheet" type="text/css" media="screen" href="~/css/jquery-ui.css" />
确保你指向一个正确的jquery-ui css
以上是关于jQuery Grid css没有加载.net核心2的主要内容,如果未能解决你的问题,请参考以下文章
Handsontable Grid - 从 aspx 网页加载和保存数据
Angular、Vue、React、Web Components、Blazor、Javascript、jQuery和ASP.NET Framework,