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

　　我在想是不是要把我熟悉的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项目)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。