jQuery网格不显示结果答案

【问题标题】：JQuery grid not displaying resultsjQuery网格不显示结果
【发布时间】：2020-01-27 23:43:00
【问题描述】：

我有一个 Jquery 网格，我知道成功方法正在执行，并且我的网格将加载，但没有数据。我得到列标题但没有结果。当我查看浏览器开发人员工具（IE、Chrome）时，我没有收到任何错误。如果我在 Jquery 网格成功中放置一条警告消息，它将显示。我错过了什么？这是一个 MVC 应用程序。

内容页面：

 @{ ViewBag.Title = "Workflow Dashboard";
}

    <div>
        @section scripts {
            <script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")" type="text/javascript"></script>
            @*<script src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")" type="text/javascript"></script>*@
            <script src="@Url.Content("~/Scripts/jquery.jqGrid.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/CPQ/Dashboard.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/CPQ/Permissions.js")" type="text/javascript"></script>
        }

        <div id="hiddenFields">
            <input id="UserTypeID" type="hidden" value="@ViewBag.User.UserTypeID" />
        </div>

        @if (ViewBag.User.UserTypeID == (int)CPQ.Models.UserType.Administrator ||
             ViewBag.User.UserTypeID == (int)CPQ.Models.UserType.CTM ||
             ViewBag.User.UserTypeID == (int)CPQ.Models.UserType.CZM ||
             ViewBag.User.UserTypeID == (int)CPQ.Models.UserType.GM ||
             ViewBag.User.UserTypeID == (int)CPQ.Models.UserType.BDM)
        {
            <h3>@ViewBag.Title</h3>
            <div class="row">
                <div class="col-sm-12">
                    <table id="gridWorkflowDashboard"></table>
                    <div id="gridpager"></div>
                </div>
            </div>
            <hr />
        }
        <h3>Recent</h3>
        <div class="row">
            <div class="col-sm-12">
                @*<div id="gridRecentDashboard"></div>*@
                <table id="gridRecentDashboard"></table>
            </div>
        </div>
    </div>

布局页面：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>@ViewBag.Title - Commercial Price Quote Tool</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <link href="@Url.Content("~/Scripts/jsgrid-1.5.3/jsgrid.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jsgrid-1.5.3/jsgrid-theme.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jquery-ui-1.12.1/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-ui-1.12.1/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jsgrid-1.5.3/jsgrid.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css"/>

    <script src="@Url.Content("~/Scripts/Common.js")" type="text/javascript"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Commercial Price Quote Tool", "Index", "Search", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Dashboard", "Index", "Dashboard")</li>
                    <li>@Html.ActionLink("Customer Search", "Index", "Search")</li>
                    <li class="_admin" style="display:none;">@Html.ActionLink("Users", "Index", "Users")</li>
                    <li class="_admin" style="display:none;">@Html.ActionLink("Management", "Index", "Management")</li>
                    <li class="_admin"> <a class="navbar-header" href="https://one.web.ppg.com/na/refinish/coll/commcoatings/Contracts/CPQt%20Training%20Presentation,%203-4-19.pdf" target="_blank">Help</a></li>
                    @*<li>@Html.ActionLink("Z Price Editor", "Index", "ZPriceEditor")</li>*@
                </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Commercial Price Quote Tool</p>
        </footer>
    </div>
    <div class="modal fade" id="loadingModal" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Alert</h4>
                </div>
                <div class="modal-body" id="loadingModalBody">
                </div>
                @*<div class="modal-footer"></div>*@
            </div>
        </div>
    </div>

</body>
</html>

Dashboard.js：

var colNames = ["CTSID", "Customer", "Terr", "Zone Manager", "Status", "Version", "Workflow Step", "Expiration Date"];

