2012-04-13 46 views
3

特に、単純なサブグリッドであり、 "グリッドをサブグリッドとする"ではありません。jqGridサブグリッドでヘッダーの配置を設定するにはどうすればよいですか?

私はさまざまな方法を試みましたが、うまくいかないようです。

subGridBeforeExpandに接続すると、テーブルが表示されず、ヘッダーを選択してCSSを設定できません。

subGridRowExpandedに接続すると、サブグリッドはレンダリングされません。

subGridModelalignプロパティは、セル値にのみ影響します。サブグリッドとTreegridsで少なすぎるコールバックがあることを、

subGrid: true, 
subGridUrl: myUrl,      
subGridModel: [{ 
    name: ["Item", "Qty"], 
    width: ["200", "100"], 
    align: ["right", "right"], 
    param: ["Id"] 
}] 

答えて

2

あなたが正しいです:

は、ここに参照のための私のモデルです。それにもかかわらず、私はあなたの質問を非常に興味深い挑戦(私から+ 1)を見つけたので、私は回避策が見つかりました。

次の操作を行うことができます

var $grid = $("#grid"), sid; 
$grid.jqGrid({ 
    //... your other settings 
    subGrid: true, 
    serializeSubGridData: function(p) { 
     sid = p.id; // save id from the last request 
     return p; 
    }, 
    ajaxSubgridOptions: { 
     complete: function (sxml) { 
      var ts = $grid[0], $subgridHeaders; 
      if (ts.p.subgridtype === "xml") { 
       ts.subGridXml (sxml.responseXML, sid); 
      } else { 
       ts.subGridJson($.jgrid.parse(sxml.responseText), sid); 
      } 
      // now the subgrid is completed and we can modify 
      // style of subgrid headers 
      $subgridHeaders = $('#' + $.jgrid.jqID(ts.id + '_' + sid)) 
       .find("th.ui-th-subgrid"); 
      // now we can do some custom actions: 
      $($subgridHeaders[0]).css("text-align", "left"); 
      $($subgridHeaders[1]).css("text-align", "right"); 
     } 
    } 
}); 

あなたがサブグリッドの展開した後、次のようになります。デモhereすることができます:私はCSSセレクタで解決しました

enter image description here

+0

いつものように、Oleg to the rescue。ありがとう! – IronicMuffin

+0

@IronicMuffin:あなたはようこそ! – Oleg

0

をたとえば、第7列のヘッダーを中央に配置する:

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th 
{ 
    text-align: center; 
} 

または列全体を中央にする:

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th, 
#GRIDID .subgrid-data td:first-child + td + td + td + td + td + td 
{ 
    text-align: center; 
} 
関連する問題