从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
来源:互联网 发布:telnet端口失败 编辑:程序博客网 时间:2024/05/16 17:28
如果没接触过dojo,或者是dojo的gridx控件,请查看我之前几篇博客,写的已经非常详细了
最重要的,更新grid中指定单元格的值,请拉到最后看(59)
至此,grid表格日常所需的常见功能已经基本完结。如果有其他功能需求,请评论提出。
(54)获得某列的name属性
代码:
grid.column(2).name();
效果:
①获得第2+1=3列的name属性;
②这里的name属性指表头的名字,如图中红框的
补充:
③grid.column(2).width 显示本列宽度④grid.column(2).id 显示本列的
获得多个列:
grid.columns(起始列号, 列数);
①第一列的起始列号是0;
②假如从第3~4列,那么这么写:grid.columns(2,2);
③注意,和上面的区别是,这里多一个s字符;
④如果从某列开始到结束,那么使用:grid.columns(起始列号);
⑤获取name属性,则在后面加“.name()”;(不含引号,句号开头,下同);
⑥“.id”获取id属性;
⑦“.width”获取width宽度,px结尾;(不能通过title[1].width="500px";来修改列宽);
(55)重置表格的结构
grid.setColumns(ppp);
解释:
①ppp为一个标准的表头结构,例如像下面这样:
var ppp = [ //表头,不要忘了这是以数组形式的 {field:"id",id:"ID",name:"ID",width:"1px"}, {field:"name",id:"name",name:"名称",width:"1px"}, //name是表头的名字, {field:"description",id:"de",name:"描述", width:"1px"},//width是宽度 {field:"time",name:"时间",width:"300px"},]
②于是新的结构,前3列的宽度为1px,第4列宽度为300px。但由于表格数据并没有time的值,因此第四列为空。如图:
③当然,由于表格的modules没有变,因此,还可以继续调整表格的宽度
(56)重置表格缓存
grid.setStore(store);
解释:
①参数store是传递给表格的缓存,是经过OjbectStore处理后的数据
②下面例子的items是添加数据后的store
grid.model.clearCache();grid.model.store.setData(items)grid.body.refresh()
(57)获得表格的列数、行数
列数:
grid.columnCount()
效果:
①表格有几列,则返回值则是几;
②返回值是NUMBER类型;
行数:
grid.rowCount()
效果:
①表格有几行,则返回值则是几;
②返回值是NUMBER类型;
(58)重绘表格
①grid.body.refresh();②grid.resize();③grid.update();
④严格来说,以上3个具体有什么用,我并不是很清楚,唯一确认的是,当对表格有某些变化时(比如更换了store),那么可能就需要grid.body.refresh();
⑤因此,假如对grid表格如果有比较大的改写之类,但表格并没有展现出来预想之中的变化,建议尝试使用一下以上3个命令,或许有用。
(59)修改某指定单元格的值
思路:
①首先我们需要知道我们所要修改的单元格的位置(知道其行id属性或者索引,列id或者索引);
②然后获得grid表格的缓存(这里指例如通过request请求的json文件,他作为回调函数的参数cases返回,指的就是这个。具体可以看(34)中所给的那个函数,然后搜索cases,就是指的那一个);
③由于cases是以数组形式排列的,数组的第一个成员是grid第一行的数据。因此,只要我们可以得到目标单元格的行索引,即可以获取某一行的数据;
④行索引可以通过该行的id属性来确定(grid.model.idToIndex(rowId));
⑤之后,我们通过列索引,获取其field属性(原因在于,field属性即是对应单元格的key值。例如有这样一组数据[{"name":"王","id":"1"}],这里的field指的就是name和id)
field = grid.column(evt.columnIndex).field();
⑥假如我们需要将这个值修改为:value="aaa";
⑦于是这么做:
grid.store.setValue(cases[evt.rowIndex], field, value);
便可以了。
代码如下:
grid.connect(grid, 'onCellClick', function(evt){ field = grid.column(evt.columnIndex).field(); value="aaa"; grid.store.setValue(cases[evt.rowIndex], field, value);});
效果:
①将鼠标所点击的单元格的值,修改为aaa
- 从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
- 从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)
- 从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)
- 从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)
- 从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)
- 从零开始学_JavaScript_系列(17)——dojo(6)(声明一个类declare)
- 从零开始学_JavaScript_系列(25)——dojo(10)摧毁一个widget
- 从零开始学_JavaScript_系列(26)——dojo的aspect方法
- 从零开始学_JavaScript_系列(27)——dojo的文档相关模块
- 从零开始学_JavaScript_系列(28)——dojo的aspect.around方法
- 从零开始学_JavaScript_系列(33)——dojo 的 tree
- 从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)
- 从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)
- 从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)
- 从零开始学_JavaScript_系列(1)——dojo(8)(手把手教你封装一个widget)
- 从零开始学_JavaScript_系列(30)——NodeList
- 从零开始学_JavaScript_系列(32)——事件广播
- 从零开始学_JavaScript_系列(43)——Symbol简述
- 完全背包
- wamp集成环境虚拟主机的配置
- 神经网络编程
- 我和我的伙伴是如何用具体的代码以及源代码管理的基本操作
- HDOJ(HDU) 1976 Software Version(简单判断)
- 从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
- 1.认识BIOS
- 手动扩大栈内存,让AC无忧
- 制作树莓派wifi遥控和自动避障小车
- MFC定时器的基础以及高级使用
- UART数据收发波形
- 玩玩二维码扫描与制作
- PB12.5创建WebService心得
- ZedBoard--(2)嵌入式Linux移植和BOA服务器的搭建