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>

Head标签内代码

2> 完成界面上内容以后，其实布局已经出来，但是这个DataGrid是没有数据的，它的数据来源就是那个 div-url 的属性，它的属性是一个返回值（就是后台的一个方法名），另外这个方法还需要两个辅助的方法，具体代码如下：

 public void JsonHtml()
 {
     //新建表
     int sum = ;
     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 = ; i < sum + ; 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 = , 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));
 }

后台JsonHtml()

 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);
 }

后台MyEncode()

 private static ArrayList DataTableToArrayList(DataTable data)
 {
     ArrayList array = new ArrayList();
     for (int i = ; i < data.Rows.Count; i++)
     {
         DataRow row = data.Rows[i];
         Hashtable record = new Hashtable();
         for (int j = ; 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;
 }

后台DataTableToArrayList()

3> 接下来我们就可以运行编译，查看效果了，值得注意的是： 官网所给出属性列表很多，需要的样式需要仔细调试，比如显示分页...就得多看它的API了。

技术文档：http://miniui.com/docs/api/index.html

第一次如此欢快的写技术文档，如有纰漏，还请指正！