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