MiniUI DataGrid 頁面分頁-前端分頁
作為一種前框開發指令碼，Mini 目前已經到了3.0.對於Mini的使用，各類介紹也有不少，官網http://www.miniui.com/demo/ 也有不少介紹。但是具體到一些應用，總是有些差別。
具體而言，Datagrid 分頁可分為兩種模式，一種是將資料取回到前端，在前端做分頁，另一種是 將引數傳遞到後臺，獲取了分頁結果後直接傳遞迴前端。
在使用miniui datagrid 控制元件之前，需要引入 兩個js 檔案，兩個css 檔案
js：
jquery-1.8.2.min.js （jquery版本可以是最新，但是必須是 .mini）
miniui.js
css:
miniui.css (預設情況下在miniui 外掛的 default 路徑下
icons.css
以asp mvc 作為後臺開發語言，具體做法
1，應用visio studio 2013 開發模板，生成 mvc 基本 專案模組；
2，Controllers 建立控制器 demoController
public class DemoController : Controller
{
//
// GET: /Demo/public ActionResult Index()
{
return View();
}}
3，通過控制器生成對應的檢視 index.cshtml
@{
ViewBag.Title = "DataGrid 資料表格 前臺頁面分頁";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@ViewBag.Title</title>
<h2>@ViewBag.Title</h2>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/miniui.js"></script>
<link href="~/Content/icons.css" rel="stylesheet" />
<link href="~/Content/default/miniui.css" rel="stylesheet" />
</head>
<body>
<div id="datagrid1" class="mini-datagrid" style="width:600px;height:280px;" idfield="id" pagesize="3" showpager="false">
<div property="columns">
<div type="indexcolumn">順序</div>
<div field="price" width="120" headeralign="center" allowsort="true">價格</div>
<div field="quantity" width="100" allowsort="true">數量</div>
</div>
</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
// 分頁填充細節處理
function fillData(pageIndex, pageSize, dataResult, grid) {var data = dataResult.data, totalCount = dataResult.total;
var arr = [];
var start = pageIndex * pageSize, end = start + pageSize;
for (var i = start, l = end; i < l; i++) {
var record = data[i];
if (!record) continue;
arr.push(record);
}grid.setTotalCount(totalCount);
grid.setPageIndex(pageIndex);
grid.setPageSize(pageSize);
grid.setData(arr);
}
// 監聽分頁前事件，阻止後自行設定當前資料和分頁資訊
grid.on("beforeload", function (e) {
e.cancel = true;
var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
fillData(pageIndex, pageSize, dataResult, grid);
});
////////////////////////////////////////////////////////////////////////
// 獲取所有資料和總記錄數 { total: 100, data: [...] }
var dataResult = null;
$.ajax({
url: '../data.txt',
dataType: 'text',
success: function (text) {
dataResult = mini.decode(text);
fillData(0, grid.getPageSize(), dataResult, grid);
}
});
</script>
</body>
</html>4, 編寫 data.txt檔案，將資料存放為json 格式
{
total: 6,
data: [
{price:'100',quantity:'20'},
{price:'200',quantity:'30'},
{price:'300',quantity:'40'},
{price:'400',quantity:'50'},
{price:'500',quantity:'60'},
{price:'600',quantity:'70'}
]
}5，編譯執行後，出現以下效果頁面
至此，分頁效果完成。