傳統軟件項目開發時，針對每個業務單據頁面需要每控件一個一個的來設計，同時需要在頁面功能中對每個控件的屬性進行判定處理，尤其是頁面風格布局樣式需要花去一大半的時間，并且后續要想修改是非常麻煩繁瑣，這樣就導 致設計完成一個功能頁面需要很長時間。問題是正常情況下很多功能是非常通用的，這就造成了重復勞作；如何快速設計頁面風格，如何快速的將常用功能集成起來，供后續直接調用使用，并且后續只要修改一個地方，凡是調用的地方就自動變更了，如何讓設計人員能通過可視化的簡單配置或簡單的JS編寫就能達到各種類型表單頁面設計要求如何提高開發效率，如何合理分配任務，如何快速維護響應...... 在這樣的思路基礎上，結合軟件項目開發經驗，開發設計了可視化頁面設計工具。通過頁面設計能快速達到以上效果，下面就來看看吧！

數據列表DataGrid

數據列表Grid控件功能：主要實現Html的Table功能，支持多表頭、固定表頭、固定列、輸出、組合查詢、編輯功能；優點：可以快速的通過數據集合生成多表頭、多樣式的列表。通過簡單的拖拉實現多層表頭。

一、基本屬性

控件名稱：控件ID，唯一標記控件的編碼，可以在右邊的部件屬性中修改；在一個頁面中，控件名稱不允許重
復；

中文標題:填寫此控件的中文描述名稱，

外文標題:填寫控件其他語種描述；

數據集合：綁定控件數據集合；

列表類型：有可編輯列表與只讀型列表兩種，在我們設計列表時應選擇好

固定列數：表示列表發布生成的網頁中，需要固定Table列數。
注意：所有的表格前面都留有兩列（一列是序號、一列是選擇），所以用戶真實的開始列是從第三列開始。

顯示行號：表示在網頁列表中顯示行號列（默認是隱藏的，第二列）

添加復選框：表示在列表中是否顯示復選框(默認隱藏，第一列)；

添加單選框：表示在列表中是否顯示單選框(默認隱藏，第一列)；

添加合計行：設置是否需要在列表中添加合計行，只有設置了，后面在列中設置的合計類型才有效。

自定義顯示列：設置是否在WEB端顯示自定義列的功能圖標按鈕。

加載進度條：設置是否顯示列表數據加載的進度條（Loading圖片）

回車新增行：如果是編輯列表時，是否允許用戶在編輯此列表最后一列時候，敲入回車自動新增一行的功能；

排序設置：定義此數據列表顯示加載的數據的排序方法，支持多個字段；直接填寫字段+空格+排序方法
(asc/desc)如有多個字段用逗號隔開

不允許為空列：表示如果是編輯列表，在編輯數據保存的時候，由于日常情況下用戶會有空行沒刪除，所以我們
定義一個不為空的列，這樣如果有空行，系統來自動判定提示用戶刪除哪些空行。

分頁模式：如果是只讀型列表，用戶可以通過分頁來顯示數據，不勾選就不分頁；

每頁行數：表示在分頁模式下，每頁所顯示的數據的條數；

分頁樣式：選擇列表分頁小圖標的風格樣式，我們提供兩種樣式；

二、控件樣式

控件樣式通過此定義能實現所見即所得的網頁控件；

寬度模式：設置控件的寬度是采用百分比還是絕對大小的方式；如果采用百分比時；控件的寬度計算方式為：當
前控件的起點坐標與當前頁面的寬度大小相減再乘以百分比來設置控件的寬度；

高度模式：設置控件的高度模式，定義含義跟寬度模式一樣，只不過比較對象是頁面的高度；

定位模式：設置列表控件的定位模式；

隱藏：是否在頁面中隱藏此控件；

滾 動 條：設置數據列表表格的滾動條

三、列表屬性

列表是表頭和數據的組成部分；列是定義數據表格的每列Column屬性；包含表頭列、數據列；注意一個列表中同一個字段不允許綁定給多個列；

列表頭部分：

列表頭即常說的列表的顯示標題；上圖為設置列表標題部分信息：

