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

最新推荐文章于 2021-12-14 11:10:36 发布

2013学习的人

最新推荐文章于 2021-12-14 11:10:36 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： dhtmlx 文章标签：分页前端 javascript 布局

本文链接：https://blog.youkuaiyun.com/jiangyw2014/article/details/23857119

本文介绍了使用dhtmlx进行前端展示时的分页功能实现，包括前端页面制作和后台代码的实战示例，适用于快速创建dhtmlx分页Demo。

本人遇到一个项目用的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.pn