DHTMLX组件新版本培训汇编.ppt

新版本DHTMLX组件的使用 王晓润 2011-06-23 主要内容 1、版本信息 2、主要新功能 3、新功能使用举例 4、其他组件说明 5、一些需要注意的问题 6、总结 新版本组件 DHMTLX组件名称 版本 推荐样式(默认) Grid 1.6 gray Toolbar 2.6 dhx_skyblue Layout 2.6 dhx_skyblue Window 2.6 dhx_skyblue Tabbar 2.6 dhx_skyblue Tree 1.6 default 主要新功能预览 Grid 冻结列 标题合并 内容列合并，行合并 支持Excel方式录入数据 其他功能 Window 窗口组件，里面可以连接生成各种组件或HTML页面，可以用来创建查询，选项界面。 Layout 布局组件，通过嵌套布局组件，可以实现复杂的用户界面，并且各个布局的板块的尺寸可以通过代码动态调整。 新功能使用 冻结列 需要引入的文件：dhtmlxgrid_splt.js 作用：在初始化Grid时，把从左往右数的若干列冻结（类似Excel的冻结功能） 代码：调用Grid的splitAt(列索引)方法; 如：mygridPro.splitAt(2); 注意事项： 应在Grid的init()方法之后调用此方法，否则会报错。 缺点：只能在Grid初始化时确定冻结的列，Grid生成之后不能改变。 新功能使用 标题合并 作用：通过标题合并功能，可以设置复杂的标题 使用方法： 第一行标题使用原来的方法grid.setHeader(); 第二行开始使用grid.attachHeader(); 例子： grid.setHeader( Column1,#cspan,#cspan); grid.attachHeader( Column11, Column12,#cspan); 对应的格式如下： Column1 Column11 Column12 Data1 Data2 Data3 新功能使用 内容列合并，行合并 行合并需要引入的文件：dhtmlxgrid_rowspan.js 首先在grid初始化时调用enableRowspan()，允许行合并；或者enableCollSpan(true)，允许列合并。 然后在XML中设置数据格式 行合并：合并开始行cell rowspan=“2”Value/cell，其他合并的行对应的列cell/cell 列合并：合并开始类cell colspan=“2”Value/cell，其他合并的列cell/cell 例子：见工程 新功能使用 支持Excel方式录入数据 Grid初始化时调用enableKeyboardSupport(true) 需要引入文件：dhtmlxgrid_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(可编辑) 需要引入的文件： 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_excell_clist.js 使用方法：在grid初始化的时候，设置可选值： grid.registerCList(row index, value Array); grid.registerCList(8, [GME, DMC, SME,SYE,MAS]); 新功能使用 更多详细功能的使用请参考API或在线例子 API：\\\group-it\Individual\Wang xiaorun\dhtmlx.chm （DMC） 或 \\03\git_ot\dhtmlx.ch