2011-07-05 15 views
3

コントローラアクションを呼び出すjqGridがあります(JSONをjqGridに戻しています)。これは example http://i53.tinypic.com/zimxk5.pngjqGridはページの残りの部分を無効にしましたか?

グリッドを初期化するために私のJSコードであり、HTML::

私のグリッドが読み込まれます場合は、テーブル本体は、いくつかのモーダルウィンドウを経由して示されているかのよう は、「テーブル本体」以外のすべては、無効になります
<head> 
    <title>Insert</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> 
    <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" />  
    <script src="/Scripts/EditorHookup.js" type="text/javascript"></script>  
    <script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script> 
    <script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var gridimgpath = '/content/themes/base/images'; 
     var gridDataUrl = '/Home/JsonPosloviForDate'; 
     var jsonDate = "\/Date(1309816800000)\/";  
     var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));  
     $(function() { 
     jQuery("#list").jqGrid({ 
      url: gridDataUrl + '?currDate=' + date.toJSON(), 
      datatype: "json", 
      mtype: 'GET', 
      colNames: ['Šifra posla', 'Vrsta posla', 'Partner', 'Opis', 'Broj sati'], 
      colModel: [ 
       { name: 'SifPosao', index: 'SifPosao', width: 50, align: 'left' }, 
       { name: 'kratVrstaPosao', index: 'kratVrstaPosao', width: 100, align: 'left' }, 
       { name: 'nazPartner', index: 'nazPartner', width: 100, align: 'left' }, 
       { name: 'opis', index: 'opis', width: 100, align: 'left' }, 
       { name: 'brSati', index: 'brSati', width: 100, align: 'left' }, 
        ], 
      rowNum: 20, 
      rowList: [10, 20, 30], 
      imgpath: gridimgpath, 
      height: 'auto', 
      width: '700', 
      pager: jQuery('#pager'), 
      sortname: 'SifPosao', 
      viewrecords: true, 
      sortorder: "desc", 
      caption: "Poslovi" 
     }); 
     }); 
    </script> 

</head> 
<body> 
...  
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
... 
</body> 

答えて

5

グリッドのブロック方法を管理できるjqGridのパラメータがloaduiです。 loadui:'disable'を使用して、問題があることを確認することができます。

しかし、あなたが記述する動作は私が奇妙に思えます。 jqGridは<div>をオーバーレイとして使用し、divには「loading」という名前の追加クラスがあります。名前の競合があるかどうかを確認し、別の目的で同じクラス名を使用する必要があります。

ただし、使用するjqGridパラメータとHTMLマークアップを確認することをお勧めします。

  • パラメータimgpathはjqGridのバージョン3.5(hereを参照)ので、使用されないであろう。あなたは本当にjqGridのレトロ版を使用していますか?そうでない場合はimgpathを削除する必要があります。
  • alignのデフォルト値がすでに「左」されているため、あなたは
  • hereを参照)colModelからプロパティalign: 'left'を削除する必要がありますあなたは<div id="pager">から<table id="list">class="scroll" style="text-align:center;"からclass="scroll" cellpadding="0" cellspacing="0"を削除する必要があります。 jqGridの "レトロ"バージョンでは設定が必要でしたが、現在はそうではありません(here HTMLの例を参照)。
  • pager: jQuery('#pager')の代わりにpager: '#pager'を使用することをお勧めします。
  • を構築する代わりに、url: gridDataUrlpostData: {currDate: date.toJSON()}の2つのパラメータを使用する方が良いでしょう。より良いイベントはpostData: {currDate: function() { return date.toJSON(); } }です。 postDataの内部で関数を使用する場合、プロパティの値はすべてのグリッドロード/リフレッシュ時にと評価されます(詳細はhereを参照してください)。あなたが手動で今のようにurlを手動で作成したい場合は、encodeURIComponentまたはjQuery.paramurl: gridDataUrl + '?currDate=' + encodeURIComponent(date.toJSON())またはurl: gridDataUrl + '?' + jQuery.param({currDate:date.toJSON()})を使用する必要があります。
  • evalを使用しないでください。

を更新:私はあなたがjqGrid CSSを送る例では見つかりませんでした。ブロックをすべてのCSSおよびJavaScriptファイルで置き換えた場合、次の行になります。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js"></script> 

上記の問題はありません。

+0

初の作品

<link rel="stylesheet" type="text/css" href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" /> 

を追加した、総合的な答えてくれてありがとう。 不運にも、私は運がなかった。 私はあなたが言ったことすべてをやった。 HTML IDを変更し、その他のCSSはすべて削除しました。 私はloaduiを使って実験しましたが、違いはありません。 IE9、FF、Chromeでの動作は同じです。( ページャが有効になることがありますが、次のページに移動するとすべてがロックされ、すべてがロックされます。 Firebugにはバグはありません。コンソールのエラー、GETリクエストが適切なJSONを返しています(実際にレンダリングされます)。 – igorludi

+0

@ user819023:あなたはページをオンラインにしてURLを投稿すれば、それを見て理由を見つけようとします。 'loadui: 'disable''を使用しても、最初のグリッドデータの読み込みは、オーバーレイよりもjqGridのものではないでしょうか? – Oleg

+0

私はそれをhttp://161.53に展開しました。 .18.3:81/temp (私はSite.cssをSite123.cssに変更しました(存在していません)。 – igorludi

4

私は同じ問題を抱えていたし、今すべての

関連する問題