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);
}

这就是我的页面的样子

MyJqgrid

我编辑保存创建的所有功能都运行正常。除了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,

CSS 或 jQuery 没有间歇性加载

无法将数据从数据库加载到 Jquery Grid

.Net 2.0 Infragistics Grid 的 jQuery 模态示例

jQuery Grid With ASP.Net MVC