2015-07-15 2 views
2

Я использую строку, охватывающую в jqgrid, как описано в следующем ответе: Jqgrid - grouping row level dataморозильных Колонны с Роу Spanning

Проблема, которую я имею, когда я установить столбец с размахом строки на нем, чтобы замороженный = верно, наложенная надпись теряет строку, охватывающую так, чтобы наложение не охватывало всю таблицу, и строки не совпадали с соответствующими данными. Есть ли способ гарантировать, что замороженные столбцы, которые будут отображаться, будут использовать ту же строку, что и исходная таблица?

Я создал пример: http://jsfiddle.net/zmmpaaom/

И потому, что мне нужно иметь некоторый код здесь:

$(function() { 
    'use strict'; 
    var mydata = [ 
      { id: "1", country: "USA", state: "Texas",  city: "Houston",  attraction: "NASA",    zip: "77058", attr: {country: {rowspan: "5"}, state: {rowspan: "5"}} }, 
      { id: "2", country: "USA", state: "Texas",  city: "Austin",  attraction: "6th street",   zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "3", country: "USA", state: "Texas",  city: "Arlinton",  attraction: "Cowboys Stadium", zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "4", country: "USA", state: "Texas",  city: "Plano",   attraction: "XYZ place",   zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "5", country: "USA", state: "Texas",  city: "Dallas",  attraction: "Reunion tower",  zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "6", country: "USA", state: "California", city: "Los Angeles", attraction: "Hollywood",   zip: "65456", attr: {country: {rowspan: "4"}, state: {rowspan: "4"}} }, 
      { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "8", country: "USA", state: "California", city: "San Diego",  attraction: "See world",   zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} }, 
      { id: "9", country: "USA", state: "California", city: "Anaheim",  attraction: "Disneyworld",  zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} } 
     ], 
     arrtSetting = function (rowId, val, rawObject, cm) { 
      var attr = rawObject.attr[cm.name], result; 
      if (attr.rowspan) { 
       result = ' rowspan=' + '"' + attr.rowspan + '"'; 
      } else if (attr.display) { 
       result = ' style="display:' + attr.display + '"'; 
      } 
      return result; 
     }; 

    $("#list").jqGrid({ 
     datatype: 'local', 
     data: mydata, 
     colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'], 
     colModel: [ 
      { name: 'country', width: 70, align: 'center', cellattr: arrtSetting, frozen: true }, 
      { name: 'state', width: 80, align: 'center', cellattr: arrtSetting, frozen: true }, 
      { name: 'city', width: 90 }, 
      { name: 'attraction', width: 120 }, 
      { name: 'zip', index: 'tax', width: 60, align: 'right' } 
     ], 
     cmTemplate: {sortable: false}, 
     width: 250, 
    shrinkToFit: false, 
     rowNum: 100, 
     //rowList: [5, 10, 20], 
     //pager: '#pager', 
     gridview: true, 
     hoverrows: false, 
     autoencode: true, 
     ignoreCase: true, 
     viewrecords: true, 
     height: '100%', 
     caption: 'Grid with rowSpan attributes', 
     beforeSelectRow: function() { 
      return false; 
     } 
    }); 

    $("#list").jqGrid('setFrozenColumns'); 
    //$("#pager_left").hide(); 
}); 

ответ

0

Вы демка использует старый jqGrid 4,6, которые имеют фиксированную высоту строк замороженных столбцов. Существуют свободные версии jqGrid jqGrid (основанные на jqGrid 4.7), которые я разрабатываю начиная с конца прошлого года. Версия 4.9 включает в себя множество модификаций замороженных столбцов. Теперь высота каждой строки замороженных столбцов будет задаваться отдельно в зависимости от высоты соответствующей строки основных данных, поэтому описанная вами проблема будет автоматически исправлена.

Простая модификация URL-адресов в демо, которое вы используете (см the wiki) к следующему

<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.9.0/css/ui.jqgrid.css"> 
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/i18n/grid.locale-en.js"></script> 
<script src="//cdn.jsdelivr.net/free-jqgrid/4.9.0/js/jquery.jqgrid.min.js"></script> 

решает вашу проблему. См. Модифицированную демоверсию: http://jsfiddle.net/OlegKi/zmmpaaom/5/

Смежные вопросы