FlexiGrid插件的使用(ASP项目)
今晚看了幾篇項目應用的博客感受很深,晚上怎么都睡不著覺。于是乎,下面的博客誕生了 ^-^。
  我在想是不是要把我熟悉的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项目)的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: mac上设置ms office word
- 下一篇: GTX960M搭建《深度学习图像识别技术
