87,993
社区成员
发帖
与我相关
我的任务
分享easyui datagrid 设置行高
一个页面里，有多个datagrid，而且有的是可以appendRow的，如何单独为每一个datagrid设置行高？下面这个代码是全局的。
.datagrid-header-row .datagrid-cell {
display: flex;
justify-content: center;
align-items: Center;
height: 42px;
}
.datagrid-row {
height: 42px;
}
...全文
请发表友善的回复…
发表回复
aiit 2019-05-24
- 打赏
- 举报
找到方法了，用 class 嵌套就行，只想着靠代码解决了
aiit 2019-05-23
- 打赏
- 举报
用下面这段代码，好像也有问题。
onLoadSuccess: function () { $(this).datagrid('getPanel').find('.datagrid-header-row,.datagrid-row').css('height', '42px'); }
Hello World, 2019-05-23
- 打赏
- 举报
试下用rowStyler:
$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});
aiit 2019-05-23
- 打赏
- 举报
感谢回复，这个在普通的Datagrid里没有问题，但在 CellEditing 好像就不起作用了。
Hello World, 2019-05-23
- 打赏
- 举报
把背景色改成高就好啦，示例逐行增高：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin: 20px 0;"></div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width: 700px; height: 650px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get',
rowStyler: function(index,row){
return 'height:'+(index*5+22) + 'px;';
}">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
</html>
aiit 2019-05-23
- 打赏
- 举报