標題名稱：填寫顯示的列標題的名稱

標題列寬：設置列表的列的顯示寬度；通過列表列寬的拖拉來設置列寬

自動列寬：設置此列是否為自動寬度；

標題對齊：設置此標題列的對齊方式；

標題字體：設置此標題的字體樣式及大小；

標題溢出：設置此標題文字溢出的處理方法；

標題顏色：設置此標題文字的顏色；

隱藏該列：設置是否隱藏該列；

允許排序：設置是否允許此列可以執行數據排序功能；

列數據部分：以下部分為設置列表里數據字段信息

關聯字段：設置該列綁定的數據字段；

數據類型：設置綁定字段的數據類型（中文）

字段長度：顯示綁定的字段的長度；

小數位數：顯示綁定的字段的小數位數。

中文描述：手工填寫此數據列的中文描述。

默 認 值：設置此綁定數據列的默認值；

數據溢出：設置數據列數據溢出處理方式；

格 式 化：設置數據的顯示格式；

數據來源：當用于編輯列表時有效；設置此列數據的來源方法；

表 達 式：設置數據來源的表達式；

字符轉換：設置數據顯示方式是否轉換成大小寫；

字體大小：設置數據列的字體樣式及大小；

對齊方式：設置數據列的對齊方式；

字體顏色：設置數據列的字體顏色；前景色；

允許為空：編輯列表時有效；是否允許此列數據為空；

為空提示：編輯列表時有效；設置此列為空的時候的提示內容；

數據驗證：編輯列表時有效；設置此列在填寫數據時是否需要檢查驗證；

驗證設置：編輯列表時有效；來設置驗證的規則；即輸入時判定方法；

熱點提示：設置鼠標移動到此列上時是否顯示熱點提示；

提示文本：設置熱點提示的內容，兩種方式：1、固定的提示文本，2、顯示單元格的內容；

統計該列：只有在列表屬性中勾選了添加合計行；才有效；設置此列是否統計；

統計方式：設置此列的統計方式；

編輯屬性：當列表為可編輯列表時，定義設置每列的編輯方式；

控件類型：設置編輯的控件類型；

允許編輯：設置此列是否允許編輯；

控件配置：針對可編輯控件，可以定義其相關的編輯方法；例如下拉、輸入感應、按鈕選擇等功能；

四、條件事件

條件事件主要是定義和設置列表屬于編輯控件和只讀列表時候的相關處理方法；當作為可編輯列表時，一般過濾條件和初始條件不使用；但作為只讀型列表中，此兩個條件有非常大的作用；它作為列表數據橫向（行集）數據的過濾。

過濾條件：作為只讀列表時，過濾條件是固定的過濾條件，可以設置權限的過濾；在數據查詢、輸出時候，都執
行此數據的過濾；

初始條件：作為只讀列表時，在列表頁面數據初始化加載的時候使用，此功能主要是解決初始加載頁面的數據不
想過多，第二為了直觀的只顯示用戶關心的數據，所以增加了初始條件的功能，初始條件只在頁面加
載的時候啟用，在數據執行查詢的時候就無效；

表格行雙擊事件：定義數據列表行的雙擊事件，一般常用于列表雙擊填出編輯頁面等功能；

表格行單擊事件：定義數據列表行的單擊事件；

五、部件屬性

控件部件屬性如右圖所示：

大小：控件尺寸大小；單位為PX；

坐標：控件在頁面中的位置；

名稱：控件的ID，需要修改只能在此修改；

文本：無效；

次序：TabIndex順序

可用：是否在網頁上可用；

六、功能示范

下面通過實例示范簡單介紹一下DataGrid制作實現效果；

1、如何快速生成多表頭數據列表

1）、在數據列表中添加數據集合（綁定數據集合，再定義綁定列）

2）、在列表中添加字段

]

3）、通過拖拉左邊列表表格，實現各種復雜多樣的多表頭

在設計器中的效果圖：

4）、在web中輸出效果

總結

以上是生活随笔為你收集整理的页面设计-数据列表 DataGrid的全部內容，希望文章能夠幫你解決所遇到的問題。

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