javascript - JQuery 网格不显示结果-6ren

javascript - JQuery 网格不显示结果

转载作者：行者123 更新时间：2023-12-02 21:58:36

我有一个 Jquery 网格，我知道正在执行 success 方法并且我的网格将加载，但没有数据。我得到了列标题，但没有结果。当我查看浏览器开发工具(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>

仪表板.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'
            };
        }
    });
}

Controller 方法:

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

最佳答案

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

您应该设置 datatype='json'
您错过了设置中数据来源的网址。

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

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

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

关于javascript - JQuery 网格不显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59940469/

文章推荐： javascript - 将元素添加到已评估的循环中

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - JQuery 网格不显示结果