DHTMLX组件新版本培训.ppt

1、新版本DHTMLX组件的使用,王晓润 2011-06-23,主要内容,1、版本信息 2、主要新功能 3、新功能使用举例 4、其他组件说明 5、一些需要注意的问题 6、总结,新版本组件,主要新功能预览,Grid 冻结列 标题合并 内容列合并，行合并 支持Excel方式录入数据 其他功能 Window 窗口组件，里面可以连接生成各种组件或HTML页面，可以用来创建查询，选项界面。 Layout 布局组件，通过嵌套布局组件，可以实现复杂的用户界面，并且各个布局的板块的尺寸可以通过代码动态调整。,新功能使用,冻结列 需要引入的文件：dhtmlxgrid_splt.js 作用：在初始化Grid时，把从左

2、往右数的若干列冻结（类似Excel的冻结功能） 代码：调用Grid的splitAt(列索引)方法; 如：mygridPro.splitAt(2); 注意事项： 应在Grid的init()方法之后调用此方法，否则会报错。 缺点：只能在Grid初始化时确定冻结的列，Grid生成之后不能改变。,新功能使用,标题合并 作用：通过标题合并功能，可以设置复杂的标题 使用方法： 第一行标题使用原来的方法grid.setHeader(); 第二行开始使用grid.attachHeader(); 例子： grid.setHeader( Column1,#cspan,#cspan); grid.attachHea

3、der( Column11, Column12,#cspan); 对应的格式如下：,新功能使用,内容列合并，行合并 行合并需要引入的文件：dhtmlxgrid_rowspan.js 首先在grid初始化时调用enableRowspan()，允许行合并；或者enableCollSpan(true)，允许列合并。 然后在XML中设置数据格式 行合并：合并开始行Value，其他合并的行对应的列 列合并：合并开始类Value，其他合并的列 例子：见工程,新功能使用,支持Excel方式录入数据 Grid初始化时调用enableKeyboardSupport(true) 需要引入文件：dhtmlxgrid

4、_keymap_excel.js 类似Excel的录入方式，使用方向键和Enter键进行数据录入,新功能使用,其他功能 1. 分页 Grid初始化时调用enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer) 需要引入文件：dhtmlxgrid_pgn.js 例子mygrid.enablePaging(true,40,5,pagingArea,true,infoArea); 2. 日期控件 列的类型设为：dhxCalendar(只读), dhxCalendarA

5、(可编辑) 需要引入的文件： dhtmlxcalendar.css，dhtmlxcalendar_yahoolike.css， dhtmlxcalendar.js，dhtmlxgrid_excell_dhxcalendar.js Grid初始化时调用：mygrid.setDateFormat(%m/%d/%Y);,新功能使用,其他功能 3. 日期时间 列的类型设置为：datetime 需要引入的文件：js/datetime_cell.js, dhtmlxgrid_excell_datetime.js 4. 多选类型的列 列的类型设置为：clist 需要引入的文件：dhtmlxgrid_exce

6、ll_clist.js 使用方法：在grid初始化的时候，设置可选值： grid.registerCList(row index, value Array); grid.registerCList(8, GME, DMC, SME,SYE,MAS);,新功能使用,更多详细功能的使用请参考API或在线例子 API：172.17.254.3group-itIndividualWang xiaorundhtmlx.chm （DMC） 或 172.22.254.203git_otdhtmlx.chm （GME） DHTMLX在线例子： wERP工具涨缩系数管理模块程序，菜单位置：生产工具涨缩系数管理,

7、其他组件说明,Toolbar,Tabbar,Tree 这三个组件的新版本是用来配合Layout和Window排板的使用； 使用方法与旧版本基本一致。,一些需要注意的问题,1、组件事件编写方式改变 新方式： crTool.attachEvent(onClick,onButtonClickCr); 旧方式：seaTool.setOnClickHandler(onButtonClickSea);,一些需要注意的问题,2、在同一页面使用组件时，需要多次新建和关闭，建议组件所使用的DIV采取动态新增方式，同时在不使用组件时（如Window组件）调用组件的销毁方法（一般是unload），以及时释放内存。 var newDiv = document.createElement(DIV); document.body.appendChild(newDiv); newDiv.innerHTML=initCrDiv(); initCrDiv()是生成一个用字符串表示的HTML代码的函数。,一些需要注意的问题,3、获取Grid的xmlStr