MiniUI小結

minmin520發表於2018-08-06
UI

雖然jQuery已經漸行漸遠，然而在某些特定的場景和專案中卻還是告別不了。基於jQuery的MiniUI框架也還應用與一些特定的場景中。

MiniUI的基本用法

1、引入(開發者只需要引用jquery.js、miniui.js、miniui.css即可)

<!DOCTYPE html />
<html>
<head>
    <title>Hello MiniUI!</title>
    <!--jQuery js-->
    <script src="../jquery.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="../themes/default/miniui.css" rel="stylesheet" type="text/css" />        
    <script src="../miniui.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>
複製程式碼

2、常見的API

mini.alert("Hello MiniUI!");
複製程式碼
// 建立MiniUI的表格
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" 
    url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
    allowResize="true" pageSize="20" 
    allowCellEdit="true" allowCellSelect="true" multiSelect="true"
>
    <div property="columns">
        <div type="checkcolumn"></div>            
        <div field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號
            <input property="editor" class="mini-textbox" style="width:100%;"/>
        </div>                
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性別
            <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
        </div>
        <div field="age" width="100" allowSort="true" >年齡
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
        </div>
        <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
        </div>    
        <div field="remarks" width="120" headerAlign="center" allowSort="true">備註
            <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
        </div>                                 
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">建立日期</div>
    </div>
</div>
複製程式碼

或者js來建立

$this.mini(mini.DataGrid,{
    width: '100%',
    autoLoad: false,
    ...
});
複製程式碼

3、mini全域性方法

mini.parse();  //將html標籤解析為miniui控制元件。
解析後，才能使用mini.get獲取到控制元件物件。
mini.layout(); 佈局調整控制元件達到合適尺寸。
mini.get(id); 根據id獲取控制元件物件
mini.getByUid(uid); 根據uid獲取控制元件物件
mini.formatNumber(number, format)	格式化數字。
format取值，參考：
小數點和千分位：format="n"
貨幣格式：format="c"。
百分比格式：format="p"。
自定義格式：format="¥#,0.00"。
複製程式碼

4、mini的表格

屬性有：data 資料物件陣列
autoLoad 自動載入資料，預設為false
columns 列物件集合
url 資料載入地址
idField 行唯一標示欄位
virtualScroll 是否虛擬滾動預設為false，當資料超過500條時可提高效能、
pageIndex 頁碼
pageSize 每頁多少條
sizeList 頁尺寸集合
sortField 排序欄位
sortOrder 排序方向
sortMode 排序方式
方法有：
setData(data) 設定資料	
load() 載入資料
gotoPage ( index, size ) 跳轉頁碼
loading ( ) 顯示載入遮罩
unmask ( ) 取消遮罩。
setTotalCount (num) 設定總記錄數
getTotalCount () 獲取總記錄數
事件有：
pagechanged 翻頁事件
    grid.on('pagechanged', function (e) {
			console.log('翻頁', e);
            refreshPagination(e.pageIndex, e.pageSize);
            initPage(e.pageIndex, e.pageSize);
            grid.gotoPage(e.pageIndex,e.pageSize);
        });
複製程式碼

5、mini的下拉框

1、下拉選單輸入框
<input class="mini-combobox" style="width:150px;" textField="text" valueField="id" 
    url="../data/countrys.txt" value="cn" showNullItem="true" allowInput="true"/> 
複製程式碼

6、mini的mini.open方法

mini.open({
    targetWindow: window,   //頁面物件。預設是頂級頁面。
    url: href,  //頁面地址
    title: title,   //標題
    iconCls: String,    //標題圖示
    width: '100%',  //寬度
    height: '100%', //高度
    allowResize: Boolean,       //允許尺寸調節
    allowDrag: Boolean,         //允許拖拽位置
    showCloseButton: Boolean,   //顯示關閉按鈕
    showMaxButton: Boolean,     //顯示最大化按鈕
    showModal: Boolean,         //顯示遮罩
    loadOnRefresh: false,       //true每次重新整理都激發onload事件
    onload: function () {
        var iframe = this.getIFrameEl(); 
        var data = {};       
        //呼叫彈出頁面方法進行初始化
        iframe.contentWindow.SetData(data); 
    },
    ondestroy: function (action) {
        if (action == "ok") {
            var iframe = this.getIFrameEl();
            //獲取選中、編輯的結果
            var data = iframe.contentWindow.GetData();
            data = mini.clone(data);    //必須。克隆資料。
            if (window.CloseOwnerWindow) {
                return window.CloseOwnerWindow('ok');
            } else {
                window.close();
            }
        }
    }
}
複製程式碼

參考： www.miniui.com/

相關文章