从零开始学_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是传递给表格的缓存，是经过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