var cols = [
    { label: 'CTSID', index: 'CTSID', name: 'CTSID', align: 'left' },
    { label: 'Customer', index: 'CustomerName', name: 'CustomerName', align: 'left' },
    { label: 'Terr', index: 'Territory', name: 'Territory', align: 'left' },
    { label: 'Zone Manager', index: 'CZMNanme', name: 'CZMNanme', align: 'left' },
    { label: 'Status', index: 'StatusName', name: 'StatusName', align: 'left' },
    { label: 'Version', index: 'VersionNumber', name: 'VersionNumber', align: 'left' },
    { label: 'Workflow Step', index: 'WorkflowName', name: 'WorkflowName', align: 'left' },
    { label: 'Expiration Date', index: 'EffectiveEndDate', name: 'EffectiveEndDate', align: 'left' }
];

var grid = $("#gridWorkflowDashboard");
var actionUrl = 'Dashboard/GetUserWorkflowDashboard';
var page = 1;

$(function () {
    //Initialize jqgrid
    $("#gridWorkflowDashboard").jqGrid({
        dataType: 'local',
        //type: 'GET',
        colName: colNames,
        colModel: cols,
        sortname: 'EffectiveEndDate',
        sortorder: 'asc',
        rowList: [10, 25, 100],
        height: 'auto',
        pager: $('#gridpager'),
        rowNum: 12,
        gridview: true
    });
});

$(document).ready(function () {

    //page load call loadGrid()
    loadGrid();

});


function loadGrid() {
    var pCTSID = '';
    var pCustomerName = '';
    var pCZMName = '';
    var pEffectiveEndDateModified = '';
    var pStatusName = '';
    var pTerritory = '';
    var pVersionInformation = '';
    var pWorkflowName = '';

    var data = { CTSID: pCTSID, CustomerName: pCustomerName, CZMName: pCZMName, effectiveEndDateModified: pEffectiveEndDateModified, StatusName: pStatusName, Territory: pTerritory, VersionInformation: pVersionInformation, WorkflowName: pWorkflowName };
    //var grid = $("#gridWorkflowDashboard");

    $.ajax(actionUrl, {
        contentType: 'application/json',
        type: 'GET',
        dataType: 'json',
        data: JSON.stringify(data),
        success: function (result) {
            grid.clearGridData();
            grid.jqGrid('setGridParam',
                {
                    datatype: 'local',
                    data: result
                }).trigger("reloadGrid");
        },
        error: function () {
            DialogMessage = "Failed to Load Dashboard. Please Contact IT Support";
            var VPDialogoptions = {
                header: "Error",
                message: DialogMessage,
                dialogType: 'Close'
            };
        }
    });
}

