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

简介: 如果没接触过dojo,或者是dojo的gridx控件,请查看我之前几篇博客,写的已经非常详细了 最重要的,更新grid中指定单元格的值,请拉到最后看(59) 至此,grid表格日常所需的常见功能已经基本完结。如果有其他功能需求,请评论提出。 (54)获得某列的name属性 代码: grid.column(2).name(); 效果: ①获得第2+1=3列的na

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

 


目录
相关文章
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
89 4
|
3月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
39 2
|
4月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
144 24
|
4月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
58 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
126 2
|
4月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
49 2
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第1天】JavaScript设计模式增进代码复用和维护性。单例模式确保唯一实例,用闭包防止命名冲突和控制状态访问。观察者模式实现一对多依赖,通过解绑避免内存泄漏。工厂模式封装对象创建,适度使用避免复杂度。装饰者模式动态添加行为,保持简洁以保可读性。理解模式的优缺点,灵活应用,提升代码质量。
128 3
|
4月前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
289 2
|
5月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
63 5
|
5月前
|
前端开发 JavaScript UED
JavaScript进阶-async/await语法糖
【6月更文挑战第20天】`async/await`自ES2017起简化了JavaScript异步编程,通过提供同步代码般的体验降低复杂性。async标识异步函数,内部可使用await等待Promise结果。易错点包括:忽略错误捕获(需try/catch)、滥用await(影响性能,适合并发操作时用`Promise.all`)和忘记函数返回Promise。利用高级技巧如并发控制和错误处理,能编写更高效和健壮的代码。实践和理解底层原理是掌握关键。
59 2

热门文章

最新文章

下一篇
无影云桌面