dhtmlx使用

dhtmlx使用翻译（五）dhtmlxgrid 列操作
(2010年06月24日) 发表于 JavaEye博客

1.1.90 adjustColumnSize(cind)
版本：大众版
参数：
cind：列索引
用途：调整某列宽，使列所有数据可见，但需要在制定列宽的情况下，即不能设定列宽为 *
参考实例：
mygrid.adjustColumnSize(0);



1.1.91 deleteColumn(ind)
版本：专业版 dhtmlxgrid_mcol.js支持
参数：
cind：列索引
用途：调整某列宽，使列所有数据可见
参考实例：
mygrid.adjustColumnSize(0);



1.1.92 enableColumnMove (mode,columns)
版本：专业版 dhtmlxgrid_mcol.js支持
参数：
mode：true/false
columns：设定某列是否可以
用途：设置所有列或某列是否可以移动
参考实例：
//全部列可移动
mygrid.enableColumnMove(true);
//某列可移动
mygrid.enableColumnMove(true,"false,true,true,true,true,true");



1.1.93 enableHeaderMenu
版本：专业版 dhtmlxgrid_hmenu.js支持
参数：
用途：设置表头右键菜单可用
参考实例：



1.1.94 enableResizing(list)
版本：大众版
参数：
list：设置当前grid中各列size是否可变参数组合
用途：设置当前grid中各列size是否可变
参考实例：
mygrid.enableResizing("false,true,true,true,true,true,true");



1.1.95 enableTooltips(list)
版本：大众版
参数：
list：设置当前grid中各列tooltip是否可用参数组合
用途：设置当前grid中各列tooltip是否可用,即当前列title是否显示
参考实例：
mygrid.enableResizing("false,true,true,true,true,true,true");



1.1.96 getColIndexById (id)
版本：大众版
参数：
id：列id
用途：通过列id获得列索引
参考实例：
var colIndex=mygrid.getColIndexById("col1");



1.1.97 getColType(index)
版本：大众版
参数：
index：列索引
用途：通过列id索引获得列数据类型
参考实例：
var type=mygrid.getColType(0);



1.1.98 getColTypeById (cID)
版本：大众版
参数：
cID：列ID
用途：通过列列ID获得列数据类型
参考实例：
var type=mygrid.getColTypeById("column1");



1.1.99 getColWidth (ind)
版本：大众版
参数：
index：列索引
用途：通过列id索引获得列数据宽
参考实例：
var width=mygrid.getColWidth(0);



1.1.100 getColumnId (cin)
版本：大众版
参数：
cin：列索引
用途：通过列id索引获得列Id
参考实例：
var colId=mygrid.getColumnId(0);



1.1.101 getColumnLabel (cin, ind)
版本：大众版
参数：
cin：列索引
ind: 表头行索引，默认为0，只有在多表头下有用
用途：获得列标题
参考实例：
//第一列标题
var colLabel=mygrid.getColumnLabel(0);
//第一列第二个表头标题
var colLabel=mygrid.getColumnLabel(0,1);



1.1.102 getColumnsNum
版本：大众版
参数：
用途：获得列的数量
参考实例：
var colNum=mygrid.getColumnsNum();



1.1.103 getFooterLabel (cin, ind)
参考getColumnLabel (cin, ind)


1.1.104 insertColumn(ind,header,type,width,sort,align,valign,reserved,columnColor)
版本：专业版 需要dhtmlxgrid_mcol.js
参数：
ind：列索引
header：列表头标题
type：列数据类型
width：列宽度
sort：排序方式
align：水平布局方式
valign：垂直布局方式
reserved：无效参数
columnColor：列背景颜色
用途：获得列的数量
参考实例：
//最小设置
mygrid.insertColumn(10);
//最大参数设置
mygrid.insertColumn(11,"Some text","ed",120,"na","left","top",null,"red")


1.1.105 isColumnHidden (ind)
版本：专业版
参数：
ind：列索引
用途：判断当前索引列是否隐藏
参考实例：
var isHidden=mygrid.isColumnHidden(0);//隐藏返回true,反之false


1.1.106 moveColumn (oldInd,newInd)
版本：专业版 需要dhtmlxgrid_mcol.js
参数：
oldInd：原列索引
newInd：新列索引
用途：通过列索引调整列位置
参考实例：
mygrid.mygrid.moveColumn(0,2);







1.1.107 setColumnColor (clr)
版本：大众版
参数：
clr：颜色定义字符串
用途：定义列背景色
参考实例：
mygrid.setColumnColor("white,#d5f1ff,#d5f1ff");



1.1.108 setColumnExcellType (colIndex, type)
版本：专业版
参数：
colIndex：列索引
type： 扩展类型
用途：定义列数据为扩展类型
参考实例：
mygrid.setColumnExcellType(2,"ch");



1.1.109 setColumnHidden (ind, state)
版本：专业版
参数：
ind：列索引
state：true/false
用途：设置当前索引列是否隐藏
参考实例：
mygrid.setColumnHidden(0,false);



