首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

FlexiGrid插件的应用(ASP项目)

2012-11-25 
FlexiGrid插件的使用(ASP项目)今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉。于是乎,下面的博客

FlexiGrid插件的使用(ASP项目)

今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉。于是乎,下面的博客诞生了 ^-^。

  我在想是不是要把我熟悉的Spring.NET框架与别的框架或技术结合起来。由于心血来潮,斗胆在园子里这么多大牛的面前班门弄斧了。长话短说,下面是我项目中用到的技术(图1):
1.JQuery的FlexiGrid插件
2.ASP.NET MVC
3.NVelocity?目前没有与MVC结合,只是用来简单的替换模板
4.WCF
5.LINQ
6.NHibernate

FlexiGrid插件的应用(ASP项目)(图1)

?这个项目目前版本是V1.0版本,我以后会定期更新这个项目。该项目包含了18个类库(图2)。我后续会更新这篇文章和代码,试图打造一套完美的解决方案。

FlexiGrid插件的应用(ASP项目)(图2)

项目中主要用到的是FlexiGrid插件,该插件类似Ext的GridPanel。我把这个插件简单的修改了一下,只能更多的功能

FlexiGrid插件的应用(ASP项目)//add?cell
FlexiGrid插件的应用(ASP项目)?????????????????????????????$('thead?tr:first?th',?g.hDiv).each
FlexiGrid插件的应用(ASP项目)????????????????????????????????(
FlexiGrid插件的应用(ASP项目)FlexiGrid插件的应用(ASP项目)?????????????????????????????????????function()?FlexiGrid插件的应用(ASP项目){
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????var?idx?=?$(this).attr('axis').substr(3);
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????if?(n.name?==?row.cell[idx].name)?FlexiGrid插件的应用(ASP项目){
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????td.align?=?this.align;
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????//render(cell,row,data,index)?刘冬
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????//cell:当前单元格的数据
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????//row:当前行数据
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????//data:所有数据
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????//index:当前行号
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????var?col?=?n;
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????var?cell?=?row.cell[idx].value;
FlexiGrid插件的应用(ASP项目)FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????if?(col.render)?FlexiGrid插件的应用(ASP项目){
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????????td.innerHTML?=?col.render(cell,?row,?data,?idx);
FlexiGrid插件的应用(ASP项目)FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????}?else?FlexiGrid插件的应用(ASP项目){
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????????td.innerHTML?=?cell;
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????}
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????$(tr).append(td);
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????????$(td).attr("value",?cell);??//插入实际值(value)的属性
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????????}
FlexiGrid插件的应用(ASP项目)
FlexiGrid插件的应用(ASP项目)?????????????????????????????????????});

?

先秀一下FlexiGrid 的效果(图3)

FlexiGrid插件的应用(ASP项目)(图3)

?

  还用到了jquery.UI和jquery.form插件(图4)

FlexiGrid插件的应用(ASP项目)(图4)

?

  NVelocity ,我是用于导出Excel。首先写一个XML格式的模板,然后用其替换上面的内容,最后输入Excel文件(图5)

FlexiGrid插件的应用(ASP项目)(图5)

?

  至于WCF,我放弃了Runtime.Serialization功能,而改用引用实体和契约(Contract)。

  V1.0版本中 FlexiGrid功能列表:
  1.数据的增删改
  2.显示/隐藏列
  3.页面中绑定列
  4.计算列(A列与B列的计算),小计,合计
  5.导出Excel
  6.设置分页数量

  扩增FlexiGrid API
  1.在colModel的配置中增加render方法,其中有4个参数
  cell:单元格焦点的数据, row:该行数据, data:所有数据, index:行号。
  通过这些参数我们可以实现计算列、小计、合计、序号等功能。§
  例如:render: function(cell, row, data, index) {
??????????????? return cell ? "男" : "女"?;
??????????? }

  2.在获取当前行中数据的函数$('.trSelected td:nth-child(1)', grid)中,参数value属性。通过value可以获取当前单元格的值,而不是显示出的内容。
  如:显示"男"?,获取到true

  存在的Bug
  1.jquery.flexbox插件实现下拉框的动态选择
  2.FlexiGrid服务器端筛选(过滤)

?

FlexiGrid中文API手册

false

?

?

  FlexiGrid修改版下载

  代码下载
  SVN代码托管地址:http://springnetdemo1.googlecode.com/svn/trunk/

  版权所有:博客园?刘冬.NET

  感谢朋友对我的支持,和经常探讨问题的朋友们?孤独侠客 莫耶

  参考:
  http://www.cnblogs.com/lonely7345/archive/2009/02/03/1382780.html
  http://www.cnblogs.com/moye/archive/2008/11/30/1344369.html

热点排行