Spring.NET企業架構實踐之 JQuery + FlexiGrid + ASP.NET MVC + NVelocity + WCF + LINQ + NHibernate 綜合應用

　今晚看了幾篇項目應用的博客感受很深，晚上怎麼都睡不着覺。於是乎，下面的博客誕生了 ^-^。

　　我在想是不是要把我熟悉的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 //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