jqGrid отключил остальную часть моей страницы? - PullRequest
3 голосов
/ 05 июля 2011

У меня есть jqGrid, вызывающий действие контроллера (возвращающий JSON в jqGrid).Когда моя сетка заполняется, все, кроме «тела таблицы», отключается, как будто тело таблицы отображается через какое-то модальное окно: пример http://i53.tinypic.com/zimxk5.png

Это мой 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>

Ответы [ 2 ]

5 голосов
/ 05 июля 2011

В jqGrid есть параметр loadui , который позволяет вам управлять блокировкой сетки.Вы можете попытаться использовать loadui:'disable', чтобы убедиться, что это ваша проблема.

Тем не менее поведение, которое вы описываете, кажется мне странным.jqGrid использует <div> как оверлей, и у div есть дополнительный класс с именем 'loading'.Вы должны проверить свой CSS, есть ли у вас конфликт имен и использовать то же имя класса для другой цели.

Кстати, я рекомендую вам просмотреть параметры jqGrid и разметку HTML, которые вы используете.

  • Параметр imgpath не будет использоваться с версии 3.5 jqGrid (см. здесь ).Вы действительно используете ретро-версию jqGrid?Если нет, вы должны удалить imgpath.
  • . Вы должны удалить свойство align: 'left' из colModel, поскольку значение по умолчанию align уже «оставлено» (см. здесь )
  • Вы должны удалить class="scroll" cellpadding="0" cellspacing="0" из <table id="list"> и class="scroll" style="text-align:center;" из <div id="pager">.настройки были необходимы в «ретро» версиях jqGrid, но не сейчас (см. здесь пример HTML).
  • Лучше использовать pager: '#pager' вместо pager: jQuery('#pager').
  • Вместо построения url: gridDataUrl + '?currDate=' + date.toJSON() лучше использовать два параметра: url: gridDataUrl и postData: {currDate: date.toJSON()} или событие лучше postData: {currDate: function() { return date.toJSON(); } }.В случае использования функций внутри postData значение свойства будет оцениваться при каждой загрузке / обновлении сетки (см. здесь для получения дополнительной информации).Если вы хотите создать url вручную, как сейчас, вам нужно использовать encodeURIComponent или jQuery.param : url: 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>

, описанная проблема не существует.

4 голосов
/ 21 декабря 2012

У меня была такая же проблема и я добавил

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

теперь работает

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...