EasyUi js 加载数据表格DataGrid

版权声明：小生不才，能帮助众人皆可。 https://blog.csdn.net/qq_23126581/article/details/82345503

jsp页面代码：

<div data-options="region:'center',split:true,title:''">
        <table id="dataGrid"></table>
</div>

注意：自己在官网下载easyui的js和css样式包然后页面引用。

js加载：

<script type="text/javascript">
	var dataGrid;
	var orders = '${USER_SESSION.funIds}';
	$(function() {
		
		dataGrid = $('#dataGrid').datagrid({
			loadMsg: '数据加载中....',
			url: '${pageContext.request.contextPath}/sdCstmInfoController.do?cstmGrid2',
			fit: true,
			fitColumns: true,
			border: false,
			pagination: true,
			idField: 'id',
			pageSize: 10,
			pageList: [10, 20, 50, 100, 200],
			sortName: 'id',
			sortOrder: 'desc',
			nowrap: false,
			rownumbers: true,
			border: true,
			striped: true,
			singleSelect: true,
			checkOnSelect: false,
			selectOnCheck: false,
			frozenColumns: [[{
				field: 'id',
				title: '编号',
				width: 150,
				checkbox: true
			}, {
				field: 'customName',
				title: '姓名',
				width: 100,
				sortable: true,
				formatter: function(value, row) {
					 return "<strong><a style='color:#1E90FF;font-weight:bold' href='#' onclick='doSomething("+row.id+")'>"+value+"</a></strong>";								
				}
			},{
				field: 'sex',
				title: '性别',
				width: 50,
				sortable: true,
				formatter: function(value, row) {
					if ("1" == value) return "<strong style='color:blue'>男<strong>";
					else if ("2" == value) return "<strong style='color:green'>女<strong>";
				}
			}, {
				field: 'mingZu',
				title: '民族',
				width: 60,
				sortable: true
			},  
			{
				field: 'politicalType',
				title: '政治面貌',
				width: 60,
				sortable: true,
				formatter: function(value, row) {
					if(value == 1) return "<strong >中共党员</strong>";
					else if(value ==2) return "<strong >中共预备党员</strong>";
					else if(value ==3) return "<strong >共青团员</strong>";	
					else if(value ==4) return "<strong >民革党员</strong>";	
					else if(value ==5) return "<strong >民盟盟员</strong>";	
					else if(value ==6) return "<strong >民建会员</strong>";	
					else if(value ==7) return "<strong >民进会员</strong>";	
					else if(value ==8) return "<strong >农工党党员</strong>";	
					else if(value ==9) return "<strong >致公党党员</strong>";	
					else if(value ==10) return "<strong >九三学社社员</strong>";	
					else if(value ==11) return "<strong >台盟盟员</strong>";	
					else if(value ==12) return "<strong >无党派人士</strong>";	
					else if(value ==13) return "<strong >群众</strong>";
				}
				
			},
			{
				field: 'joinPartyDate',
				title: '入党时间',
				width: 80,
				sortable: true
			},
			{
				field: 'partyDuties',
				title: '党内职务',
				width: 60,
				sortable: true
			},
			{
				field: 'suoZaiDanZhiBuName',
				title: '所在党支部',
				width: 100,
				sortable: true
			},
			{
				field: 'idCard',
				title: '身份证',
				width: 120,
				sortable: true
			}, 
			{
				field: 'customTel',
				title: '联系电话',
				width: 80,
				sortable: true
			}, {
				field: 'cadreState',
				title: '离退休状态',
				width: 70,
				sortable: true,
				formatter: function(value, row) {
					if(value == 1) return "<strong style='color:#EA7500'>离休</strong>";
					else if(value ==2) return "<strong style='color:blue'>退休</strong>";					
				}
			},{
				field: 'retirementDate',
				title: '离退休时间',
				width: 70,
				sortable: true				
			}]],
			columns: [[{
				field: 'auditState',
				title: '审核状态',
				width: 90,
				sortable: true,
				formatter: function(value, row) {
					if ("1" == value) return "<strong style='color:blue'>未审核<strong>";
					else if ("2" == value) return "<strong style='color:green'>审核通过<strong>";
					else if ("3" == value) return "<strong style='color:red'>审核未通过<strong>";
				}
			}, {
				field: 'jianKangZhuangK',
				title: '健康状况',
				width: 90,
				sortable: true
			}, {
				field: 'yangLaoFangShi',
				title: '养老方式',
				width: 130,
				sortable: true
			}]],
			toolbar: '#toolbar',
			onLoadSuccess: function() {
				$(".edit_button").linkbutton({
					text: '审核',
					plain: true,
					iconCls: 'icon-audit16'
				});
				doCellTips(true);
			},
			onRowContextMenu: function(e, rowIndex, rowData) {
				e.preventDefault();
				$(this).datagrid('unselectAll').datagrid('uncheckAll');
				$(this).datagrid('selectRow', rowIndex);
				$('#menu_tools').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			}
		});
	});

页面展示：