error $(“#list”)。jqGrid不是mvc3 razor中的函数

时间:2012-11-29 06:56:51

标签: asp.net-mvc-3

我已经在javascript中为JQgrid编写了一个函数。我在JSFiddle和JSfiddle中检查了它,它告诉我“你的javascript代码是有效的”。但是当我在mvc3 razor中运行它时,查看网格不显示它给出了我在萤火虫中犯了一个错误  TypeError: $("#list").jqGrid不是函数

下面是我的视图文件代码     @model CBS.Models.Gledg

@{
ViewBag.Title = "JV";
}

<h2>JV</h2>
<link href="/Content/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/site.css" rel="stylesheet" type="text/css" /> 

<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui.multiselect.js")"type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/jquery.jqGrid.locale-en-4.1.2.js")" type="text/javascript"></script> 
 <script src="@Url.Content("~/Scripts/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script> 


<script src="/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> 
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
 $(document).ready(function () {
    $(function () {
    $("#list").jqGrid({
        url: '/Home/GetJVLedg()/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Code', 'Remarks', 'Debit'],
        colModel: [
      { name: 'Code', index: 'Code', width: 40, align: 'left' },
      { name: 'Remarks', index: 'Remarks', width: 240, align: 'left' },
      { name: 'Debit', index: 'Debit', width: 200, align: 'left'}],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Code',
        sortorder: "desc",
        viewrecords: true,
        //imgpath: '/scripts/themes/coffee/images',
        caption: 'Gledg'
       });
   }); 
  }); 


  </script>
  <fieldset>
 <legend> Journal Voucher</legend>
  <div id="txtArea">
 <label>
 Voucher NO
 </label>
 <input type="text" id="" name="VID" maxlength="20" PlaceHolder="Voucher No..." />
  <label>Remarks</label>
 <input type="text" id="" name="Rem" maxlength="150" PlaceHolder="Remarks..." />
 <label>Voucher Date</label>
 <input type="Text" id="datepicker" name="VDate" />

 </div>


   <table id="list" class="scroll"></table>

  <div id="pager" class="scroll" style="text-align:center;"></div>




    </fieldset>

我搜索了很多,但找不到可以解决我问题的解决方案。帮助我

1 个答案:

答案 0 :(得分:0)

将代码放入其中  $(document).ready(function (){}) 然后它会工作。 并确保您已提及所有脚本和css引用链接以获取JQGrid的头部