我们正在实现用户偏好以（立即）在网格上显示“更多”或“更少”数据。“更多”应该增加行高（每行都具有相同的增加高度）。
当用户切换时，我们更新我们的 DataView，并使用更新的 rowHeight 值调用网格上的 setOptions。然后我们调用 invalidate() 和 render()。
但是行高没有被更新。:(
有人可以提出解决方案吗？我们应该直接通过 CSS 改变高度吗？如果是这样，有什么建议吗？
问问题
17324 次
3 回答
17
事实上，可以根据用户交互动态更新行高。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 要求；我声称这是可能的。
要对每个单元格进行动态行高，我们采用了类似的技巧，但我们还必须处理一些副作用：~
样式化掉行分隔
我们必须：
- 逃脱每个单元格溢出剪辑
- 删除不需要的行stipeyness
- 删除行边框
通过Grid.getItemMetadata回调接口Slickgrid API提供基于行的样式。在下一个 fiddle 中，在第 107 行，查看这个接口的实现：
fiddle with it！onRenderRow
另请注意，在第 148-150 行，我调用Slickgrid Grid.setCellCssStyles API 来添加一个自定义dynamic-cell css类，该类将 设置为overflow以visible消除每个单元格溢出剪辑的样式。
列调整大小
如果详细内容是静态的，则调整列大小是一个问题。
响应列宽变化的
详细内容（流动文本或 wotnot）需要一些工作。填充行需要相应地动态添加和删除。请参阅（从第 66 行开始）下一个小提琴中的and函数：
摆弄它！addPaddingtrimPadding
排序
这里也有一些工作要做。我们需要确保无论我们是向上还是向下排序，填充保持在父级下方。请参阅下一个小提琴中的comparer第136 行：
摆弄它！
过滤
几乎是一条线：如果它是填充，则将比较委托给父级。任务完成。请参阅下一个小提琴中的pcFilter第192 行：
摆弄它！
耶！那是在 500 行以下的相当清晰、注释丰富的自定义 javascript 中调整大小、排序和过滤。事实上，我已经看到了某些input-range-slider带有更多代码行的花哨的 pollyfills ;)
acu
注意事项
我只介绍了基础知识。，，〜有整个可选择/可编辑的方面Slickgrid，这超出了我目前的要求（sry）。
还：
- 仅示例代码；未准备好生产。你已经被警告等等等等 =)
- 示例似乎适用于大多数现代浏览器；我/未/尝试过使用 iE；版本 >= 11 可能没问题..
更多信息
关于这一点还有很多要说的，而不是可以合理地挤进SO答案——尽管有无参考政策指南。任何有兴趣了解所有这些东西的人都可以去这里我会更详细地介绍。
最后一个例子
这是最后一个有趣的例子。它采用了上述所有功能，但可以看出，我已经放弃了expando-rows并且有两个动态内容字段。另外，仅供参考，此示例使用MutationObservers来生成onPostRender事件，以替代本Slickgrid机
asyncPostRender 列选项回调：
摆弄它！
我们终于得到它了。- 一些通往 a 的道路DataView-like Slickgrid extension-mod；并且无需对可爱的 Slickgrid 代码诉诸可怕的恶作剧。伊皮；）
喔喔！这篇文章已有几年历史了；我现在看到当前未维护的原始项目有几个分支。即： https ://github.com/6pac/SlickGrid
于 2015-04-01T20:15:10.073 回答
6
您可以通过 css 执行此操作。查看该slick.grid.css文件，并在那里进行所需的更改。
看看
.slick-row.ui-widget-content,.slick-row.ui-state-active类
或者
您可以使用rowHeightSlickGrid 的属性
看看网格选项
于 2012-05-18T14:43:22.990 回答
2
我在网格上附加了一个函数，使我能够扩展行高：
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();
}
它似乎工作得很好，希望这对某人有帮助。
于 2016-02-18T16:42:44.513 回答