将 jqGrid 与 .NET MVC 一起使用 Json 数据不会加载显示 ok 的列

Question

从.NET MVC 4.0.01加载数据时遇到了困难，我一直在对JQgrid网站和文档进行广泛的研究，但似乎找不到问题。

在我的网格中(我使用的是jqGrid 4.9.2(

$(function () {
    gridMs = $("#jqGridMSats").jqGrid({
        url: "Status/GetMissingItems",
        //contentType: "application/json",
        datatype: "json",
        loadError: function (xhr, status, error) { alert(status + " " + error); },
        mtype: "GET",
        colNames: ["SattId", "SattUId", "SattScannedId", "SattName",
         "SattAntenna", "SattCount", "SattFirstDiscovered", "SattLastSeen", "ZoneUId", 
         "ContainerId", "SattPlanUId", "Details"],
        colModel: [{ name: "SattId", index: "SattId", hidden: false, width: 100 },
                   { name: "SattUId", index: "SattUId", align: 'left', hidden: true, search: false, sortable: true, width: 75 },
                   { name: "SattScannedId", index: "SattScannedId", align: 'left', search: false, sortable: true, width: 75 },
                   { name: "SattName", index: "SattName", align: 'center', hidden: false, width: 30 },
                   { name: "SattAntenna", index: "SattAntenna", align: 'center', hidden: false, width: 30 },
                   { name: "SattCount", index: "SattCount", align: 'center', hidden: false, width: 30 },
                   { name: "SattFirstDiscovered", index: "SattFirstDiscovered", align: 'center', hidden: true, formatter: 'date',
                       formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 80,
                       searchoptions: {
                           dataInit: function (element) {
                               $(element).daterangepicker({
                                   id: 'Discovered',
                                   dateFormat: 'yy/mm/dd',
                                   minDate: new Date(2014, 0, 1),
                                   maxDate: new Date(2025, 0, 1),
                                   showOn: 'focus',
                                   onSelect: function () {
                                       //var startDate = $(el).val().start;
                                       //var endDate = $(el).val().end;
                                       //alert("Start: " + startDate + " End: " + endDate);
                                   }
                               });
                           },
                           // show search options
                           sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                       }
                   },
                   {
                       name: "SattLastSeen", index: "SattLastSeen", align: 'center', stype: 'text', formatter: 'date',
                        formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 90,
                       searchoptions: {
                           // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                           // use it to place a third party control to customize the toolbar
                           dataInit: function (el) {
                               $(el).daterangepicker({
                                   id: 'drpLS',
                                   dateFormat: 'yy/mm/dd',
                                   minDate: new Date(2014, 0, 1),
                                   maxDate: new Date(2025, 0, 1),
                                   showOn: 'focus',
                                   onClose: function () {
                                       var misDate = $(el).val();
                                       var dtArray = misDate.split('-');
                                       var startdate = dtArray[0].trim();
                                       var endDate = dtArray[1].trim();
                                   }
                               });
                           },
                           // show search options
                           sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                       }
                   },
                   { name: "ZoneUId", index: "ZoneUId", align: 'center', sortable: true, width: 60 },
                   { name: "ContainerId", index: "ContainerId", align: 'center', hidden: false, sortable: true, width: 60 },
                   { name: "SattPlanUId", index: "SattPlanUId", align: 'center', hidden: true, sortable: true, width: 60 },
                   { name: "Details", index: "Details", align: 'center', width: 30, hidden: true, search: false, formatter: function (cellvalue) {
                           return "<img src='../../Content/finder.png' alt='Locate sat' />";
                       }
                   }
        ],
        width: 770,
        height: 'auto',
        loadonce: true,
        //rowNum: 11,
        pager: "#jqGridPagerMSatts",
        viewrecords: true,
        caption: "Missing",
        gridview: true,
        autoencode: true,
        footerrow: true,
        loadComplete: function () { alert("loaded"); },
        jsonReader: {
            root: "rows",
            repeatitems: false,
            page: function (obj) { return 1; }, // page as 1
            total: function (obj) { return 1; }, // total  as 1
            records: function (obj) { return obj.length; }
        },
        onCellSelect: function (rowid, index) {
            var cm = gridMs.jqGrid('getGridParam', 'colModel');
            if (cm[index].name == 'Details' && satValue.indexOf("----") == -1) {
                alert('test');
            }
        },
    });
    gridMs.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
    gridMs.navGrid('#jqGridPagerMSatts', { edit: false, add: false, del: false, search: false });
});

我的客户端参考：

    <link href="<%= Url.Content("~/Scripts/jqGridM/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqGridM/js/i18n/grid.locale-en.js") %>" ></script> 
    <script type="text/javascript" src="<%= Url.Content("~/Scripts/jqGridM/js/jquery.jqGrid.min.js") %>" ></script>

我的列加载并显示总记录。但无法获得显示的数据。我已经尝试更改控制器以返回JavascriptSerializer格式，但仍然相同。我还删除了日期栏，认为这可能是格式问题，但结果仍然相同——没有显示数据。从Chrome查看(响应(时，我没有任何错误。我在同一个页面中有另一个网格，我可以将动态数据推送到刚刚好的位置，但从MVC Action加载数据是个问题。我的代码中缺少什么吗？如有任何帮助，我们将不胜感激。

以下是完整页面在Chrome中的渲染方式。如果我首先调用missingTagGrid函数，那么Grid会显示数据。然后，如果我之后选择resetGrid，它的加载也很好。如果我先选择resetGrid函数，但其他网格不会加载，但它会显示列和总页面。。。。Chrome中没有错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <title></title>
        <link href="/Content/Css/Reset.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Css/History.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Css/AnyTime.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Inventory/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Inventory/ui.daterangepicker.css" rel="stylesheet" type="text/css" />
        <link href="/Scripts/jqGridM/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
        <link href="/Content/Css/spectrum.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="/Scripts/spectrum.js"></script>  
        <link type="text/css" href="/Content/telerik.common.min.css" rel="stylesheet"/>
        <link type="text/css" href="/Content/telerik.vista.min.css" rel="stylesheet"/>
    </head>
    <body>                   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            var inventoryData = [];
            var missingData = [];
            var mydata;
            var rowMissing = 0;
            var rowTotals;
            var rowMissingMis = 0;
            var rowtotalsMis;
            var isMissing = false;
            var mydata = [];
            var newCompArray = [];
            var machineName = 'bcd44e4c';
            var registeredGrp = 'ACME Lgstks';
        </script>
    <form method="post" action="Status" id="form1"><div>
        <div id="timeDiv"></div>
        <div id="stsGrid" style="float: left;">
            <div id="tagStatus" style="width: 560px;">
            <div id="invGrid">    
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div></div>
            <div id="misGrid">
             <table id="jqGridMTags"></table>
           <div id="jqGridPagerMTags"></div>
           </div>
          </div>    
          </div>
        </div>
        <div style="clear: both;">
        </div>       
</form>
    <div id="removeChildModal" class="jqmWindow section">
    </div>    
     <script type="text/javascript">
         $('#misGrid').hide();
       </script>
    <script type="text/javascript">
        function resetGrid() {
            $('#misGrid').hide();
            $('#invGrid').show();
            var gridData;
            var rowIds;
            var messenger = $.connection.messenger;
            $("#jqGridMTags").hide();
            gridInv = null;
            //<![CDATA[
            $(function () {
                'use strict';
                var mydata = [], //Need this for SignalR
                    gridInv = $("#jqGrid");
                gridInv.jqGrid({
                    datatype: "jsonstring",
                    datastr: inventoryData,
                    colNames: ["Antenna", "Content", "Count", "Direction", "Discovered", "Duration", "EPC", "Freq","LastSeen", "Name", "Pack", "RSSI", "Size", "Speed", "Title", "Type", "Zone", "Find"],
                    colModel: [{name: "Antenna", index: "Antenna", key: true, hidden: true, width: 100, cellattr: function (rowId) {if (rowId < 5) { return 'colspan=8'; }}
                    },
                        { name: "Content", index: "Content", align: 'left', search: false, sortable: true, width: 75 },
                        { name: "Count", index: "Count", align: 'center', search: false, sortable: true, width: 40 },
                        { name: "Direction", index: "Direction", align: 'center', hidden: true, width: 30 },
                        { name: "Discovered", index: "Discovered", align: 'center', stype: 'text', search: true, sortable: true, width: 80,
                            searchoptions: {
                                // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                                // use it to place a third party control to customize the toolbar
                                dataInit: function (element) {$(element).daterangepicker({id: 'Discovered',dateFormat: 'yy/mm/dd',minDate: new Date(2014, 0, 1),maxDate: new Date(2025, 0, 1),
                                        showOn: 'focus'
                                    });
                                },
                                // show search options
                                sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                            }
                        },
                        { name: "Duration", index: "Duration", align: 'center', hidden: true, width: 60 },
                        { name: "EPC", index: "EPC", align: 'center', sortable: true, width: 140 },
                        { name: "Freq", index: "Freq", align: 'center', hidden: true, sortable: true, width: 50 },
                        {
                            name: "LastSeen", index: "LastSeen", align: 'center', stype: 'text', search: true, sortable: true, width: 80,
                            searchoptions: {
                                dataInit: function (element) {$(element).daterangepicker({id: 'LastSeen',dateFormat: 'yy/mm/dd',minDate: new Date(2014, 0, 1),maxDate: new Date(2025, 0, 1),showOn: 'focus'});},
                                // show search options
                                sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                            }
                        },
                        { name: "Name", index: "Name", align: 'center', sortable: true, width: 50 },
                        { name: "Pack", index: "Pack", align: 'center', hidden: true, sortable: true, width: 60 },
                        { name: "RSSI", index: "RSSI", align: 'center', hidden: true, sortable: true, width: 50 },
                        { name: "Size", index: "Size", align: 'center', hidden: true, sortable: true, width: 60 },
                        { name: "Speed", index: "Speed", align: 'center', hidden: true, sortable: true, width: 60 },
                        { name: "Title", index: "Title", align: 'center', hidden: true, sortable: true, width: 60 },
                        { name: "Type", index: "Type", align: 'center', width: 33, search: false, formatter: function (cellvalue) {
                                if (cellvalue == "----") return "----";
                                if (cellvalue == "None" || cellvalue === 'undefined' || cellvalue == '')
                                    return "<img src='../../Scripts/Tree/skin/0000.png' alt='Locate tag' />";
                                else
                                    return "<img src='../../Scripts/Tree/skin/" + cellvalue + ".png' alt='Locate tag' />";
                            }
                        },
                        { name: "Zone", index: "Zone", align: 'center', search: true, sortable: true, width: 50 },
                        { name: "Find", index: "Find", align: 'center', width: 25, search: false, formatter: function (cellvalue) {
                                if (cellvalue == "----") return "----";
                                else
                                    return "<img src='../../Content/finder.png' alt='Locate tag' />";
                            }
                        }
                    ],
                    width: 770,
                    height: 428,
                    gridview: true,
                    rowattr: function (rd) {
                        if (rd.Find === "----") { // verify it's Zone parent
                            return { "class": "zoneHdr" };
                        }
                        else
                            return { "class": "selected-row" };
                    },
                    loadonce: true,
                    rowNum: 11,
                    pager: "#jqGridPager",
                    sortname: 'Antenna',
                    treeGrid: true,
                    treeGridModel: 'adjacency',
                    treedatatype: "jsonstring",
                    ExpandColumn: 'Content',
                    viewrecords: true,
                    caption: "Inventory List",
                    footerrow: true,
                    grouping: false,
                    jsonReader: {
                        repeatitems: false,
                        root: function (obj) { return obj; },
                        page: function (obj) { return 1; },
                        total: function (obj) { return 1; },
                        records: function (obj) { return obj.length; }
                    },
                    onCellSelect: function (rowid, index) {
                        var tagValue = gridInv.jqGrid('getCell', rowid, 'Title');
                        var zneValue = gridInv.jqGrid('getCell', rowid, 'Zone');
                        var cm = gridInv.jqGrid('getGridParam', 'colModel');
                        if (cm[index].name == 'Find' && tagValue.indexOf("----") == -1) {
                            localStorage.setItem("tagStore", tagValue);
                            localStorage.setItem("zneStore", zneValue);
                        }
                        window.location = "/Package";
                    },
                });
                gridInv.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
                gridInv.navGrid('#jqGridPager', { edit: false, add: false, del: false, search: false });
                gridInv.navButtonAdd('#jqGridPager', {
                    caption: "Click to show missing tags",
                    buttonicon: "ui-icon-tag",
                    position: "last",
                    onClickButton: function () {
                        alert("Deleting Row");
                    }
                });
            });
            gridData = $('#jqGrid').jqGrid('getRowData');
            for (var key in gridData[0]) {rowIds = $('#jqGrid').jqGrid('getCol', key, true);
                break;
            }
            if (typeof gridData != "undefined" && typeof rowIds != "undefined") {
                $.each(gridData, function (id) {var $row = $('#' + rowIds[id].id);
                    $row.show();});
            }
            rowTotals = ($('#jqGrid').getGridParam('records') - 4);
            rowMissing = 0;
            $('#jqGrid').jqGrid("footerData", "set", { Content: "<span style='color:red'>Total Missing:</span>", Count: "<span style='color:red'>" + rowMissing + "</span>", LastSeen: "Total Inventoried:", Name: rowTotals });
            $("#jqGrid").trigger("reloadGrid");
            messenger.server.broadCastReaderConfig(false, '');
            //
        }
        ///Missing Tags
        function missingTagGrid() {
            $('#misGrid').show();
            $('#invGrid').hide();
            var gridMs = null;
            //<![CDATA[
            $(function () {
                gridMs = $("#jqGridMTags").jqGrid({
                    url: "Status/GetMissingItems",
                    //contentType: "application/json",
                    datatype: "json",
                    loadError: function (xhr, status, error) { alert(status + " " + error); },
                    mtype: "GET",
                    colNames: ["TagId", "TagUId", "TagScannedId", "TagName", "TagAntenna", "TagCount", "TagFirstDiscovered", "TagLastSeen", "ZoneUId", "ContainerId", "FloorplanUId", "Details"],
                    colModel: [{ name: "TagId", index: "TagId", hidden: false, width: 100 },
                               { name: "TagUId", index: "TagUId", align: 'left', hidden: true, search: false, sortable: true, width: 75 },
                               { name: "TagScannedId", index: "TagScannedId", align: 'left', search: false, sortable: true, width: 75 },
                               { name: "TagName", index: "TagName", align: 'center', hidden: false, width: 30 },
                               { name: "TagAntenna", index: "TagAntenna", align: 'center', hidden: false, width: 30 },
                               { name: "TagCount", index: "TagCount", align: 'center', hidden: false, width: 30 },
                               {
                                   name: "TagFirstDiscovered", index: "TagFirstDiscovered", align: 'center', hidden: true, formatter: 'date',
                                   formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 80,
                                   searchoptions: { dataInit: function (element) {
                                           $(element).daterangepicker({
                                               id: 'Discovered',
                                               dateFormat: 'yy/mm/dd',
                                               minDate: new Date(2014, 0, 1),
                                               maxDate: new Date(2025, 0, 1),
                                               showOn: 'focus',
                                               onSelect: function () {
                                               }
                                           });
                                       },
                                       sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                                   }
                               },
                               { name: "TagLastSeen", index: "TagLastSeen", align: 'center', stype: 'text', formatter: 'date',
                                   formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 90,
                                   searchoptions: { dataInit: function (el) {
                                           $(el).daterangepicker({
                                               id: 'drpLS',
                                               dateFormat: 'yy/mm/dd',
                                               minDate: new Date(2014, 0, 1),
                                               maxDate: new Date(2025, 0, 1),
                                               showOn: 'focus',
                                               onClose: function () {
                                                   var misDate = $(el).val();
                                                   var dtArray = misDate.split('-');
                                                   var startdate = dtArray[0].trim();
                                                   var endDate = dtArray[1].trim();
                                               }
                                           });
                                       },
                                       sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
                                   }
                               },
                               { name: "ZoneUId", index: "ZoneUId", align: 'center', sortable: true, width: 60 },
                               { name: "ContainerId", index: "ContainerId", align: 'center', hidden: false, sortable: true, width: 60 },
                               { name: "FloorplanUId", index: "FloorplanUId", align: 'center', hidden: true, sortable: true, width: 60 },
                               { name: "Details", index: "Details", align: 'center', width: 30, hidden: true, search: false, formatter: function (cellvalue) {
                                       return "<img src='../../Content/finder.png' alt='Locate tag' />";
                                   }
                               }
                    ],
                    width: 770,
                    height: 'auto',
                    loadonce: true,
                    pager: "#jqGridPagerMTags",
                    viewrecords: true,
                    caption: "Missing",
                    gridview: true,
                    autoencode: true,
                    footerrow: true,
                    jsonReader: {
                        root: "rows",
                        repeatitems: false,
                        page: function (obj) { return 1; }, // page as 1
                        total: function (obj) { return 1; }, // total  as 1
                        records: function (obj) { return obj.length; }
                    },
                    onCellSelect: function (rowid, index) {
                        var cm = gridMs.jqGrid('getGridParam', 'colModel');
                        if (cm[index].name == 'Details' && tagValue.indexOf("----") == -1) {
                            alert('Pop up to decribe missing tag in detail');
                        }
                    },
                });
                gridMs.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
                gridMs.navGrid('#jqGridPagerMTags', { edit: false, add: false, del: false, search: false });

            });
        }
        <!-- other content -->
        <script type="text/javascript" src="/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.list.min.js"></script>
        <script type="text/javascript" src="/Scripts/SignalR.StatusHub.js"></script>
        <script type="text/javascript" src="/Scripts/trirand/jquery.jqDropDownList.min.js" ></script>
        <script type="text/javascript" src="/Scripts/trirand/jquery.jqDatePicker.min.js" ></script> 
        <script type="text/javascript" src="/Scripts/trirand/jquery.jqAutoComplete.min.js" ></script>
        <script type="text/javascript" src="/Scripts/jqGridM/js/i18n/grid.locale-en.js" ></script> 
        <script type="text/javascript" src="/Scripts/jqGridM/js/jquery.jqGrid.min.js" ></script>
        <script type="text/javascript" src="/Scripts/jqGridM/js/jquery.jqGrid.src.js" ></script>
        <script type="text/javascript" src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
        <script type="text/javascript" src="/Scripts/jquery.ui.dialog.js"></script>
        <script type="text/javascript" src="/Scripts/InventoryScripts/date.js"></script>
        <script type="text/javascript" src="/Scripts/InventoryScripts/daterangepicker.jQuery.js"></script>
        <script type="text/javascript" src="/Scripts/jquery.signalR-2.1.2.js"></script>
        <script type="text/javascript" src="/signalr/hubs"></script>
</body>
</html>

Answer 1

您使用了包含的JavaScript数据的错误顺序，并且将一些HTML元素放在了错误的位置。例如，您在页面的<head>中放置了以下JavaScript文件

<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spectrum.js"></script>

必须在依赖于jQuery的jquery-1.11.0.min.js之前包含jQuery。

下一个错误：您包含同一文件的两个不同版本。例如，您在<head>中包含了jquery-1.11.0.min.js，然后在<body>中放置了jquery-ui-1.10.4.custom.js。这是错误的。同样，包含同一个JavaScript库的非最小化和最小化版本也是错误的。参见直接包含在jquery.jqGrid.min.js之后的jquery.jqGrid.src.js。

您使用了jquery-1.7.1.js，这不是一个错误，但我强烈建议您不要使用这种jQuery的复古版本。如果不需要支持旧的web浏览器IE6、IE7和IE8，则应该使用jQuery 1.11.3或jQuery 2.1.4。

我把<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />放在<body>里面。这是错误的。所有<meta>应直接包含在<title>之后。别忘了包括

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

这是防止使用IE的兼容模式所必需的。

现在谈谈代码本身。很难阅读分成许多单独的<script></script>部分的代码。此外，代码要么不完整，要么一些重要函数将不会被调用，或者调用顺序错误。您应该首先包含jQuery，然后包含jqGrid，然后才能使用jqGrid方法。另一个问题是：定义了resetGrid和missingTagGrid函数，但从不调用它们(使用resetGrid();或missingTagGrid();(。

还有一个问题：代码

$(function () {...});

是文档准备功能的缩写：

$(document).ready(function () {...});

等待包括CCD_ 20的文档被加载，然后执行其内部的功能(CCD_ 21部分(。在这种情况下，在<body>内部(文档内部(使用文档就绪不是一个好主意。您应该删除$(function () {部分，但将代码放在处理程序中使用的HTML部分之后(例如，放在<table id="jqGrid"></table>之后(，或者更好地将移到<head>内部。只需再次检查一下我之前在评论中发布的演示，在订单方面包括JavaScript文件、代码、<head>和<body>。

JavaScript语言的一个更重要的方面是：如果可能的话，您应该在另一个外部函数内部定义函数的变量。如果您直接在脚本顶部定义变量，如

<script type="text/javascript">
    var inventoryData = [];
    var missingData = [];
    var mydata;
    var rowMissing = 0;
    var rowTotals;
    var rowMissingMis = 0;
    var rowtotalsMis;
    var isMissing = false;
    var mydata = [];
    var newCompArray = [];
    var machineName = 'bcd44e4c';
    var registeredGrp = 'ACME Lgstks';
</script>

然后定义全局变量。它会与您包含的另一个代码产生潜在冲突。例如，如果定义$ = 0或jQuery = null的方式会破坏jQuery和jQuery插件的代码。另外，重要的是要理解，上面的脚本不仅定义全局变量，还为全局window对象分配了新的属性。现在可以很容易地验证window对象是否具有rowMissing属性，并且该属性的值为0。最好将代码移动到某个函数内部。例如代码

<script type="text/javascript">
$(function () {
    var rowMissing = 0, rowTotals;
    ...
    rowTotals = ($('#jqGrid').getGridParam('records') - 4);
    $('#jqGrid').jqGrid("footerData", "set", {
        Content: "<span style='color:red'>Total Missing:</span>",
        Count: "<span style='color:red'>" + rowMissing + "</span>",
        LastSeen: "Total Inventoried:",
        Name: rowTotals
    });
    ...
});
</script>

好多了。它定义了仅存在于函数内部的局部变量rowMissing和rowTotals，并使用函数内部的变量。这样就不会有冲突。

Answer 2

好的，最大的问题是Telerik的脚本寄存器嵌入了旧版本的Jquery(Jquery-1.7.1.js(。直到你指出我才注意到。这是Telerik秘密做的事情之一，所以很容易被错过。对不良引用、顺序和全局变量的观察很好，也修复了这些问题。谢谢你对奥列格的帮助。。你真的很棒。现在效果很好！