`
zhangyaochun
  • 浏览: 2612825 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

浅谈grid的设计与性能

阅读更多

其实无论是入行开始还是到现在,对于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的区别)
  •  部分dom操作的优化
    -----举个简单的例子,我要编写开发的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绑定的功能
  比如以前做的定义绑定默认新增修改删除的按钮,实现默认常见功能,让一般的开发者不用考虑过多的交互。当然如果有业务逻辑的话,可能就需要增加一些逻辑判断等等。

  • 困惑
  其实以前作为技术研发部门的一名开发人员,时常被各个产品线或者项目组抱怨你们设计的组件扩展性不是很好,其实一直在想,作为底层的编写人员,我们不应该过多地带入一些业务的逻辑到我们的grid里面,但是必要的接口还是得预先地预留好。这说的简单,但是这个“”的把握很重要。

  • 还是要说一下:一份好的说明文档会比什么多好,配置,api的例子也好或者ppt简介,(当然这一点很赞一下jqgrid的demo地址,以前一直准备自己写个jqgrid中文的详细文档的,一直没有完善到最后,完善后立刻上传大家学习用)会让别人更简单地去认识你这个东西:简单可信赖


简单地说了一些,日后继续补充吧。。。。。。。一个好的grid应该会慢慢地出来,慢慢地。。。。
  • 大小: 861 Bytes
分享到:
评论
1 楼 courage207 2011-10-14  
 

相关推荐

    深入浅谈CUDA

    ### 深入浅谈CUDA:理解NVIDIA的GPGPU模型 #### 一、引言 CUDA(Compute Unified Device Architecture)是NVIDIA推出的一种通用并行计算架构,旨在利用图形处理器(GPU)的强大计算能力解决复杂计算问题。随着GPU...

    深入浅出谈CUDA

    ### 深入浅出谈CUDA:关键技术与应用解析 #### CUDA概述 CUDA(Compute Unified Device Architecture)是由NVIDIA公司推出的通用并行计算架构。它允许开发者使用C、C++等高级编程语言来编写能够在GPU(图形处理器)...

    深入浅出谈CUDA(基于显卡的高性能并行计算)

    ### 深入浅出谈CUDA:基于显卡的高性能并行计算 #### CUDA概览与背景 CUDA,全称Compute Unified Device Architecture,是NVIDIA公司推出的一种并行计算平台和编程模型,它允许开发者利用NVIDIA GPU的强大计算能力...

    Oracle_RAC原理浅谈

    总的来说,Oracle RAC通过Cache Fusion、高可用性设计和负载均衡策略,实现了在分布式环境中对单一数据库的高效、稳定访问,为大型企业级应用提供了强有力的支持。理解Oracle RAC的工作原理和特性,对于优化数据库...

    Oracle-RAC原理浅谈.ppt

    此外,合理的资源调度(如服务器池和Grid Control)可以进一步优化负载均衡和性能。 总的来说,Oracle RAC是企业级数据库系统的重要选择,尤其适合需要高可用性和高性能的业务场景。理解并熟练掌握Oracle RAC的原理...

    Oracle RAC原理浅谈.pptx

    用户进程与服务器进程交互,PGA(程序全局区)和共享内存区域(如Java Pool和Large Pool)用于存储用户会话信息和特定任务的数据。 双节点Oracle RAC架构中,ABL、LMS、LMD、LMON、LCK0等是集群内的重要进程,它们...

    深入浅出谈 CUDA (好)

    ### 深入浅出谈CUDA #### 一、引言 随着计算机技术的发展,图形处理器(Graphics Processing Unit, GPU)不仅被广泛应用于图形渲染领域,更因其强大的并行处理能力而逐渐成为通用计算的重要组成部分。NVIDIA推出的...

    深入浅出谈CUDA技术

    在CUDA的编程模型中,包括几个基本概念:主机(Host)和设备(Device),内核(Kernel),线程块(Block)和线程网格(Grid)。CPU通常充当主机角色,而GPU作为设备来执行任务。内核是CUDA程序中的函数,由主机发起...

    CUDA(深入浅出谈CUDA)

    3. 相对较低的价格:相同性能的显卡与高阶CPU相比,价格更加亲民。 然而,CUDA编程模式也存在一些缺点,比如: 1. 并行度要求高:对于无法高度并行化的任务,CUDA带来的性能提升有限。 2. 浮点数运算限制:大多数...

    2008-深入浅出谈CUDA技术

    《深入浅出谈CUDA技术》 CUDA,全称Compute Unified Device Architecture,是由NVIDIA推出的用于通用计算的架构,旨在利用GPU(图形处理器)的强大并行处理能力,加速那些计算密集型的任务,比如科学计算、视频编...

    浅谈 div 与 table 如何取舍结合利用

    在网页布局设计中,`div` 和 `table` 是两种常用元素,各有其优缺点,适用于不同的场景。本文将深入探讨两者如何根据实际需求进行取舍和结合利用。 首先,`table` 元素在早期网页设计中广泛用于布局,因为它们能够...

    GPU计算]深入浅出谈CUDA技术

    CPU通过PCI Express总线与GPU通信,但传输速度有限,因此需要尽量减少host与device之间的数据交换。 在CUDA架构下,GPU上的执行单元是线程(thread),多个线程组成一个线程块(block),线程块之间可以共享内存并...

    EricMeyer谈CSS卷1.rar

    这本书深入浅出地探讨了CSS(层叠样式表)这一核心Web开发技术,旨在帮助读者理解和掌握CSS在网页设计中的应用。 首先,CSS是网页布局和样式控制的主要手段,它允许开发者将内容与表现分离,提高网页的可维护性和可...

    oracle rac 原理

    Oracle RAC(Real Application Clusters)是Oracle数据库的一项...通过阅读博客文章(https://stevenfeng.iteye.com/blog/1923758)和研究提供的“Oracle_RAC原理浅谈.ppt”文件,你可以进一步提升对Oracle RAC的理解。

    yunjisuanxueshulunwen

    "未来计算在云端——浅谈云计算和移动学习.pdf"可能探讨了云计算如何推动移动学习的发展,通过云服务,教育应用可以随时随地访问,为学习者提供个性化的学习体验。 "论云计算的价值.pdf"可能从经济、社会和技术创新...

Global site tag (gtag.js) - Google Analytics