控制器方法：

 public JsonResult GetUserWorkflowDashboard(string CTSID, string CustomerName, string CZMName, string effectiveEndDateModified,
        string StatusName, string Territory, string VersionInformation, string WorkflowName)
    {
        try
        {
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = "[CPQ].[spGetUserWorkflowDashboard]"; //this sp also calls spCheckActiveQuotes
            cmd.CommandType = CommandType.StoredProcedure;

            cmd.Parameters.Add("@UserID", SqlDbType.Int).Value = CurrentUser.UserID;
            if (CTSID != "" && CTSID != null)
            {
                cmd.Parameters.Add("@CTSID", SqlDbType.VarChar).Value = CTSID;
            }

            if (CustomerName != "")
            {
                cmd.Parameters.Add("@CustomerName", SqlDbType.VarChar).Value = CustomerName;
            }

            if (CZMName != "")
            {
                cmd.Parameters.Add("@CZMName", SqlDbType.VarChar).Value = CZMName;
            }

            if (effectiveEndDateModified != "" && effectiveEndDateModified != null)
            {
                cmd.Parameters.Add("@effectiveEndDate", SqlDbType.Date).Value = Convert.ToDateTime(effectiveEndDateModified).ToShortDateString();
            }

            if (StatusName != "")
            {
                cmd.Parameters.Add("@StatusName", SqlDbType.VarChar).Value = StatusName;
            }

            if (Territory != "")
            {
                cmd.Parameters.Add("@Territory", SqlDbType.VarChar).Value = Territory;
            }

            if (VersionInformation != "")
            {
                cmd.Parameters.Add("@VersionInformation", SqlDbType.VarChar).Value = VersionInformation;
            }

            if (WorkflowName != "")
            {
                cmd.Parameters.Add("@WorkflowName", SqlDbType.VarChar).Value = WorkflowName;
            }

            DataSet ds = CommonDAL.ExecuteDataSet(cmd, CommonDAL.DataBaseName.RefinAgree);
            DataTable dt = ds.Tables[0];

            var DashboardList = new List<DashboardDTO>();

            foreach (DataRow dr in dt.Rows)
            {
                var dash = new DashboardDTO();
                dash.AccountNumbers = dr["AccountNumbers"].ToString();
                dash.CTSID = Convert.ToInt32(dr["CTSID"]);
                dash.CustomerName = dr["CustomerName"].ToString();
                dash.Address1 = dr["Address1"].ToString();
                dash.Address2 = dr["Address2"].ToString();
                dash.City = dr["City"].ToString();
                dash.State = dr["State"].ToString();
                dash.Zip = dr["Zip"].ToString();
                dash.Phone = dr["Phone"].ToString();
                dash.Fax = dr["Fax"].ToString();
                dash.Territory = dr["Territory"].ToString();
                dash.CountryID = Convert.ToInt32(dr["CountryID"]);
                dash.CountryDesc = dr["CountryDesc"].ToString();
                dash.CZMID = Convert.ToInt32(dr["CZMID"]);
                dash.CZMName = dr["CZMName"].ToString();
                dash.StatusID = Convert.ToInt32(dr["StatusID"]);
                dash.StatusName = dr["StatusName"].ToString();
                dash.StatusDescription = dr["StatusDescription"].ToString();
                dash.VersionNumber = dr["VersionNumber"].ToString();
                dash.VersionID = Guid.Parse(dr["VersionID"].ToString());
                dash.VersionInformation = dash.StatusName + " - " + dash.VersionNumber;
                dash.WorkflowID = Convert.ToInt32(dr["WorkflowID"]);
                dash.WorkflowName = dr["WorkflowName"].ToString();
                dash.EffectiveEndDate = Convert.ToDateTime(dr["EffectiveEndDate"].ToString()).ToShortDateString();
                //.Date.ToString("MM/dd/yyyy");

                DashboardList.Add(dash);
            }

            return Json(DashboardList.ToArray(), JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            string ExceptionMessage = ex.Message;
            Console.Write(ExceptionMessage);
            return null;
        }
    }

【问题讨论】：

标签： javascript jquery model-view-controller jqgrid

【解决方案1】：

您的网格设置似乎不正确。

你应该设置 datatype='json'
您在设置中错过了数据来源的 url。

请注意，javaScript 区分大小写 - dataType 与 datatype 不同。在 jqGrid 中，使用了 datatype。

为了从服务器获取数据，您的设置应该如下所示：

var grid = $("#gridWorkflowDashboard");
var actionUrl = 'Dashboard/GetUserWorkflowDashboard';
var page = 1;

$(function () {
    //Initialize jqgrid
    $("#gridWorkflowDashboard").jqGrid({
    datatype: 'json',
    url: actionUrl,
    page : page,
    //type: 'GET',
    colName: colNames,
    colModel: cols,
    sortname: 'EffectiveEndDate',
    sortorder: 'asc',
    rowList: [10, 25, 100],
    height: 'auto',
    pager: $('#gridpager'),
    rowNum: 12,
    gridview: true
});

【讨论】：

我进行了上述更改，但仍然得到相同的结果。我知道我有从控制器返回的数据，如果我在成功方法中发出警报，它会触发。
服务器的响应是什么？您是否在控制台中看到带有返回数据的 ajax 请求。如果是这样，如何查看您的数据作为响应？
感谢托尼的帮助。我终于能够让它工作了。我切换到free-Jqgrid，这似乎解决了我的问题。为了回答您的问题，我的响应是从控制器返回的仪表板类数组。