jsp页面代码:
<div data-options="region:'center',split:true,title:''">
<table id="dataGrid"></table>
</div>
注意:自己在官网下载easyui的js和css样式包然后页面引用。
jjs加载:
<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 }); } }); });
页面展示: