easyui datagrid设置行高 收集一些方法

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 属性 用于改变行样式
————————————————