fixRowHeight: function(index){}
网上说的设置rowStyler,来改变行高,经过试验,并不能改变行高。只能改变行的颜色。
下面是行之有效的方案:
首先自己用一个div包围这个<table></table> 。然后设置根据这个div的id+里面的table的样式,用更高的
css优先级来覆盖datagrid默认的行高。
代码如下
<style>
.grid-panel .datagrid-btable tr{height: 40px;}
</style>
<div class="grid-panel" style="width: 100%;height: 100%">
<table id="dg-worker"></table>
</div>
id=dg-worker 的table的行高成功被设置成40px. 满足一般的要求
代码
1.利用rowStyler
rowStyler: function(index,row){
if (row.b1_IsLimited=='1'||row.b1_PwdIsLimited=='1' ){
return 'color:red';
}
}
2.formatter函数
formatter :function(value, row, index){
var btn;
if(value){
btn="锁定"
}else{
btn="正常"
}
return btn;
}
easyUI设置行高
/*表头高度*/
.datagrid-header-row{
height: 35px;
}
/*表格主体行高*/
.datagrid-row {
height: 25px;
}
Easyui改变单元格背景颜色和字体颜色
styler:改变单元格样式
formatter:改变显示的内容
//改变单元格背景颜色实例
{
field: 'deadline', title: '排班截止日期', align: 'center', halign: 'center', fixWidth(0.15),
styler: function (value, row, index) {
var date2 = new Date().getTime();
var date1 = Date.parse(value);
var interval = (date1 - date2) / (24 * 3600 * 1000);
if (interval < 30) { return 'background-color:red;' }
else if (interval > 30 && interval < 60) { return 'background-color:orange;' }
}, formatter: function (value, row, index) { return formatDate(value, "yyyy-MM-dd"); }
},
//改变内容
{
field: 'Status', title: '排班状态', align: 'center', halign: 'center', fixWidth(0.15),
formatter: function (value, row, index) {
if (value == "未排班") {
return "<span style='color:red;'>" + value + "</span>"
} else if (value == "部分排班") {
return "<span style='color:orange;'>"+value+"</span>"
} else {
return "<span>" + value + "</span>"
}
}
},
<div id="table">
<table id="order"></table>
</div>
$("#order").datagrid({
iconCls : 'icon-edit',
fitColumns:true,//填充
fit : true,//自适应
pageSize : 20,//每页显示的记录条数,默认为10
style : {
padding : '8 8 10 8'
},
singleSelect : true,
method : 'get',
url : '',
onLoadError : function() {
alert("提示信息", "数据信息错误");
return;
},
loadMsg :null,
pagination : true,
rownumbers : true,
title : "",
//sortOrder:'desc',
nowrap:false,
columns : [ [ {
field : 'time',
title : '',
align : 'center',
width : 250,
formatter:
function(value,row,index){
return '<span style="font-size:20px">'+value+'</span>';//改变表格中内容字体的大小
}
}
] ]
});
<style>
//更改表格标题文字大小
.datagrid-header span { font-size: 20px !important; } .datagrid-header-row { /* background-color: #e3e3e3; */ /* color: #111 */ Height: 50px; }
//更改表格中单元格行间距
#table .datagrid-btable tr{height: 35px;}
//更改表格标题的行间距
.panel-title {
margin-top: 20px;
margin-bottom: 20px;
font-size: 30px;
color: inherit;
}
</style>
行高设置
datagrid中没有专门设置行高的属性,所以需要通过修改easyui.css样式来修改行高。
方法:在 easyui.css中搜索.datagrid-row属性,将默认的行高height:25px修改为想要的高度,即可。
.datagrid-row {
height: 42px;
text-align:center;
}
文字超宽换行
在<table>中设置nowrap:false 换行
<table id="dg" class="easyui-datagrid"
data-options="pagination:true,
singleSelect:true,
fitColumns:true,
nowrap:false">
注意datagrid行中设置fitColumns:true的单元格无法换行。 <th data-options="field:'contractDate',fitColumns:true">登记时间</th>
easyUI datagrid 设置表格行高(改后表格高度不能自适应行的高度,出现滚动条)
onLoadSuccess: function(data){
var panel = $(this).datagrid('getPanel');
var tr = panel.find('div.datagrid-body tr');
tr.each(function(){
var td = $(this).children('td[field="userNo"]');
td.children("div").css({
//"text-align": "right"
"height": "28px"
});
});
}
easyUI datagrid 改变表格高度(改变的也是行高,这个改变后表格会自适应高度)
.datagrid-header-row,.datagrid-row {
height: 32px;
}
easyUI datagrid 提供了rowStyler 属性 用于改变行样式
————————————————