从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)

如果没接触过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是传递给表格的缓存;

②简单来说,假设有一张符合grid内容的表格数据(共10行),我们将其分为前5行和后5行;

③先传递前5行给表格,于是grid显示前5行的数据;

④然后我们不需要其显示前5行,需要其显示后5行,于是传递后5行的数据(变量store)给他(grid),然后使用这条命令,于是表格开始显示后5行的数据了;

⑤可能需要在这行代码之后使用grid.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

 


你可能感兴趣的:(gridx,修改单元格的值,更新表格,重置表结构)