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修改版下載
代碼下載
轉載于:https://www.cnblogs.com/yunchun86/archive/2009/12/10/1621450.html
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的Spring.NET企业架构实践之 JQuery + FlexiGrid + ASP.NET MVC + NVelocity + WCF + LINQ + NHibernate 综合应用...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 战神z6怎么改win7 战神z6升级wi
- 下一篇: GetHashCode() 的研究