浅谈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应该会慢慢地出来，慢慢地。。。。

评论

1 楼 courage207 2011-10-14