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

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

(图1)

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

(图2)

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

flexigrid
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->//add cell
                             $('thead tr:first th', g.hDiv).each
                                (
                                     function() {

                                         var idx = $(this).attr('axis').substr(3);

                                         if (n.name == row.cell[idx].name) {

                                             td.align = this.align;

                                             //render(cell,row,data,index) 刘冬
                                             //cell:当前单元格的数据
                                             //row:当前行数据
                                             //data:所有数据
                                             //index:当前行号
                                             var col = n;
                                             var cell = row.cell[idx].value;
                                             if (col.render) {
                                                 td.innerHTML = col.render(cell, row, data, idx);
                                             } else {
                                                 td.innerHTML = cell;
                                             }
                                             $(tr).append(td);

                                             $(td).attr("value", cell);  //插入实际值(value)的属性
                                         }

                                     });

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

(图3)

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

(图4)

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

(图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手册

属性名

说明

类型

默认值

height

高度

数值

200

width

宽度

数值|字符

auto

striped

隔行变色

布尔

true

novstripe

显示条纹

布尔

false

minwidth

列的最小宽度

数值

30

minheight

列的最小高度

数值

80

resizable

可拖动网格大小

布尔

true

url

Ajax请求地址

字符

false

method

请求方式(POST|GET)

字符

POST

dataType

数据类型(JSON|XML,建议使用JSON)

字符

'xml'

errormsg

错误提升信息

字符

Connection Error

usepager

使用分页

布尔

false

page

当前页码

数值

1

total

总行数

数值

1

useRp

显示分页下拉列表

布尔

true

rp

每页显示行数

数值

15

rpOptions

分页设置

数组

[10, 15, 20, 25, 40],

title

显示标题

布尔

false

pagestat

显示当前页和总页面的样式,{from}、{ to }、{ total }分别为开始数、结束数、总数

字符

Displaying {from} to {to} of {total} items

procmsg

正在处理的提示信息

字符

Processing, please wait ...'

query

搜索查询的条件

字符

空字符

qtype

搜索查询的列名

字符

空字符

nomsg

无结果的提示信息

字符

No items

hideOnSubmit

隐藏提交

布尔

true

autoload

自动加载

布尔

true

blockOpacity

透明度设置

数值

0.5

onToggleCol

当在行之间转换时

布尔

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

FlexiGrid插件的使用(ASP项目)相关推荐

  1. idea插件tomcat8-maven-plugin远程部署项目~

    简介: 在项目中时常需要部署项目,在程序员的工作中大部分时间,不是再解决bug,就是在部署项目的路上,有得时候各种各样的环境,部署时间就占用了一大半. 解决方案: 1.开启tomcat的远程部署,修改 ...

  2. maven项目打包插件:将maven项目打包成一个可执行的jar(瘦jar)

    通过maven-dependency-plugin插件和maven-jar-plugin来组合,maven-jar-plugin其实是maven项目自带的,在pom文件里面不依赖也是可以的,但是我需要 ...

  3. Docker入门(运行.net core asp项目)

    1.安装docker 官网下载docker for windows,点击下一步 docker安装:https://blog.csdn.net/go_d_og/article/details/75675 ...

  4. Myeclipse10.7安装git插件并将Java项目上传到码云(github)

    注:本文来源:外匹夫的<Myeclipse10.7安装git插件并将Java项目上传到码云(github)> 一.先说说安装egit插件的步骤(安装egit不成功的原因主要是下载的egit ...

  5. maven 插件如何加载项目中的类

    maven 插件如何加载项目中的类 有不少插件希望扫描所在项目的类,如利用反射加载项目中的类,但如果不看官方文档直接开发,最初特别容易掉入一个深坑--ClassNotFoundException.因为 ...

  6. eclipse引入svn插件,并将项目同步到svn

    1. eclipse中不存在SVN问题的解决 1.1发现Team->Share project 下没有svn. 1.2下载安装svn插件. 选择help->Eclipse Marketpl ...

  7. 知识图谱前端插件_大型前端项目可持续演进开发的思考

    引言 当谈起这个话题的时候,不得不去想到<人月神话>这本著作中所描述的软件工程思想,其中的最后一段总结论述: 软件工程的焦油坑在将来很长一段时间内会继续地使人们举步维艰,无法自拔.软件系统 ...

  8. 通过插件自动将maven项目打成jar包的同时将当前项目依赖的第三方Jar包一起打包

    1.添加插件 <build><plugins><!-- 如果已经在Maven的全局配置中,配置了JDK编译的界别,这个插件可以省略 --><!-- <p ...

  9. eclipse maven插件创建java web项目(2)

    为什么80%的码农都做不了架构师?>>>    好了.马不停蹄,再来一篇使用骨架创建maven web项目的方法,大神就不要看了,小白快来学习吧 开始, 1>创建maven项目 ...

最新文章

  1. python学习第二课要点记录
  2. 搭建一个通用的脚手架
  3. 2017第35周日乱记
  4. Oracle .事物,提交,回滚
  5. MyBatis映射文件3(参数处理Map)
  6. 集成电路模拟版图入门-版图基础学习笔记(四)
  7. 第二届上汽零束SOA平台开发者大会揭幕,智能汽车生态加速落地
  8. KBL406-ASEMI整流桥KBL406
  9. java浏览 下单界面_Javaweb网上商城项目实战(24)实现订单详情查询功能
  10. 银联权益信息API接口及管理平台解决方案相关介绍
  11. UVM-- Sequencer和driver
  12. 微信支付【 wx.chooseWXPay、WeixinJSBridge.invoke】
  13. 快递查询单号查询,分享简单好用查询技巧
  14. 计算机科学与技术考研报名属于哪一类,计算机考研属于13大门类的哪一类
  15. spring boot 使用 bboss 操作 ES
  16. Unity间接光 ibl(基于图像的渲染)和SH(球谐光照)
  17. PNG warning: iCCP: known incorrect sRGB profile
  18. 移动IM开源框架对比
  19. MJ对2008年10月6日大盘预测(节后第一天)
  20. 最新:拼多多将追回所有“薅羊毛”订单,包括已充值话费和Q币订单...

热门文章

  1. Python语言-NL-数值运算
  2. NVIDIA和AMD各型号显卡超频参数一览表
  3. react 实现问卷调查(单选题目、多选题目)
  4. vue v-html 中@click 和 class 不生效问题解决方案
  5. power BI 中x轴日期值显示英文改为数值形式
  6. 常用电平标准(TTL、CMOS、LVTTL、LVCMOS、ECL、PECL、LVPECL、RS232)
  7. 基于.Net TcpListener 实现 WebSocketServer 通讯
  8. C# 使用WebSocket创建聊天室
  9. 二进制里的「逢二进一」是什么意思
  10. android6.0.1隐藏功能,安卓6.0系统界面调谐器怎么使用?安卓6.0隐藏功能开启和使用方法[多图]...