今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉。于是乎,下面的博客诞生了 ^-^。
我在想是不是要把我熟悉的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 插件简单应用从英文版本改为简体中文版本
这是介绍JQuery表格插件FlexiGrid在Java中的使用,使用Servlet进行开发,json传递数据
jsp中flexigrid插件在ie下样式问题
神州数码易拓TIPTOP ERP集成WEB应用(Flexigrid插件使用)
Flexigrid-表格,所属jquery
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本资源是...
JQuery_插件FlexiGrid_之完全配置与使用
NULL 博文链接:https://gundumw100.iteye.com/blog/531131
FlexiGrid配置与使用说明,不错的文档
Flexigrid-Web2.0 jQuery表格插件 Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性,如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。 一个中文实例教程: ...
jquery表格插件Flexigrid 将数据按照表格排列,类似与ext。
FlexiGrid列宽可固定可自适应(比如序号和操作列就是固定宽,其他是自适应宽),列宽调整,以上两项最好支持。列排序,列拖拽,行拖拽,列表编辑非常好用的轻量级的表格插件
flexigrid表格插件 非常漂亮的表格插件
Jquery flexigrid插件 添加了checkbox,将它设置为true就OK了 (双击事件)onRowDblclick。。。 附带属性说明 共享下。。。。。
此项目是struts2+json+flexigrid的完整实例,可帮助你对flexigrid快速上手,项目下载后直接导入自己的工程即可,所用jar包会另传,因为超出上传限制,还请理解。
flexigrid使用实例,源代码演示为php
jquery 表格插件 Flexigrid
Flexigrid它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
FlexiGrid使用教程
jquery flexigrid 与asp.net 的交互,并实现了crud 。提供了sqlserer oracle 等数据库的操作。