MiniUI中DataGrid數據的載入

本文將介紹一下，在ASP.NET MVC環境下，如何用Jquery MiniUI中的Datagrid控件載入數據。

1.效果展示：

---

 

 

 

 

 

 

 

 

 

 

 

 

 

2.具體步驟：

---

1>  既然是在MVC里，那我們的界面自然選擇cshtml，界面內代碼如下：

<!--需要引用的文件-->
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<link href="~/Content/miniui.css" rel="stylesheet" />
<script src="~/Scripts/miniui.js"></script>
<link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    table {
        margin-top: 0;
    }
</style>

<div id="datagrid1" class="mini-datagrid" style="width:600px;height:380px;" url="JsonHtml" allowresize="true" sizelist="[10,20,30,50]" 
pagesize="10" allowcellselect="true" multiselect="true">
    <div property="columns">
        <div type="checkcolumn" headeralign="center" ="center"></div>
        <div type="indexcolumn" headeralign="center" ="center">序號</div>
        <div field="d1" headeralign="center" ="center" width="80">時間</div>
        <div field="d2" headeralign="center" ="center" width="80">賽制</div>
        <div field="d3" headeralign="center" ="center" width="80">戰績</div>
    </div>
</div>

 

2> 完成界面上內容以后，其實布局已經出來，但是這個DataGrid是沒有數據的，它的數據來源就是那個 div-url 的屬性，它的屬性是一個返回值（就是后台的一個方法名），另外這個方法還需要兩個輔助的方法，具體代碼如下：

public void JsonHtml()
{
    //新建表
    int sum = 10;
    DataTable dt = new DataTable();
    DataColumn dc1 = new DataColumn("d1", Type.GetType("System.String"));
    DataColumn dc2 = new DataColumn("d2", Type.GetType("System.String"));
    DataColumn dc3 = new DataColumn("d3", Type.GetType("System.String"));
    dt.Columns.Add(dc1);
    dt.Columns.Add(dc2);
    dt.Columns.Add(dc3);
    //循環添加數據
    for (int i = 1; i < sum + 1; i++)
    {
        DataRow dr = dt.NewRow();
        dr["d1"] = "2015-10-20";
        dr["d2"] = "排位賽 第" + i + "場";
        dr["d3"] = "10殺 0死 0助攻";
        dt.Rows.Add(dr);
    }
    //設置表的頁碼，如果缺失，會導致數據無法顯示
    int pageIndex = Convert.ToInt32(Request["pageIndex"]);
    int pageSize = Convert.ToInt32(Request["pageSize"]);
    //將數據轉換相應的格式
    ArrayList AlData = DataTableToArrayList(dt);
    int index = pageIndex, size = pageSize;
    ArrayList data = new ArrayList();
    int start = index * size, end = start + size;
    for (int i = 0, l = AlData.Count; i < l; i++)
    {
        Hashtable record = (Hashtable)AlData[i];
        if (record == null) continue;
        if (start <= i && i < end)
        {
            data.Add(record);
        }
    }
    Hashtable result = new Hashtable();
    result["data"] = data;
    result["total"] = sum;
    //輸出數據和總條數
    Response.Write(MyEncode(result));
}

 

public static string MyEncode(object o)
{
    if (o == null || o.ToString() == "null") return null;
    if (o != null && (o.GetType() == typeof(String) || o.GetType() == typeof(string)))
    {
        return o.ToString();
    }
    IsoDateTimeConverter dt = new IsoDateTimeConverter();
    dt.DateTimeFormat ="yyyy'-'MM'-'dd'T'HH':'mm':'ss";
    return JsonConvert.SerializeObject(o, dt);
}

 

private static ArrayList DataTableToArrayList(DataTable data)
{
    ArrayList array = new ArrayList();
    for (int i = 0; i < data.Rows.Count; i++)
    {
        DataRow row = data.Rows[i];
        Hashtable record = new Hashtable();
        for (int j = 0; j < data.Columns.Count; j++)
        {
            object cellValue = row[j];
            if (cellValue.GetType() == typeof(DBNull))
            {
                cellValue = null;
            }
            record[data.Columns[j].ColumnName] = cellValue;
        }
        array.Add(record);
    }
    return array;
}

 

3> 接下來我們就可以運行編譯，查看效果了，值得注意的是： 官網所給出屬性列表很多，需要的樣式需要仔細調試，比如顯示分頁...就得多看它的API了。

 

技術文檔：http://miniui.com/docs/api/index.html

 

第一次如此歡快的寫技術文檔，如有紕漏，還請指正！