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

程序员文章站 2022-03-30 19:13:41

...

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


<script type="text/javascript">
dataGrid = $('#dataGrid').datagrid({
	url: '${path }/sysLog/orderGrid',
	fit: true,
	striped: true,
	pagination: true,
	singleSelect: true,
	rownumbers: true,
	idField: 'id',
	pageSize: 20,
	pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
	columns: [[/*
	
	*
	*此处省略n多列
	
	*/{
		width:'800',
		title: '内容',
		field: 'optContent',
		formatter : function (value) {
			return '<span title="'+value+'">'+value+'</span>';
		}
	}]],
	toolbar : '#toolbar'
});
</script>

<body class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'center',border:false">
    <table id="dataGrid" data-options="fit:true,border:false"></table>
</div>

<div id="toolbar" style="display: none;">
    <form id="searchForm">
        <table>
            <tr>               
                <th>创建时间:</th>
                <td>
                    <input name="startDate" placeholder="点击选择时间" 
onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})" readonly="readonly" style="width:80px"  />
                    至
                    <input  name="endDate" placeholder="点击选择时间" 
onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd'})" readonly="readonly" style="width:80px" />
                </td>

                <td>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">查询</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="cleanFun();">清空</a>
                </td>
            </tr>
        </table>
    </form>

</div>
</body>

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

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

二、左侧列冻结

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

左侧列冻结，效果图：

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