博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)...
阅读量:5767 次
发布时间:2019-06-18

本文共 2221 字,大约阅读时间需要 7 分钟。

如果没接触过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

 

你可能感兴趣的文章
java 面试
查看>>
迪米特原则与接口隔离原则
查看>>
w3svc无法启动
查看>>
怎样用PS对照片进行美白?
查看>>
编写高质量代码:改善Java程序的151个建议(第5章:数组和集合___建议60~64)
查看>>
easyui datagrid自定义操作列
查看>>
[Angular2 Animation] Basic animation
查看>>
js中多行字符串拼接
查看>>
齐次坐标
查看>>
[转]win 10 开始菜单(Win 7风格)增强工具 StartIsBack++ v1.3.4 简体中文特别版
查看>>
通过LDAP管理VSFTP帐户
查看>>
北航算法作业二
查看>>
安装Kali里的应用程序或软件包
查看>>
第24章、OnLongClickListener长按事件(从零开始学Android)
查看>>
linux 真·随笔
查看>>
eclipse 引用自己开发的模块
查看>>
压缩概念及常见图片格式
查看>>
(转)Linux端口nmap和netstat命令
查看>>
【转】Mac系统中安装homebrew(类似redhat|Centos中的yum;类似Ubuntu中的apt-get)
查看>>
linux安装pip
查看>>