dhtmlx分页功能前端和后台代码展示

来源：互联网发布：崩坏学园2源码编辑：程序博客网时间：2024/06/05 09:10

本人遇到一个项目用的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 onload="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' onclick="queryFirst()" src="../../component/dhtmlxGrid/imgs/ar_left_abs_dis.gif" /></td><td class='img_td1'>     <img id='preLeft' onclick="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" onclick="queryNext()" style="cursor:hand" /></td><td class='img_td1'>    <img id='lastLeft' onclick="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" onclick="" 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;}

0 0