jQuery MIniUI 的使用教程入門

一、爲什麼要使用MIniUI

1. 縮短開發時間，減少代碼量，提升用戶體驗 ；
2. 快速開發web界面 ；
3. 豐富控件：包含表格、樹、數據驗證、佈局導航等五十個以上的控件 ；
4. 超強表格：提供鎖定行、多表頭、分頁排序、行過濾、數據彙總、單元格編輯、詳細行、Excel導出等功能 ；
5. 不足的是該UI框架不是開源的 ;
   

二、快速入門

1. 官網：http://miniui.com ;
2. 下載MIniUI，並引用jquery.js、miniui.js、miniui.css即可 ；

<!--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>

三、項目常用控件(點擊查看詳情)

Layout (佈局)
Toolbar (工具欄)
Datagrid (數據網格)
Button (按鈕)
Buttonedit (按鈕編輯框)
Textbox (文本框)
Combobox (下拉列表框)
Spinner (數值調節器)
Checkbox (複選框)
數據驗證
Datapicker (日期選擇框)
form (表單)

miniui icon

四、使用方法

1. 查找在線示例
   確定demo
   拷貝code
2. 查看api手冊
   確定屬性作用
   修改屬性值，綁定數據url （例：‘url="@url.Action(‘GetNodeRelationList’)"’)
3. 使用MIniUI控件
   初始化mini.parse();
   獲取控件 (例: var grid = mini.get(“datagrid”); 使用ID獲取控件)
   調用控件方法 (例: grid.load(); 調用控件方法)

點擊查看 MIniUI 完整的api 文檔

五、UI和數據分離

jQuery MiniUI 不關心服務器的處理。

它只關注：

1. url地址是什麼;
2. 傳遞什麼參數;
3. 服務器的url地址返回什麼json數據;

服務器開發者可以集中精力,使用各種web開發框架。

$.ajax({
    type:"post";
    url:"@url.Action("Del")",
    data:{id:row.id},
    success:function(res){
        if(res.code===0){
            grid.removeRow(row,true);
            alert("刪除成功!");
        }else{
            alert(res.msg)
        }
        grid.unmask();
    }
})