dhtmlx使用翻译.docx
《dhtmlx使用翻译.docx》由会员分享,可在线阅读,更多相关《dhtmlx使用翻译.docx(74页珍藏版)》请在冰豆网上搜索。
dhtmlx使用翻译
dhtmlx使用翻译
(一)dhtmlxgrid配置部分
Dhtmlx是一个半开源的js框架,说是半开源,因为它的有些脚本是收费的。
总体感觉很轻巧,可依赖的东西不多,和ext这样的庞然大物,dhtmlx应该定位为一个tool更为合适。
我自己一直在使用,很喜欢它。
因为网上好像没看见可用的API中文翻译,今天终于鼓起勇气来做这件事情,纯属个人爱好,大伙见笑了,其实我的英文不好,大学四年,英语就挂过四次。
好,不废话了,这就开始。
1 dhtmlxgrid
1.1 API
1.1.1 attachEvent(evName,evHandler)
版本:
大众版
参数:
evName 可定义事件名称
evHandler用户自定义处理函数.
用途:
对当前grid事件绑定用户的自定义的处理js函数,这里支持两种格式定义
一匿名函数定义
二命名函数定义
这里也支持一个事件绑定多个处理函数的方法
执行顺序为doOnCheck1–》doOnCheck2,这里可以用于通过全局js变量实现grid连动效果的实现。
如,先onRowSelect获得当前选中单元格的值,针对当前值,定义一个函数改变当前cell的样式等,当然这样的操作也可以一个function中实现,这里定义为分离,可实现两个函数的被其他地方公共使用。
Grid中可供绑定的事件,参考grid事件介绍。
1.1.2 attachFooter(values,style)
版本:
专业版
参数:
values:
增加行的每个单元格值,以数组的形式给出,这里支持html的值表示
style:
单元格的样式
用途:
在grid的最后动态新增一行(表脚),注意当前表脚不会随上下滚动条一起移动,并设置各单元数据和格样式
可供参考实例:
//数组形式
grid.attachFooter("A,B,C,D");
//数组形式
grid.attachFooter(["A","B","C","D"])
//跨列增加
grid.attachFooter("A,#cspan,C,#cspan");
//跨行增加
grid.attachFooter("A,#rspan,C,#rspan");
//表达式html值
grid.attachFooter("A,B,C,D");
//指定各单元格样式
grid.attachFooter("A,B,C,D",["","color:
red;","",""]);
在onload事件中调用
grid.load("grid.xml",function(){
grid.attachFooter('A,B,C');
grid.attachFooter('G,H,I');
grid.setSizes();//文档上说这里必须加上,但没发现其必要性
});
1.1.3 attachHeader(values,style)
版本:
大众版
参数:
values:
增加行的每个单元格值,以数组的形式给出,这里支持html的值表示
style:
单元格的样式
用途:
定义grid的表头,注意当前表头不会随上下滚动条一起移动,并设置各单元数据和格样式
具体运用与attachHeader类似
1.1.4 attachToObject(obj)
版本:
大众版
参数:
Obj:
当前绑定的grid的对象
用途:
将当前定义grid对象重新绑定到某个容器中,可实现grid在页面上容器间(如div)的动态切换,好像不能重新绑定到原有的容器定义,使用原有的容器仅是display=none而已,因为:
通过alert容器的innerHTML发现,原有容器和新绑定容器值一致
参考实例:
—原有容器-->
solid;width:
100%;height:
316px;">
1.1.5 destructor
版本:
大众版
参数:
Obj:
当前绑定的grid的对象
用途:
彻底销毁当前grid在页面中的使用,并释放其对象占用的资源(如js数组置空等),若重新使用,必须通过init创建,有别于clearAll,后者仅把grid中的所有行删除,grid本身还可以进行数据的重填充。
这里也可以采用比较暴力的销毁方式,其grid负载的容器.innerHTML=“ ”;即可,但这样grid创建的全局js变量没有完成销毁过程
参考实例:
无
1.1.6 detachEvent(id)
版本:
大众版
参数:
id事件序号,全局唯一
用途:
删除grid中某个事件的处理过程
参考实例:
无
1.1.7 detachFooter(index)
版本:
专业版
参数:
index表脚索引
用途:
删除grid的某个表脚,与attachFooter配对使用
参考实例:
无
dhtmlx使用翻译
(二)dhtmlxgrid配置部分
2010-06-2120:
39:
00| 分类:
兴趣翻译| 标签:
|字号大中小 订阅
1.1.1detachHeader(index)
版本:
大众版
参数:
index表头索引
用途:
删除grid的某个表头,与attachHeader配对使用
参考实例:
无
1.1.2enableAutoHeight(mode,maxHeight,countFullHeight)
版本:
大众版
参数:
mode:
true/false
maxHeight:
最大无滚动高度,默认为无限制
countFullHeight:
最大高度计算方式,true最大高度表示所有表格高度总和,false仅表示数据表格的高度总和,即除去header和footer,默认为false。
用途:
当前表格是否设置为高度自适应,并可设定默认最大高度。
参考实例:
//高度自适应
mygrid.enableAutoHeight(true);
//高度非自适应
mygrid.enableAutoHeight(false);
//高度自适应,且定义最大高度为100,当前最大高度仅指数据表格部分
mygrid.enableAutoHeight(true,100);
//高度自适应,且定义最大高度为100,当前最大高度数据表格\表头\表脚
mygrid.enableAutoHeight(true,100,true);
1.1.3enableAutoWidth(mode,max_limit,min_limit)
版本:
大众版
参数:
mode:
true/false
max_limit:
最大无滚动宽度,默认为无限制。
min_limit:
最小无滚动宽度,默认为无限制。
用途:
当前表格是否设置为宽度自适应,并可设定默认最大宽度、最小宽度。
参考实例:
//宽度自适应
mygrid.enableAutoWidth(true);
//宽度非自适应
mygrid.enableAutoWidth(true);
//宽度自适应,并且设置最大、最小宽度
mygrid.enableAutoWidth(true,600,100);
1.1.4enableCellIds(mode)
版本:
大众版
参数:
mode:
true/false
用途:
当前表格中单元格索引是否要求唯一。
(id是以如下模式“c_[行索引]_[列索引]”自增的)
参考实例:
无
1.1.5enableHeaderImages(fl)
版本:
大众版
参数:
mode:
true/false,默认为false
用途:
是否在表头定义中使用image文件,即当前表头是否可以使用图片。
默认为false,即可以使用,这里可能是个bug或陷阱,既然是false为什么还可以使用呢?
参考实例:
mygrid.enableHeaderImages(false);//可以在表头中定义图片
mygrid.setHeader("无图片,img:
[imgs/true.gif]WithIcon");//img:
[imgs/true.gif]WithIcon为图片+表头定义格式。
但这里有个bug大伙需要修改下,即在dhtmlxgrid.js中有这么一句:
varimUrl=label.replace(/.*\[([^>]+)\]/,"$1");
真确应该写为:
varimUrl=label.replace(/.*\[([^>]+)\].*/,"$1");不然没法子替换]WithIcon后的字符串。
即image的路径就不对了。
1.1.6init
版本:
大众版
参数:
用途:
grid初始化操作,与destructor方法相反
参考实例:
1.1.7setAwaitedRowHeight(height)
版本:
大众版,需要dhtmlxgrid_srnd.js的支持
参数:
Height:
行高度
用途:
设置grid计算行的高度
参考实例:
mygrid.setAwaitedRowHeight(25);
1.1.8setCSVDelimiter(str)
版本:
大众版,需要dhtmlxgrid_nxml.js的支持
参数:
str:
csv格式文件风格符
用途:
依据当前分割符解析csv文件
参考实例:
mygrid.setCSVDelimiter(":
");//设置风格符为:
var str="11:
12:
13\n21:
22:
23\n31:
32:
33";//csv格式字符串
mygrid.loadCSVString(str);//加载csv字符串
1.1.9setColAlign(alStr)
版本:
大众版
参数:
alStr:
各列数据布局字符串组合,逗号隔开
用途:
设置列数据的水平布局
参考实例:
mygrid.setColAlign("right,left,center,justify");
1.1.10setColSorting(sortStr)
版本:
大众版
参数:
sortStr:
各列数据排序类型的字符串组合,逗号隔开
用途:
设置列数据的排序类型
参考实例:
mygrid.setColSorting("int,str,date,na,sortingFunction");
1.1.11setColTypes(typeStr)
版本:
大众版
参数:
typeStr:
各列数据的类型字符串组合,逗号隔开
用途:
设置列数据的数据类型
参考实例:
mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");
1.1.12setColVAlign(valStr)
版本:
大众版
参数:
valStr:
各列数据垂直布局字符串组合,逗号隔开
用途:
设置列数据的垂直布局
参考实例:
mygrid.setColVAlign("top,middle,bottom,top,top,sub");
1.1.13setColWidth(ind,value)
版本:
大众版
参数:
ind:
列索引
value:
宽度值
用途:
设置某列数据的宽度
参考实例:
mygrid.setColWidth(0,"150");
1.1.14setDelimiter(delim)
版本:
大众版
参数:
delim:
分隔符,默认为逗号,
用途:
设置grid中分隔符合,默认为逗号
参考实例:
mygrid.setDelimiter(";");//分号为分隔符
mygrid.setHeader("FirstColumn;SecondColumn;ThirdColumn");
1.1.15setHeader(hdrStr,splitSign,styles)
版本:
大众版
参数:
hdrStr:
表头内容lable字符串组合;
splitSign:
分隔标志默认为#cspan
style:
表头各列样式
用途:
设置grid中表头、样式等
参考实例:
//设置表头
mygrid.setHeader("A,B,C");
//设置表头样式
mygrid.setHeader("A,B,C",null,["text-align:
right;","text-align:
left;","text-align:
center"]);
1.1.16setIconPath(path)
版本:
大众版
参数:
path:
icon文件路径;
用途:
设置grid中引用icon图片路径,一般在grid中使用tree或列中使用icon时定义
参考实例:
mygrid.setIconPath("../codebase/imgs/icons_greenfolders/");
1.1.17setImagePath(path)
版本:
大众版
参数:
path:
image文件路径;
用途:
设置grid中引用图片路径,如排序图片,checkbox图片,背景等
参考实例:
mygrid.setImagePath("../codebase/imgs/");
1.1.18setInitWidths(wp)
版本:
大众版
参数:
wp:
各列初始化宽度字符串组合;
用途:
设置grid中各列初始化宽度
参考实例:
//明确设置各列宽度,如当前宽度不足,表头将自动折行,数据单元格自动截断显示
mygrid.setInitWidths("150,100,100,100,100");
//明确某列宽度为0,即当前列将不显示,可以用于隐藏数据等
mygrid.setInitWidths("0,100,100,100,100");
//设置当前宽度自动平均分配,即最大宽度-定义宽度/自动宽度定义的数量
mygrid.setInitWidths("*,*,100,100,100");
1.1.19setInitWidthsP(wp)
版本:
大众版
参数:
wp:
各列初始化宽度百分比字符串组合;
用途:
设置grid中各列初始化宽度百分比
参考实例:
//明确设置各列宽度百分比,即保证设置值相加为100
mygrid.setInitWidthsP("50,40,10");
1.1.20setNoHeader(fl)
版本:
大众版
参数:
fl:
true/false;
用途:
设置grid中是否定义表头,需要在init执行前调用
参考实例:
//mygrid.setNoHeader(true);
1.1.21setSkin(name)
版本:
大众版
参数:
name:
grid的皮肤名称
用途:
设置grid中的外形皮肤,可供选择的皮肤名称为xp,mt,gray,light,clear,modern,sb_dark。
参考实例:
//设置grid皮肤
mygrid.setSkin("light");//set"light"skintothegrid
1.1.22setStyle(ss_header,ss_grid,ss_selCell,ss_selRow)
版本:
大众版
参数:
ss_header:
表头样式定义表达式
ss_grid:
表格单元格样式定义表达式
ss_selCell:
选中单元格样式定义表达式
ss_selRow:
选中行样式定义表达式
用途:
设置grid的各元素样式。
参考实例:
//mygrid.setStyle("background-color:
navy;color:
white;font-weight:
bold;","","color:
red;","");
1.1.23uid
版本:
大众版
参数:
用途:
通过grid对象生成一个唯一uid值。
可视为一个工具接口
参考实例:
//
varuniqueID=mygrid.uid();
dhtmlx使用翻译(三)dhtmlxgrid数据加载…
2010-06-2221:
39:
00| 分类:
默认分类| 标签:
|字号大中小 订阅
1.1.31changePage(pageNum)
版本:
专业版需要dhtmlxgrid_pgn.js支持
参数:
pageNum:
跳转页面数
用途:
跳转到某个页面
参考实例:
grid.changePage(5);
1.1.32changePageRelative(ind)
版本:
专业版需要dhtmlxgrid_pgn.js支持
参数:
Ind:
跳转页面的间隔数
用途:
相对当前页面跳转到某个页面,即this.changePage(this.currentPage+ind);。
参考实例:
void(0)"onclick="grid.changePageRelative(-1)">上一页
void(0)"onclick="grid.changePageRelative
(1)">下一页
1.1.33clearAll(header)
版本:
大众版
参数:
Header:
true/false是否删除表头
用途:
删除。
参考实例:
void(0)"onclick="grid.changePageRelative(-1)">上一页
void(0)"onclick="grid.changePageRelative
(1)">下一页
1.1.34clearAndLoad(url,call,type)
版本:
大众版
参数:
url:
文件路径
call:
加载完成后回调函数
type:
文件类型(xml,json,jsarray,csv),默认为xml
用途:
清除当前grid数据并使用当前文件重新加载。
参考实例:
//
mygrid.clearAndLoad("grid_new.xml");
//加载完成后执行doAfterRefresh函数
mygrid.clearAndLoad("grid_new.xml",doAfterRefresh);
//指定当前文件支持格式
mygrid.clearAndLoad("grid_new.csv",doAfterRefresh,”csv”)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
dhtmlx
使用
翻译
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。