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