1. 程式人生 > >easyUI常見屬性

easyUI常見屬性

4、input/textarea easyui-validatebox       生成欄位驗證。
              屬性如下:
              1)required:true[必需] false[不必需] 預設false
              2)validType:
                 a、length[a,b] 欄位長度控制在a至b之間。
                 b、email       驗證Email。
                 c、url      驗證網路地址。
              3)missingMessage:當文字時出現空時彈出該工具提示,系統有預設[英文],自定義可覆蓋它。
              4)invalidMessage:當文字內容無效後彈出該工具提示,系統有預設[英文],自定義可覆蓋它。

5、
ul easyui-tree 
        生成一個樹形結構。
             屬性如下:
              1)url:一個獲取遠端資料的地址。
              2)animate:當展開或摺疊節點時是否定義動畫效果。true[是] false[否] 預設false
             節點屬性如下:
             1)text:節點的顯示文字。
             2)id:節點ID,對於載入遠端資料時非常重要。
             3)state:節點狀態,'open'或'closed',預設為'open'。當設定為'關閉',該節點包含子節點,並將遠端站點載入它們(並非觸發再載入)。
             4)attributes:為節點新增自定義屬性。
             5)children:以陣列節點的方式定義一些位元組點。
             事件如下:
                 1)onClick:
                    當用戶點選一個節點時啟用,該節點引數包含如下屬性:
                    id:節點ID
                    text:節點文字
                    attributes:節點自定義屬性。
                    target:目標點選的DOM物件。
              2)onLoadSuccess:
                   當資料成功載入資料時啟用,該引數跟jQuery.ajax的'success'函式效果相同。
              3)onLoadError:
                  當資料載入資料失敗時啟用,該引數跟jQuery.ajax的'error'函式效果相同。
             方法如下:
                 1)reload:重新載入樹資料。
                 2)getSelected:獲取選中的節點並返回它,如果沒有選擇節點將返回null。
                 3)collapse:摺疊一個節點,該目標引數是該節點的DOM物件。
              4)expand:展開一個節點,該目標引數是該節點的DOM物件。  
              5)append:在一個父節點追加一些子節點。
                    param有兩個屬性:
                    parent:DOM物件,把它作為父節點追加(它們)。
                    data:array,或者節點資料。
              6)remove:刪除它以及它以下的子節點,該目標引數是該節點的DOM物件。 

