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

怼烎@ 2022-05-16 07:06 390阅读 0赞

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

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

![70][]

## 二、左侧列冻结 ##

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'
    });

左侧列冻结，效果图：

![70 1][]

[70]: /images/20220516/a34c70c92364470790ae99d0bd8f50ac.png
[70 1]: /images/20220516/35c5f91106f7481f95b35f63dfee9119.png