easyUI表头冻结和左侧列冻结（frozenColumns columns）

一、表头冻结（关键fit:true，使用columns）

    



    

        

            
               
                
创建时间:
                

                    
                    至
                    
                

                

                    查询
                    清空
                
            
        
    

easyUI横向、纵向滚动条，自适应效果图：

二、左侧列冻结

dataGrid = $('#dataGrid').datagrid({
	url : '${path }' + '/order/dispatch/dataGrid',
	fit:true,
	striped : true,
	rownumbers : true,
	pagination : true,
	singleSelect : true,
	idField : 'id',
	sortName : 'create_date',
	sortOrder : 'desc',
	pageSize : 100,
	pageList : [ 10,15, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
	rowStyler : function(index, row) {
		var isOverdue = row.isOverdue;
		//逾期标红
		if (isOverdue == 1){
			return 'background-color:#FF2D2D;color:#FFF';
		}
	},
	frozenColumns: [ [/*
	此处省略n列
	*/ {
		width: '60',
		title: '客户姓名',
		field: 'userName',
		formatter: function (value) {
			return addTitle(value);
		}
	},{
		width : '100',
		title : '楼盘名称',
		field : 'housename',
		formatter : function(value){
			return addTitle(value);
		}
	}]],
	columns : [ [ /*
	此处省略n列
	*/{
		width : '60',
		title : '录入人',
		field : 'createUser',
		formatter : function(value){
			return addTitle(value);
		}
	}] ],
	onLoadSuccess:function(data){
		$('.role-easyui-linkbutton-edit').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
		$('.role-easyui-linkbutton-ok').linkbutton({text:'置顶',plain:true,iconCls:'icon-ok'});
		$('.role-easyui-linkbutton-cancel').linkbutton({text:'取消置顶',plain:true,iconCls:'icon-cancel'});
		//改变表头颜色
		$(".datagrid-header-row td").each(function () {
			var field = $(this).attr("field");
			if (field == 'followInfo' ||  field == 'dispatchInfo' ||  field == 'orderInfo' ||  field == 'failInfo'){
				$(this).css("background","#FFD306");
			}
		});
	},
	toolbar : '#toolbar'
});

左侧列冻结，效果图：