资源描述
一 简单TreeGrid的实现1.导入关键文件2.初始化mygrid = new dhtmlXGridObject(gridbox); /xml文件中图片的路径mygrid.setImagePath(Grid/codebase/imgs/icons_books/;mygrid.setHeader(Tree,Plain Text,Long Text,Color,Checkbox); /列类型(要显示为树行结构第一列必值须为tree,ed为可编辑,txt为文本框)mygrid.setColTypes(tree,ed,txt,ch,ch);mygrid.init(); mygrid.loadXML(test_list_1.xml); 3.基本XML结构(基本机构就是使用row的嵌套达到树形效果)Honda. Honda.二 关键词定位功能实现说明(红色部分为关键代码)引入JS文件,如下:执行初始化方法如下:/将treeGrid放入id为gridbox的div中mygrid=newdhtmlXGridObject(gridbox);/引入图片mygrid.setImagePath(././ext/dhtmlx/dhtmlxGrid/codebase/imgs/icons_books/);/设置表头mygrid.setHeader(Search, Text Filter, Select Filter);/设置检索类型(有文本框查找,文本框过滤,下拉列表过滤)mygrid.attachHeader(#text_search,#text_filter,#select_filter);/设置单元格的大小mygrid.setInitWidths(200,100,*);/数据的对齐方式mygrid.setColAlign(left,right,right);/设置每列的数据类型mygrid.setColTypes(tree,price,ed);/排序方式(有字符排序,数字排序,Date排序等)mygrid.setColSorting(str,int,int);/初始化mygrid.init();/ loadXML()方法在XMl或Action中得到XML类型的数据mygrid.loadXML(treegrid_sample.xml);样式下图所示:XML文档的格式如下:.cell三 简单算数运算实现(求和)导入关键文件:script src=Grid/codebase/ext/dhtmlxgrid_math.js初始化:/对相应列求和(列中必须位数字,可以有小数点)mygrid.setColTypes(tree,price,ed,price=sum,ed=sum);/精确到小数位数mygrid.setMathRound(2);四 绑定事件(动态添加删除等)引入JS和CSS文件,如下:执行初始化方法如下: mygrid = new dhtmlXGridObject(gridbox); mygrid.selMultiRows = true; mygrid.imgURL = ././ext/dhtmlx/dhtmlxGrid/codebase/imgs/icons_books/; mygrid.enableTreeGridLines(); mygrid.init(); mygrid.loadXML(treegrid.xml);增加行,删除行的操作是通过中的onclick事件来实现的。其主要功能代码如下:/添加行add new row;/根据id添加条目add new row at child of node at position;/添加一个条目 add new row as a child of selectt;/根据id删除行delete row position/删除行delete a row/返回所选行Index of selected/展开所有节点Expand all/收缩所有节点Collapse all/生成xml代码: Serialize TreeGrid 样式下图所示:其他:列分组mygrid.splitAt(1); 动态
展开阅读全文