6、
table easyui-datagrid 
                  生成一個表格。
             屬性如下:
                 1)title:該DataGrid面板的標題文字。
                 2)iconCls:一個CSS類,將提供一個背景圖片作為標題圖示。
                 3)border:當true時,顯示該datagrid面板的邊框。
                 4)width:面板寬度,自動列寬。
                 5)height:面板高度,自動列高。
                 6)columns:該DataGrid列配置物件,檢視column屬性可獲取更多資訊。
                 7)frozenColumns:跟Columns屬性相同,但是這些列將會被固定在左邊。
                 8)striped:當true時,單元格顯示條紋。預設false。
                 9)method:通過該方法型別請求遠端資料。預設post。
                10)nowrap:當true時,顯示資料在同一行上。預設true。
                11)idField:說明哪個欄位是一個標識欄位。
                12)url:一個URL,從遠端站點獲取資料。
                13)loadMsg:當從遠端站點載入資料時,顯示一個提示資訊。預設"Processing,please wait …"。自定義覆蓋。
                14)pagination:當true時在DataGrid底部顯示一個分頁工具欄。預設false。
                15)rownumbers:當true時顯示行號。預設false。
                16)singleSelect:當true時只允許當前選擇一行。預設false。
                17)fit:當true時,設定大小以適應它的父容器。預設false。
                18)pageNumber:當設定分頁屬性時,初始化的頁碼編號。預設從1開始
                19)pageSize:當設定分頁屬性是,初始化的頁面大小。預設10行
                20)pageList:當設定分頁屬性時,初始化頁面的大小選擇清單。預設[10,20,30,40,50]
                21)queryParams:當請求遠端資料時,也可以傳送額外的引數。
                22)sortName:定義哪列可以排序。
                23)sortOrder:定義列的排列順序,只能是'asc'或'desc'。預設asc。
             Column屬性如下:
                 1)title:該列標題文字。
                 2)field:該列對應的欄位名稱。
                 3)width:列寬。
                 4)rowspan:說明該單元格需要多少行數。
                 5)colspan:說明該單元格需要多少列數。
                 6)align:說明Column資料的對齊方式。'left','right','center' 都可以使用。
                 7)sortable:當true時,允許該列進行排序。
                 8)checkbox:當true時,允許該列出現checkbox。
             事件如下:
                 1)onLoadSuccess:當遠端資料載入成功是啟用。
                 2)onLoadError:當遠端資料載入發現一些錯誤時啟用。
                 3)onClickRow:當用戶點選某行時啟用,引數包含:
                    rowIndex: 點選的行索引,從0開始。
                    rowData: 點選行時對應的記錄。
                4)onDblClickRow:當用戶雙擊某行時啟用,引數包含:
                    rowIndex: 點選的行索引,從0開始。
                    rowData: 點選行時對應的記錄。
                5)onSortColumn:當用戶對某列排序時啟用,引數包含:
                   sort:排序欄位名稱。
                   order:排序欄位型別。
                6)onSelect:當用戶選擇某行時啟用,引數包含:
                   rowIndex: 點選的行索引,從0開始。
                   rowData: 點選行時對應的記錄。
                7)onUnselect:當用戶取消選擇某行時啟用,引數包含:
                    rowIndex: 點選的行索引,從0開始。
                    rowData: 點選行時對應的記錄。
             方法如下:
                 1)options:返回選擇物件。
                 2)resize:重調大小,生成佈局。
                 3)reload:重新載入資料。
                 4)fixColumnSize:固定列大小。
                 5)loadData:載入本地資料,過去的行會被刪除。
                 6)getSelected:返回第一個選中行的記錄,若未選返回null。
                 7)getSelections:返回選中的所有行,當沒有選擇記錄時將返回空陣列。
                 8)clearSelections:清除所有選項的選擇狀態。
                 9)selectRow:選擇一行,行索引從0開始。
                10)selectRecord:通過傳遞一個ID值引數,選擇一行。
                11)unselectRow:取消選擇一行。

7、
div easyui-tabs 
                        生成一個tab容器。
             屬性如下:
                 1)width:容器寬度,自動列寬。
                 2)height:容器高度,自動列高。
                 3)idSeed:該根id衍生成標籤面板DOM id屬性。預設0
                 4)plain:當true時,該Tab渲染不使用容器背景圖片。預設false
                 5)fit:當true時,設定該Tab大小以適應它的父容器。預設false
                 6)border:當true時,顯示該Tab邊框。
                 7)scrollIncrement:
                 8)scrollDuration:
             事件如下:
                 1)onLoad:當一個ajax Tab面板需要載入遠端資料時啟用。該引數跟jQuery.ajax的'success'函式效果相同。
                 2)onSelect:當用戶選擇一個Tab面板時啟用。
                 3)onClose:當用戶關閉一個Tab面板時啟用。
             方法如下:
                 1)resize:重繪該Tab容器的佈局。
                 2)add:新增加一個Tab面板,該選項引數是一個配置物件,看Tab面板屬性可獲取更多資訊。
                 3)close:關閉該Tab面板,標題引數顯示你要關閉的物件。
                 4)select:選擇一個Tab面板。
                 5)exists:如果該Tab面板存在即顯示。
             Tab面板屬性如下:
                 1)id:該Tab面板DOM id屬性。
                 2)text:該Tab面板標題文字。
                 3)content:該Tab面板內容。
                 4)href:一個URL,載入遠端內容以填充Tab面板。
                 5)cache:當true時,快取Tab面板,當href 屬性設定後有效。預設true
                 6)icon:增加一個CSS class圖示以顯示在Tab面板的標題旁。
                 7)closable:當true時,該Tab面板將顯示可關閉按鈕,點選能關閉該Tab面板。預設false
                 8)selected:當true時,該Tab面板將被選中。預設false
                 9)width:面板寬度,自動列寬。
                10)height:面板高度,自動列高。

8、div menu-sep              生成一個選單分隔線。