本人遇到一個項目用的dhtmlx做前端展示，無耐之下只能去學習下里面的增刪改查及頁面製作，這是實戰代碼，可以仿造去寫一個簡單的demo自己看看
廢話不多說，上代碼
dhtmlx分頁
前端：
①頁面製作
<script src="../../third/dhtmlx/dhtmlx.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxLayout/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../component/dynamicPage/queryCondition.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxLayout/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxMenu/skins/dhtmlxmenu_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxTabbar/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="../../component/dhtmlxGrid/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../../component/dhtmlxGrid/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxAccordion/skins/dhtmlxaccordion_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxToolbar/skins/dhtmlxtoolbar_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxWindows/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../component/dhtmlxWindows/skins/dhtmlxwindows_dhx_skyblue.css">
//全局變量
var dhxLayoutA;
var dhxLayout;
var gridList;
var dataPage=new Object();
dataPage.currentPage=1;
dataPage.pageSize=20;
dataPage.count=0;
dataPage.isGetRecordCount=true;
<script type="text/javascript">
function init(){
dhxLayout = new dhtmlXLayoutObject("parentIdDiv", "2E"，"dhx_black");//2E，3L等是頁面佈局模型名，後面是皮膚
dhxLayout.cells("a").setText("維護單元查詢");
dhxLayout.cells("a").setHeight("80");
dhxLayout.cells("a").attachObject("query_div");//單個字段查詢區域
dhxLayout.cells("b").setText("維護單元列表");
dhxLayout.cells("b").setHeight("550");
dhxLayout.cells("b").attachObject("serviceRegionDiv");//整個分頁區域
initServiceRegion();//初始化維護區域列表的列字段
initTool();//初始化增刪改及其他按鈕功能
}
function initServiceRegion() {
gridList = new dhtmlXGridObject("serviceRegionList");//造出一個橫向字段欄對象
gridList.setImagePath("../../component/dhtmlxGrid/imgs/");//設置取圖片路徑
gridList.setHeader(" ,記錄號,維護區名稱,維護區編碼,別名,維護區類型,管理區域編碼,管理區域名稱, ,崗位, ,維護單元分類,備註");
gridList.setInitWidths("0,100,200,200,100,100,100,100,0,100,0,100,200");
gridList.setColTypes("txt,txt,txt,txt,txt,txt,txt,txt,txt,txt,txt,txt,txt");
gridList.init();
gridList.setSkin("dhx_skyblue");//設置膚色
}
function initTool() {
var toolbar = new dhtmlXToolbarObject("toolbarDiv");
toolbar.setIconsPath("../../skin/telecom/images/icon/");
toolbar.addButton("query",0,"查詢","find.gif");
toolbar.addSeparator("sep1", 1);
toolbar.addButton("create",2,"新建","add.png");
toolbar.addSeparator("sep2", 3);
toolbar.addButton("modify",4,"修改","edit.png");
toolbar.addSeparator("sep3", 5);
toolbar.addButton("delete",8,"刪除","delete.png");
toolbar.addSeparator("sep5", 9);
toolbar.attachEvent("onclick", toolbarClick1);
}
function toolbarClick1(itemId){ //itemId：對應上面的字符串
if(itemId == "query"){
queryServiceRegion(1);
return;
}
if(itemId == "create"){
addServiceRegion();
return;
}
if(itemId == "modify"){
updateServiceRegion();
queryServiceRegion(1);
return;
}
if(itemId == "delete"){
delServiceRegion();
return;
}
}
</script>
②頁面代碼
<body οnlοad="init()" style="width:100%; height:100%; overflow:auto">
<div id="parentIdDiv" style="width: 100%;height:630px; background-color:white;"></div>
<div id="query_div" style="background-color: rgb(239, 246, 251);height:75px">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="td_search_txt">
維護區名稱 </td>
<td class="td_search">
<input type="text" value="" name="maintenanceName" style="width:120;"> </td>
<td class="td_search_txt">
維護區編碼 </td>
<td class="td_search">
<input type="text" value="" name="maintenanceNo" style="width:120;"> </td>
<td class="td_search_txt">管理區域名稱</td>
<td class="td_search">
<input type="text" value="" name="regionName" style="width:120;" readOnly>
<input type="button" name="beginTimeBtn" value="" class="button_pop" onClick="getRegion()">
<input type="hidden" name="regionId" value="">
</td>
</tr>
</table>
</div>
<div id="serviceRegionDiv" style="width: 100%;height:500px; background-color:white;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div id="toolbarDiv" style="width:100%; background-color:white;"></div>
<td></tr>
<tr><td>
<div id="serviceRegionList" style="width:100%; height:460px; background-color:white;"></div>
<td></tr>
<tr><td>
<div id="serviceRegionPage" style="width:100%; background-color: rgb(239, 246, 251);" >
<table style="width:40%; ">
<tr>
<td class='img_td1'>
<img id='firstLeft' οnclick="queryFirst()" src="../../component/dhtmlxGrid/imgs/ar_left_abs_dis.gif" />
</td>
<td class='img_td1'>
<img id='preLeft' οnclick="queryPrevious()" src="../../component/dhtmlxGrid/imgs/ar_left_dis.gif" style="cursor:hand" />
</td>
<td class='right_td'>
<span id='sumSpanLeft' >共<span id='recordCountLeft'>0</span>條</span>
</td>
<td class='img_td1'>
<img id='nextLeft' src="../../component/dhtmlxGrid/imgs/ar_right_dis.gif" οnclick="queryNext()" style="cursor:hand" />
</td>
<td class='img_td1'>
<img id='lastLeft' οnclick="queryLast()" src="../../component/dhtmlxGrid/imgs/ar_right_abs_dis.gif" style="cursor:hand" />
</td>
<td class='right_td'>第<span id='recordPageLeft'>1</span>頁</td>
<td class='right_td'>每頁<input type="text" name="pagesize" οnclick="" value="20" size="5" disabled>條記錄</td>
</tr>
</table>
</div>
<td></tr>
</table>
</div>
<script type="text/javascript">
<script type="text/javascript">
//查詢所有
function queryServiceRegion(currentPageIndex){
document.getElementById("recordPageLeft").innerText = currentPageIndex;
var qryService = new Object();
qryService.serviceRegionName = maintenanceName.value;
qryService.serviceRegionNo = maintenanceNo.value;
qryService.regionId = regionId.value;
var obj = callRemoteFunctionNoTrans("serviceRegionService","queryServiceRegion",qryService,currentPageIndex,20);
if(obj!=null){
document.getElementById("recordCountLeft").innerText = obj[0];//obj數組中有兩個值，一個總頁數，一個列表所有對象
gridList.clearAll();
if(obj[1]!=null&&obj[1]!=""){
gridList.parse(obj[1]);
gridList.checkAll(false);
}
}
}
//查詢下一頁
function queryNext(){
var pageIndex = document.getElementById("recordPageLeft").innerText;
var recordCount = document.getElementById("recordCountLeft").innerText;
var pageSize = pagesize.value;
var totalPage = Math.ceil(parseInt(recordCount)/parseInt(pageSize));
var next = parseInt(pageIndex)+1;
if(next<=totalPage){
queryServiceRegion(next);//查詢下一頁，同時賦值了第多少頁
}else{
alert("已經到末頁了！");
}
}
//查詢前一頁
function queryPrevious(){
var pageIndex = document.getElementById("recordPageLeft").innerText;
var previous = parseInt(pageIndex)-1;
if(previous>=1){
queryServiceRegion(previous);
}else{
alert("已經到首頁了！");
}
}
//查詢首頁
function queryFirst(){
var pageIndex = document.getElementById("recordPageLeft").innerText;
if(pageIndex!="1"){
queryServiceRegion(1);
}else{
alert("已經到首頁了！");
}
}
//查詢最後一頁
function queryLast(){
var pageIndex = document.getElementById("recordPageLeft").innerText;
var recordCount = document.getElementById("recordCountLeft").innerText;
var pageSize = pagesize.value;
var totalPage = Math.ceil(parseInt(recordCount)/parseInt(pageSize));
if(parseInt(pageIndex)<totalPage){
queryServiceRegion(totalPage);
}else{
alert("已經到尾頁了！");
}
}
/*
function addServiceRegion(){
var flag = window.showModalDialog("addServiceRegion.jsp?si="+staffId+"&roleId=405",null,"dialogWidth:500px;dialogHeight:600px;help:no;scroll:no;resizable:yes");
}
function updateServiceRegion(){
var rowid = gridList.getSelectedRowId();
if(rowid!=null&&rowid!=""){
var temp = gridList.cellById(parseInt(rowid), 0).getValue();
var res=window.showModalDialog("updateServiceRegion.jsp?serviceRegionId="+temp+"&si="+staffId+"&roleId=405",null,"dialogWidth:500px;dialogHeight:600px;help:no;scroll:no;resizable:yes");
}else{
alert("請選擇一條數據!");
}
}
function delServiceRegion(){
var rowid = gridList.getSelectedRowId();
if(rowid!=null&&rowid!=""){
if(confirm("確認要刪除？")){
var serviceRegionID = gridList.cellById(parseInt(rowid), 0).getValue();
callRemoteFunctionNoTrans("serviceRegionService","delServiceRegion",serviceRegionID);
queryServiceRegion(1);
}
}else{
alert("請選擇一條數據!");
}
}
function getRegion(){
var obj=window.showModalDialog("selSpcRegion.html?si="+staffId+"&roleId=405",null,"dialogWidth:400px;dialogHeight:450px;help:no");
if(obj!=null){
regionId.value = obj.regionId;
regionName.value = obj.regionName;
}
}
*/
</script>
後臺：
/**
* 維護單元查詢列表
* @param sr
* @param currPage
* @param pageCount
* @return ServiceImpl
*/
public String[] queryServiceRegion(ServiceRegionVO sr,int currPage,int pageCount){
int count = serviceRegionDAO.getServiceRegionCount(sr);
StringBuffer sb = new StringBuffer();
try{
List<ServiceRegionVO> list = serviceRegionDAO.getServiceRegion(sr, currPage, pageCount);
if(list!=null){
sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
sb.append("<rows>");
for (int i = 0; i < list.size(); i++) {
ServiceRegionVO vo = list.get(i);
sb.append("<row id=\"\">");
sb.append("<cell>"+vo.getServiceRegionId()+"</cell>");
sb.append("<cell>"+vo.getRownum()+"</cell>");
sb.append("<cell>"+vo.getServiceRegionName()+"</cell>");
sb.append("<cell>"+vo.getServiceRegionNo()+"</cell>");
sb.append("<cell>"+vo.getAlias()+"</cell>");
sb.append("<cell>"+vo.getDescChina()+"</cell>");
sb.append("<cell>"+vo.getRegionNo()+"</cell>");
sb.append("<cell>"+vo.getRegionName()+"</cell>");
sb.append("<cell>"+vo.getSpPositionId()+"</cell>");
sb.append("<cell>"+vo.getSpPositionName()+"</cell>");
sb.append("<cell>"+vo.getServiceType()+"</cell>");
sb.append("<cell>"+vo.getServiceTypeName()+"</cell>");
sb.append("<cell>"+vo.getNotes()+"</cell>");
sb.append("</row>");
}
sb.append("</rows>");
}
}catch(Exception e){
_logger.error(e.getMessage(), e);
}
return new String[]{count+"",sb.toString()};
}
/**
* 獲取維護單元總數
* @param sr
* @return DaoImpl
*/
public int getServiceRegionCount(ServiceRegionVO sr){
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
int count = 0;
StringBuffer sb = new StringBuffer();
sb.append("select count(*) as pageCount from SPC_SERVICE_REGION a,spc_region b,pub_restriction c ,vw_region_new e"
+ " where a.region_id=b.region_id and a.service_region_type=c.serial_no(+) and a.delete_state='0' and b.region_id=e.region_id(+) ");
if(sr.getServiceRegionName()!=null&&!"".equals(sr.getServiceRegionName())){
sb.append(" and a.service_region_name like ?");
}
if(sr.getServiceRegionNo()!=null&&!"".equals(sr.getServiceRegionNo())){
sb.append(" and a.service_region_no like ?");
}
if(sr.getRegionId()!=null&&!"".equals(sr.getRegionId())){
sb.append(" and ( b.region_id=?"
+ " or e.region_id=?"
+ " or e.s_region_id=?"
+ " or e.ss_region_id=?"
+ " or e.sss_region_id=?"
+ " or e.ssss_region_id=? )");
}
try {
conn = createConnection();
ps = conn.prepareStatement(sb.toString());
int index = 1;
if(sr.getServiceRegionName()!=null&&!"".equals(sr.getServiceRegionName())){
ps.setString(index++, "%"+sr.getServiceRegionName()+"%");
}
if(sr.getServiceRegionNo()!=null&&!"".equals(sr.getServiceRegionNo())){
ps.setString(index++, "%"+sr.getServiceRegionNo()+"%");
}
if(sr.getRegionId()!=null&&!"".equals(sr.getRegionId())){
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
}
rs = ps.executeQuery();
if(rs.next()){
count = rs.getInt("pageCount");
}
} catch (Exception e) {
_logger.error(e.getMessage(), e);
} finally{
cleanUp(conn, null, ps, rs);
}
return count;
}
/**
* 獲取維護單元列表
* @param sr
* @param currPage 當前頁
* @param pageCount 頁總數
* @return DaoImpl
*/
public List<ServiceRegionVO> getServiceRegion(ServiceRegionVO sr,int currPage,int pageCount) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<ServiceRegionVO> list = null;
StringBuffer sb = new StringBuffer();
sb.append( "select * from (select rownum as rnum,d.* from ("
+ "select a.service_region_id,NVL(a.service_region_name,' ') as service_region_name,"
+ "NVL(a.service_region_no,' ') as service_region_no,NVL(a.alias,' ') as alias,"
+ "NVL(c.desc_china,' ') as desc_china,b.region_no,b.region_name,NVL(a.notes ,' ') as notes,a.service_type,"
+ "NVL(f.type_name,' ') as service_type_name,a.sp_position_id,NVL(a.sp_position_name,' ') as sp_position_name "
+ "from SPC_SERVICE_REGION a,spc_region b,pub_restriction c,vw_region_new e,service_region_type f "
+ "where a.region_id=b.region_id and a.service_region_type=c.serial_no(+) and a.delete_state='0' and b.region_id=e.region_id(+) and a.service_type=f.type_id(+) ");
if(sr.getServiceRegionName()!=null&&!"".equals(sr.getServiceRegionName())){
sb.append(" and a.service_region_name like ?");
}
if(sr.getServiceRegionNo()!=null&&!"".equals(sr.getServiceRegionNo())){
sb.append(" and a.service_region_no like ?");
}
if(sr.getRegionId()!=null&&!"".equals(sr.getRegionId())){
sb.append(" and ( b.region_id=?"
+ " or e.region_id=?"
+ " or e.s_region_id=?"
+ " or e.ss_region_id=?"
+ " or e.sss_region_id=?"
+ " or e.ssss_region_id=? )");
}
sb.append( " order by a.create_date desc) d) where rnum>=? and rnum<?");
int tempCurr = (currPage-1)*pageCount+1;
int tempCount = tempCurr+pageCount;
try {
conn = createConnection();
ps = conn.prepareStatement(sb.toString());
int index = 1;
if(sr.getServiceRegionName()!=null&&!"".equals(sr.getServiceRegionName())){
ps.setString(index++, "%"+sr.getServiceRegionName()+"%");
}
if(sr.getServiceRegionNo()!=null&&!"".equals(sr.getServiceRegionNo())){
ps.setString(index++, "%"+sr.getServiceRegionNo()+"%");
}
if(sr.getRegionId()!=null&&!"".equals(sr.getRegionId())){
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
ps.setString(index++, sr.getRegionId());
}
ps.setInt(index++, tempCurr);
ps.setInt(index++, tempCount);
rs = ps.executeQuery();
while(rs.next()){
if(list==null){
list = new ArrayList<ServiceRegionVO>();
}
ServiceRegionVO srVO = new ServiceRegionVO();
srVO.setRownum(rs.getInt("rnum"));
srVO.setServiceRegionId(rs.getString("service_region_id"));
srVO.setServiceRegionName(rs.getString("service_region_name"));
srVO.setServiceRegionNo(rs.getString("service_region_no"));
srVO.setAlias(rs.getString("alias"));
srVO.setDescChina(rs.getString("desc_china"));
srVO.setRegionNo(rs.getString("region_no"));
srVO.setRegionName(rs.getString("region_name"));
srVO.setNotes(rs.getString("notes"));
srVO.setServiceType(rs.getString("service_type"));
srVO.setServiceTypeName(rs.getString("service_type_name"));
srVO.setSpPositionId(rs.getString("sp_position_id"));
srVO.setSpPositionName(rs.getString("sp_position_name"));
list.add(srVO);
}
} catch (Exception e) {
_logger.error(e.getMessage(), e);
} finally{
cleanUp(conn, null, ps, rs);
}
return list;
}