グリッドに「より多く」または「より少ない」データを (即座に) 表示するユーザー設定を実装しています。「More」は、行の高さを増やす必要があります（すべての行の高さが同じになります）。
ユーザーがトグルすると、DataView を更新し、更新された rowHeight 値を使用してグリッドで setOptions を呼び出します。次に、invalidate() と render() を呼び出します。
しかし、行の高さは更新されていません。:(
誰かが解決策をアドバイスできますか? 高さを CSS で直接変更する必要がありますか? もしそうなら、これを行うためのヒントはありますか？
実際、ユーザーの操作に基づいて行の高さを動的に更新することができます。必要なものSlickgrid APIはすべて提供されます。
なぜなら：
css行とセルのレベルでカスタムを動的に適用できます。
作業を開始するための簡単なデモを次に示します。
////////////////////////////////////////////////////////////////////////////////
//example codez re trying to create a grid with rows of dynamic height to
//cater for folks that wanna bung loads of stuff in a field & see it all...
//by violet313@gmail.com ~ visit: www.violet313.org/slickgrids
//have all the fun with it ;) vxx.
////////////////////////////////////////////////////////////////////////////////
modSlickgridSimple=(
function()
{
var _dataView=null;
var _grid=null;
var _data=[];
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var getPaddingItem=function(parent , offset)
{
var item={};
for (var prop in _data[0]) item[prop]=null;
item.id=parent.id+"."+offset;
//additional hidden padding metadata fields
item._collapsed= true;
item._isPadding= true;
return item;
}
//////////////////////////////////////////////////////////////
//this just builds our expand collapse button
//////////////////////////////////////////////////////////////
var onRenderIDCell=function(row, cell, value, columnDef, item)
{
if (item._isPadding==true); //render nothing
else if (item._collapsed) return "<div class='toggle expand'></div>";
else
{
var html=[];
var rowHeight=_grid.getOptions().rowHeight;
//V313HAX:
//putting in an extra closing div after the closing toggle div and ommiting a
//final closing div for the detail ctr div causes the slickgrid renderer to
//insert our detail div as a new column ;) ~since it wraps whatever we provide
//in a generic div column container. so our detail becomes a child directly of
//the row not the cell. nice =) ~no need to apply a css change to the parent
//slick-cell to escape the cell overflow clipping.
//sneaky extra </div> inserted here-----------------v
html.push("<div class='toggle collapse'></div></div>");
html.push("<div class='dynamic-cell-detail' "); //apply custom css to detail
html.push("style='height:", item._height, "px;"); //set total height of padding
html.push("top:", rowHeight, "px'>"); //shift detail below 1st row
html.push("<div>",item._detailContent,"</div>"); //sub ctr for custom styling
//&omit a final closing detail container </div> that would come next
return html.join("");
}
}
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var onRowClick=function(e, args)
{
_dataView.beginUpdate();
if ($(e.target).hasClass("toggle"))
{
var item=_dataView.getItem(args.row);
if (item)
{
if (!item._collapsed)
{
item._collapsed=true;
for (var idx=1; idx<=item._sizePadding; idx++)
_dataView.deleteItem(item.id+"."+idx);
item._sizePadding=0;
}
else
{
item._collapsed=false;
kookupDynamicContent(item);
var idxParent=_dataView.getIdxById(item.id);
for (var idx=1; idx<=item._sizePadding; idx++)
_dataView.insertItem(idxParent+idx, getPaddingItem(item,idx));
}
_dataView.updateItem(item.id, item);
}
e.stopImmediatePropagation();
}
_dataView.endUpdate();
}
//////////////////////////////////////////////////////////////
var gridOptions={ enableColumnReorder: true };
//////////////////////////////////////////////////////////////
var _gridColumns=
[
{
id: "id",
name: "",
field: "id",
resizable: false,
width: 20,
formatter: onRenderIDCell,
},
{id: "title", name: "Title", field: "title", resizable: true},
{id: "duration", name: "Duration", field: "duration", resizable: true},
{id: "pcComplete", name: "% Complete", field: "pcComplete", resizable: true},
{id: "start", name: "Start", field: "start", resizable: true},
{id: "finish", name: "Finish", field: "finish", resizable: true},
{id: "effortDriven", name: "Effort Driven", field: "effortDriven", resizable: true},
];
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
var kookupTestData=(function()
{
for (var i = 0; i < 100; i++)
_data[i] =
{
id: i,
title: "Task " + i,
duration: "5 days",
pcComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0),
//additional hidden metadata fields
_collapsed: true,
_sizePadding: 0, //the required number of pading rows
_height: 0, //the actual height in pixels of the detail field
_isPadding: false,
};
})();
//////////////////////////////////////////////////////////////
//create the detail ctr node. this belongs to the dev & can be custom-styled as per
//////////////////////////////////////////////////////////////
var kookupDynamicContent=function(item)
{
//add some random oooks as fake detail content
var oookContent=[];
var oookCount=Math.round(Math.random() * 12)+1;
for (var next=0; next<oookCount; next++)
oookContent.push("<div><span>oook</span></div>");
item._detailContent=oookContent.join("");
//calculate padding requirements based on detail-content..
//ie. worst-case: create an invisible dom node now &find it's height.
var lineHeight=13; //we know cuz we wrote the custom css innit ;)
item._sizePadding=Math.ceil((oookCount*lineHeight) / _grid.getOptions().rowHeight);
item._height=(item._sizePadding * _grid.getOptions().rowHeight);
}
//////////////////////////////////////////////////////////////
//jquery onDocumentLoad
//////////////////////////////////////////////////////////////
$(function()
{
//initialise the data-model
_dataView=new Slick.Data.DataView();
_dataView.beginUpdate();
_dataView.setItems(_data);
_dataView.endUpdate();
//initialise the grid
_grid=new Slick.Grid("#grid-simple", _dataView, _gridColumns);
_grid.onClick.subscribe(onRowClick);
//wire up model events to drive the grid per DataView requirements
_dataView.onRowCountChanged.subscribe
(function(){ _grid.updateRowCount();_grid.render(); });
_dataView.onRowsChanged.subscribe
(function(e, a){ _grid.invalidateRows(a.rows);_grid.render(); });
$(window).resize(function() {_grid.resizeCanvas()});
});
}
)();
//////////////////////////////////////////////////////////////
//done ;)::-webkit-scrollbar
{
width: 12px;
background-color: #B9BACC;
}
::-webkit-scrollbar-track
{
color: #fff;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb
{
color: #96A9BB;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
body
{
font-family: Arial, Helvetica, sans-serif;
background-color: #131313;
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
}
#grid-simple
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
font-size: 12px;
background-color: #ECEEE9;
}
.toggle
{
height: 16px;
width: 16px;
display: inline-block;
}
.toggle.expand
{
background: url(https://violet313.github.io/assets/expand.gif) no-repeat center center;
}
.toggle.collapse
{
background: url(https://violet313.github.io/assets/collapse.gif) no-repeat center center;
}
/*--- generic slickgrid padding pollyfill ----------------------*/
.dynamic-cell-detail
{
z-index: 10000;
position: absolute;
background-color: #F4DFFA;
margin: 0;
padding: 0;
width: 100%;
display: table;
}
.dynamic-cell-detail > :first-child
{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 12px;
line-height: 13px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.dataview.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Celebio/SlickGrid/master/slick-default-theme.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<div id="grid-simple"></div>200 行未満のコード。
それをいじる！
ちなみに、これは優れたDatatablesが API を通じて(ほぼ)ネイティブに提供する一種のアプローチです。&imo 正しいパターンです。& を使用して自分のものを実装する方法を選択していSlickgridます。しかし、これにはちょっとしたハックが含まれており、いずれにせよ *OP 要件を正確に満たすわけではありません。私が主張することは可能です。
セルごとに動的な行の高さを行うには、同様のトリックを使用しますが、いくつかの副作用にも対処する必要があります:~
我々はしなければならない：
は、 Grid.getItemMetadataコールバック インターフェイスSlickgrid APIを介して行ベースのスタイリングを提供します。次の107 行目のフィドルでは、このインターフェイスの実装を
参照してください。onRenderRow
148 ～ 150行目でも、 Slickgrid Grid.setCellCssStyles API を呼び出して、セルごとのオーバーフロー クリッピングをスタイリングするためにtoを設定するカスタムdynamic-cell cssクラスを追加していることに注意してください。overflowvisible
詳細コンテンツが静的である場合、列のサイズ変更は面倒です。
列幅の変更 (フロー テキストまたはウォットノット) に対応
する
詳細コンテンツには、いくつかの作業が必要です。それに応じて、パディング行を動的に追加および削除する必要があります。(66 行目から)次の fiddleのand関数を
参照してください: fiddle with it!addPaddingtrimPadding
ここでもいくつかの作業があります。上に並べるか下に並べるかに関係なく、パディングが親の下に連続して残るようにする必要があります。この次の fiddle の
136 行目を参照しcomparerてください: fiddle with it!
ほぼワンライナーです。パディングの場合は、比較を親に委譲します。仕事が終わりました。次の fiddle の
192 行目を参照しpcFilterてください: fiddle with it!
わーい！これは、500 行未満の、かなり読みやすく、自由にコメントされたカスタム JavaScript のサイズ変更、並べ替え、およびフィルタリング
ですinput-range-slider。
基本的なことだけを取り上げました。、、〜には、現在の要件を超えた
選択/編集可能な側面全体があります（悲しいです）。また：Slickgrid
SO参照禁止ポリシーのガイドラインにもかかわらず、これについては、合理的に回答に絞ることができる以上のことを言う必要があります。このすべてのことについてもっと知りたいと思っている人は誰でもここに行くことができます。
これが最後の楽しい例です。上記の機能をすべて採用していますが、ご覧のとおり、expando-rowsを捨てて、 2 つの動的コンテンツ フィールドがあります。また、参考までに、この例では、ネイティブの
列オプションコールバック
の代わりにイベントを生成するためにMutationObserversを使用しています。onPostRenderSlickgridasyncPostRender
そして、それがあります。- への道のりDataView-like Slickgrid extension-mod; そして、素敵な Slickgrid コードで恐ろしいハックスに頼る必要はありません。ヤッピー;）
うおっ！この投稿は数年前のものです。現在メンテナンスされていない元のプロジェクトのフォークがいくつかあることがわかりました。すなわち: https://github.com/6pac/SlickGrid
これはcssを介して行うことができます。slick.grid.cssファイルを見て、そこで必要な変更を加えます。
を見てください
.slick-row.ui-widget-content、.slick-row.ui-state-activeクラス
また
rowHeightSlickGridのプロパティを使用できます
グリッドオプションを見てください
行の高さを拡張できる関数をグリッドに追加しました。
var normalHeight = 25;
var expandedHeight = 100;
var columns = [
{id: "col1", name: "Column 1", field: "col1", expanded: false},
{id: "col2", name: "Column 2", field: "col2"}
];
var options = {
rowHeight: normalHeight
};
var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid(element, dataView, columns, options);
grid.updateOptions = function(expanded){
var columns = grid.getColumns();
if(!expanded){
options['rowHeight'] = normalHeight;
columns[0]['expanded'] = false;
}else{
options['rowHeight'] = expandedHeight;
columns[0]['expanded'] = true;
}
grid.setOptions(options);
grid.setColumns(columns);
grid.invalidate();
grid.render();
}
うまく機能しているようです。うまくいけば、これは誰かの役に立ちます。