1.1.110 setColumnId (ind, id)
版本：大众版
参数：
ind：列索引
id：列id
用途：通过索引设置列id
参考实例：
mygrid.setColumnId(0,"column1");



1.1.111 setColumnIds (ids)
版本：大众版
参数：
ids：列id组合
用途：设置grid内所有列的id，可重复定义，但通过id读取索引时，仅对第一个设置有效
参考实例：
mygrid.setColumnIds("sales,book,author,price,store,shipping,best,date");



1.1.112 setColumnLabel (col, label, ind)
版本：大众版
参数：
col：表头索引
lable：标题
ind：多表头时索引
用途：设置grid表头标题
参考实例：
//单表头设置
mygrid.setColumnLabel(0,"New Column Label");
//多行表头设置
mygrid.setColumnLabel(0,"New Column Label",1);



1.1.113 setColumnMinWidth (width, ind)
版本：大众版
参数：
width：宽度
ind：列索引
用途：设置grid某列、各列最小宽度
参考实例：
//设置第一列
mygrid.setColumnMinWidth(50,0);
//设置所有列
mygrid.setColumnMinWidth("50,100,100,150,200,100,150");



1.1.114 setColumnsVisibility (list)
版本：专业版
参数：
list：各列是否可见参数组合，false可见，true隐藏
用途：设置各列是否可见
参考实例：
mygrid.setColumnsVisibility("false,true,true,true,true");



1.1.115 setFooterLabel (c, label, ind)
版本：大众版
参数：
c: 列索引
lable：标题内容，可包含 img:[imageUrl] 图片引用格式
lnd：多表脚时，行索引
用途：设置表脚标题信息
参考实例：



（注：本人文章均为原创，转载请注明出处！20100624写于深圳。）


已有 0 人发表留言，猛击->> 这里<<-参与讨论


JavaEye推荐
北京：手机之家网站诚聘PHP程序员
上海：高薪诚聘Python开发人员


阅读全文...
本站相关内容:

dhtmlx使用翻译（一）


Dhtmlx是一个半开源的js框架，说是半开源，因为它的有些脚本是收费的。总体感觉很轻巧，可依赖的东西不多，和ext这样的庞然大物，dhtmlx应该定位为一个tool更为合适。我自己一直在使用，很喜欢它。因为网上好像没看见可用的API中文翻译，今天终于鼓起勇气来做这件事情，纯属个人爱好，大伙见笑了，其实我的英文不好，大学四年，英语就挂过四次。好,不废话了，这就开始。





1 dhtmlxgrid
1.1 API
1.1.1 attachEvent(evName , evHandler)

版本：大众版



参数：

evName 可定义事件名称

evHandler 用户自定义处理函数.



用途：对当前grid事件绑定用户的自定义的处理js函数，这里支持两种格式定义

一 匿名函数定义





<script>
grid.attachEvent("onRowSelect",function(rowId,cellIndex){
alert("Row with id="+rowId+" was selected");
});
</script>







二 命名函数定义





<script>
grid.attachEvent("onEditCell",doOnEditCell);
...
function doOnEditCell(stage,rowId,cellIndex,newValue,oldValue){
if ((stage==2)&&(newValue!=oldValue)){
alert("Cell with id="+rowId+" and index="+cellIndex+" was edited");
return true;
}
return true;
}
</script>







这里也支持一个事件绑定多个处理函数的方法





<script>
grid.attachEvent("onCheck",doOnCheck1);
grid.attachEvent("onCheck",doOnCheck2);
function doOnCheck1(rowId,cellIndex,state){
if (state){
alert("Checkbox in the row with id="+rowId+" was checked");
}
}
function doOnCheck2(rowId,cellIndex,state){
if (state){
alert("Checkbox in column with index="+cellIndex+" was checked");
}
}
</script>





执行顺序为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,<strong>B</strong>,C,<a href='http://test.com'>D</a>");
//指定各单元格样式
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发现，原有容器和新绑定容器值一致



参考实例：



<!—原有容器-->
<div id="listdiv" style=" border-style:solid;width:100%;height:316px;"></div>
<table width="700">
<tr>
<td width="50%" valign="top">
<!—可绑定新容器-->
<div id="gridbox" style="width=350px;height:150px;background-color:white;"></div>
</td>
<td valign="top">
<!—可绑定新容器-->
<div id="gridbox2" style="width=350px;height:150px;background-color:white;border:1px solid blue;" align="right"></div>
</td>
</tr>
<table>
<input type="button" οnclick="dotacche()" value="00000"/>
<input type="button" οnclick="doctacche()" value="1111"/>
<script>
function dotacche() {
ckmygrid.attachToObject(document.getElementById("gridbox2"));

}
function doctacche() {
ckmygrid.attachToObject(document.getElementById("gridbox"));
// ckmygrid.attachToObject(document.getElementById("listdiv"));这里执行没有效果
}
</script>





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配对使用

转自：[url]http://home.searchfull.net:8080/2448019-dhtmlx+%E4%BD%BF%E7%94%A8+%E7%BF%BB%E8%AF%91+.html[/url]