为什么我无法在 HTML 上呈现 jqGrid答案

【问题标题】：Why am I unable to render a jqGrid on HTML为什么我无法在 HTML 上呈现 jqGrid
【发布时间】：2013-01-02 11:00:33
【问题描述】：

我正在尝试在 HTML 上呈现 jqGrid，但遇到了一些错误。这是完整的代码。我收到一个运行时错误，并且网格没有加载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

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

    <link rel="stylesheet" type="text/css" href="/Scripts/themes/steel/grid.css" title="steel"media="screen" />

    <link href="/Scripts/themes/jqModal.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>
    <script type="text/javascript">

    function() {

     var lastsel2 =
jQuery("#tempset").jqGrid({
    datatype: "local",
    height: 260,
    width:300,
       colNames:[ ' ','Rate *C/Min','Value *C', 'Hold Time min', 'Run Time min'],
       colModel:[
           {name:'id',index:'id', width:60, sorttype:"int", editable: true},
           {name:'rate',index:'rate', width:40,editable: true,editoptions:{size:"20",maxlength:"30"}},
           {name:'value',index:'value', width:40, editable: true,editoptions: {size:"20",maxlength:"30"}},
           {name:'holdtime',index:'holdtime', width:50, editable: true,editoptions:{size:"20",maxlength:"30"}},        
           {name:'runtime',index:'runtime', width:100,editable: false}        
       ],
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            jQuery('#tempset').jqGrid('restoreRow',lastsel2);
            jQuery('#tempset').jqGrid('editRow',id,true);
            lastsel2=id;
        }
    },
    //editurl: "server.php",
    caption: "Temperature Settings",
    pager: "#tempset_pager",
});

var mydata2 = [
        {id:"initial",rate:"",value:"50",holdtime:"60",runtime:"60"},
        {id:"Ramp 1",rate:"15",value:"67 ",holdtime:"5",runtime:"66.133"},
        {id:"Ramp 2",rate:"20",value:"89",holdtime:"10",runtime:"77.233"},
        {id:"Ramp 3",rate:"25",value:"123",holdtime:"3",runtime:"81.593"}
        ];

for(var i=0;i < mydata2.length;i++)
{
//alert(mydata2[i].id);
 jQuery("#tempset").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
 }

 jQuery("#tempset").navGrid("#tempset_pager", {});

 }

</script>
</head>


<body>
<div style = "margin-left:240px; top: 15px; position:absolute;">
 <table id="tempset"></table>
        <div id="tempset_pager"> </div>
 </div>


</body>
</html>

【问题讨论】：

这可能不是唯一的错误，但您已经在其中包含了两次 jQuery 引用。最有可能的是，JavaScript 优雅地失败并停止执行剩余的脚本。
删除/注释掉对 jquery-1.3.2.min.js 的引用，看看它是否有效。

标签： jquery asp.net html asp.net-mvc jqgrid

【解决方案1】：

以下可能会导致问题：

对 jQuery 的多次引用。
function() { ... -> 这是一个语法错误。缺少函数名。
pager: "#tempset_pager", -> 尾随逗号会在 IE 中出错

【讨论】：

【解决方案2】：

替换这个

function() {

有了这个

$(function(){

另外，替换var lastsel2 = 使用var lastsel2; 或var lastsel2 = ''; 再试一次。

【讨论】：

【解决方案3】：

更换你的

function() {

有了这个

$(function(){

并在脚本代码的末尾添加如下所示的右大括号

);

也替换

var lastsel2 =

与

var lastsel2;

注意：进行上述更改后，它对我有用

【讨论】：