其实无论是入行开始还是到现在,对于grid自己也算比较多的研究和设计。从开始的jquery ui datagrid 到jqgrid 到阳哥的新作tangram grid再到自己的phoenix grid(自己的组件库的扩展ui控件)
慢慢地发现,一个完备的grid应该具备以下
1. 从性能角度出发的设计
-----很多人觉得啊,这个当然了,是的,
a . 分页在初始话数据render的时候,就表现的比较明显,特别是大数据量。
b . 你的控件支持自定义的分页配置吗?因为很多项目在改造过程中可能有它自己的分页,只是tableToGrid
c . 你的分页渲染的时候有图片的请求吗?还是直接用特殊字符►|这些来替代
(jquery ui custom的素材)
d. 你的分页算法是否合理。
-----这个一般如果你只是简单地去用jqgrid或者进行二次封装jquery ui grid的话你可能考虑的不是很多,或者你追求的是怎样才能设置width满铺,最大不出现滚动条
a. 个人比较喜欢阳哥的做法:在渲染期多生成两个个div作为横向纵向,绑定事件
b. 可能编写的时候需要考虑到兼容性(类似于我写的dommousescroll与mousewheel的区别)
-----举个简单的例子,我要编写开发的api如获取选中行(单行),获取选中行(多行)
代码1: /**
* 获取选中行数据(只返回一行数据)
*/
getSelected:function(){
//先判断是否有选中
if(this.selectedRows.length>0){
}else{
//没有选中返回null
return null;
}
},
/**
*获取选中行数据(多行)
*/
getSections:function(){
var result=[],
grid=this;
//然后去遍历
....
return result;
},
代码2:
/*
合并getSelected和getSelections
到getSelectRows
*/
getSelectRows:function(){
//不判断是否有选中行
var grid = this,
result =[];
//直接遍历
。。。。。
return result;
},
/*
getSelected 获取选中行数据(单行)
*/
getSelected:function(){
var rows = this.getSelectRows;
return rows.length >0 ? rows[0] : null;
},
/*
getSelection 获取选中行数据(多行)
*/
getSelection:function(){
return this.getSelectRows;
}
这个做法是jquery ui grid的思想来的,其实api的耦合度自己一定要把握好,设计模式的思想也可以参考进来。
同样的做法可以在比如对列的显示和隐藏上面操作
这个其实还是说起来比较简单的,在点击cell的时候出发onCellClick----再到onRowClick
我们很明白,对于数据呈现的容器,每一次的dom操作是很多的,如何在重新render或者需要执行回收的时候去clear 一下。
这个如果你用过jquery ui datagrid的话,你可能也抱怨过当数据量达到100条以上的时候,点击全选按钮,会出现3秒左右的延迟,下面的数据列才会勾选上。当然网络上很久前就有了解决方案。
关于这点还是细说一下,我从以前接触到现在多还是支持我们的options可以设置selectMode(选中模式0-不选折 1-单选 2-多选)--或者很多人用过jqgrid的multiselect,但是还是希望细化到单选还是多选。 这样的属性去控制页面的渲染checkbox。
很多人会觉得Jqgrid这种tableToGrid后,样式太过冗余,所以我建议,如果你自己在设计grid的然后的时候一定区分好自己的文档树
现在的很多grid插件多支持拖拽,键盘操作,可编辑,导入导出(自己入行菜鸟的时候阳哥让写了导出excel不走后台,不过后来的方案还是不错,给出confirm的方式去选择请求后台返回数据java方式的模板导出,还是页面抓取数据进行导出。性能和选择方式的扩展让用户会感觉好一点)
比如以前做的定义绑定默认新增修改删除的按钮,实现默认常见功能,让一般的开发者不用考虑过多的交互。当然如果有业务逻辑的话,可能就需要增加一些逻辑判断等等。
其实以前作为技术研发部门的一名开发人员,时常被各个产品线或者项目组抱怨你们设计的组件扩展性不是很好,其实一直在想,作为底层的编写人员,我们不应该过多地带入一些业务的逻辑到我们的grid里面,但是必要的接口还是得预先地预留好。这说的简单,但是这个“度”的把握很重要。
- 还是要说一下:一份好的说明文档会比什么多好,配置,api的例子也好或者ppt简介,(当然这一点很赞一下jqgrid的demo地址,以前一直准备自己写个jqgrid中文的详细文档的,一直没有完善到最后,完善后立刻上传大家学习用)会让别人更简单地去认识你这个东西:简单可信赖
简单地说了一些,日后继续补充吧。。。。。。。一个好的grid应该会慢慢地出来,慢慢地。。。。
- 大小: 861 Bytes
分享到:
相关推荐
### 深入浅谈CUDA:理解NVIDIA的GPGPU模型 #### 一、引言 CUDA(Compute Unified Device Architecture)是NVIDIA推出的一种通用并行计算架构,旨在利用图形处理器(GPU)的强大计算能力解决复杂计算问题。随着GPU...
### 深入浅出谈CUDA:关键技术与应用解析 #### CUDA概述 CUDA(Compute Unified Device Architecture)是由NVIDIA公司推出的通用并行计算架构。它允许开发者使用C、C++等高级编程语言来编写能够在GPU(图形处理器)...
总的来说,Oracle RAC通过Cache Fusion、高可用性设计和负载均衡策略,实现了在分布式环境中对单一数据库的高效、稳定访问,为大型企业级应用提供了强有力的支持。理解Oracle RAC的工作原理和特性,对于优化数据库...
此外,合理的资源调度(如服务器池和Grid Control)可以进一步优化负载均衡和性能。 总的来说,Oracle RAC是企业级数据库系统的重要选择,尤其适合需要高可用性和高性能的业务场景。理解并熟练掌握Oracle RAC的原理...
用户进程与服务器进程交互,PGA(程序全局区)和共享内存区域(如Java Pool和Large Pool)用于存储用户会话信息和特定任务的数据。 双节点Oracle RAC架构中,ABL、LMS、LMD、LMON、LCK0等是集群内的重要进程,它们...
### 深入浅出谈CUDA #### 一、引言 随着计算机技术的发展,图形处理器(Graphics Processing Unit, GPU)不仅被广泛应用于图形渲染领域,更因其强大的并行处理能力而逐渐成为通用计算的重要组成部分。NVIDIA推出的...
在CUDA的编程模型中,包括几个基本概念:主机(Host)和设备(Device),内核(Kernel),线程块(Block)和线程网格(Grid)。CPU通常充当主机角色,而GPU作为设备来执行任务。内核是CUDA程序中的函数,由主机发起...
3. 相对较低的价格:相同性能的显卡与高阶CPU相比,价格更加亲民。 然而,CUDA编程模式也存在一些缺点,比如: 1. 并行度要求高:对于无法高度并行化的任务,CUDA带来的性能提升有限。 2. 浮点数运算限制:大多数...
《深入浅出谈CUDA技术》 CUDA,全称Compute Unified Device Architecture,是由NVIDIA推出的用于通用计算的架构,旨在利用GPU(图形处理器)的强大并行处理能力,加速那些计算密集型的任务,比如科学计算、视频编...
在网页布局设计中,`div` 和 `table` 是两种常用元素,各有其优缺点,适用于不同的场景。本文将深入探讨两者如何根据实际需求进行取舍和结合利用。 首先,`table` 元素在早期网页设计中广泛用于布局,因为它们能够...
CPU通过PCI Express总线与GPU通信,但传输速度有限,因此需要尽量减少host与device之间的数据交换。 在CUDA架构下,GPU上的执行单元是线程(thread),多个线程组成一个线程块(block),线程块之间可以共享内存并...
这本书深入浅出地探讨了CSS(层叠样式表)这一核心Web开发技术,旨在帮助读者理解和掌握CSS在网页设计中的应用。 首先,CSS是网页布局和样式控制的主要手段,它允许开发者将内容与表现分离,提高网页的可维护性和可...
Oracle RAC(Real Application Clusters)是Oracle数据库的一项...通过阅读博客文章(https://stevenfeng.iteye.com/blog/1923758)和研究提供的“Oracle_RAC原理浅谈.ppt”文件,你可以进一步提升对Oracle RAC的理解。
"未来计算在云端——浅谈云计算和移动学习.pdf"可能探讨了云计算如何推动移动学习的发展,通过云服务,教育应用可以随时随地访问,为学习者提供个性化的学习体验。 "论云计算的价值.pdf"可能从经济、社会和技术创新...