本文将介绍一下，在ASP.NET MVC环境下，如何用Jquery MiniUI中的Datagrid控件载入数据。
1.效果展示：
2.具体步骤：
1> 既然是在MVC里，那我们的界面自然选择cshtml，界面内代码如下：
1 <!--需要引用的文件--> 2 <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> 3 <script src="~/Scripts/jquery-1.8.2.js"></script> 4 <link href="~/Content/miniui.css" rel="stylesheet" /> 5 <script src="~/Scripts/miniui.js"></script> 6 <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /> 7 <style type="text/css"> 8 table { 9 margin-top: 0; 10 } 11 </style> 12 13 <div id="datagrid1" class="mini-datagrid" style="600px;height:380px;" url="JsonHtml" allowresize="true" sizelist="[10,20,30,50]" 14 pagesize="10" allowcellselect="true" multiselect="true"> 15 <div property="columns"> 16 <div type="checkcolumn" headeralign="center" ="center"></div> 17 <div type="indexcolumn" headeralign="center" ="center">序号</div> 18 <div field="d1" headeralign="center" ="center" width="80">时间</div> 19 <div field="d2" headeralign="center" ="center" width="80">赛制</div> 20 <div field="d3" headeralign="center" ="center" width="80">战绩</div> 21 </div> 22 </div>
2> 完成界面上内容以后，其实布局已经出来，但是这个DataGrid是没有数据的，它的数据来源就是那个 div-url 的属性，它的属性是一个返回值（就是后台的一个方法名），另外这个方法还需要两个辅助的方法，具体代码如下：
1 public void JsonHtml() 2 { 3 //新建表 4 int sum = 10; 5 DataTable dt = new DataTable(); 6 DataColumn dc1 = new DataColumn("d1", Type.GetType("System.String")); 7 DataColumn dc2 = new DataColumn("d2", Type.GetType("System.String")); 8 DataColumn dc3 = new DataColumn("d3", Type.GetType("System.String")); 9 dt.Columns.Add(dc1); 10 dt.Columns.Add(dc2); 11 dt.Columns.Add(dc3); 12 //循环添加数据 13 for (int i = 1; i < sum + 1; i++) 14 { 15 DataRow dr = dt.NewRow(); 16 dr["d1"] = "2015-10-20"; 17 dr["d2"] = "排位赛 第" + i + "场"; 18 dr["d3"] = "10杀 0死 0助攻"; 19 dt.Rows.Add(dr); 20 } 21 //设置表的页码，如果缺失，会导致数据无法显示 22 int pageIndex = Convert.ToInt32(Request["pageIndex"]); 23 int pageSize = Convert.ToInt32(Request["pageSize"]); 24 //将数据转换相应的格式 25 ArrayList AlData = DataTableToArrayList(dt); 26 int index = pageIndex, size = pageSize; 27 ArrayList data = new ArrayList(); 28 int start = index * size, end = start + size; 29 for (int i = 0, l = AlData.Count; i < l; i++) 30 { 31 Hashtable record = (Hashtable)AlData[i]; 32 if (record == null) continue; 33 if (start <= i && i < end) 34 { 35 data.Add(record); 36 } 37 } 38 Hashtable result = new Hashtable(); 39 result["data"] = data; 40 result["total"] = sum; 41 //输出数据和总条数 42 Response.Write(MyEncode(result)); 43 }
1 public static string MyEncode(object o) 2 { 3 if (o == null || o.ToString() == "null") return null; 4 if (o != null && (o.GetType() == typeof(String) || o.GetType() == typeof(string))) 5 { 6 return o.ToString(); 7 } 8 IsoDateTimeConverter dt = new IsoDateTimeConverter(); 9 dt.DateTimeFormat ="yyyy'-'MM'-'dd'T'HH':'mm':'ss"; 10 return JsonConvert.SerializeObject(o, dt); 11 }
1 private static ArrayList DataTableToArrayList(DataTable data) 2 { 3 ArrayList array = new ArrayList(); 4 for (int i = 0; i < data.Rows.Count; i++) 5 { 6 DataRow row = data.Rows[i]; 7 Hashtable record = new Hashtable(); 8 for (int j = 0; j < data.Columns.Count; j++) 9 { 10 object cellValue = row[j]; 11 if (cellValue.GetType() == typeof(DBNull)) 12 { 13 cellValue = null; 14 } 15 record[data.Columns[j].ColumnName] = cellValue; 16 } 17 array.Add(record); 18 } 19 return array; 20 }
3> 接下来我们就可以运行编译，查看效果了，值得注意的是： 官网所给出属性列表很多，需要的样式需要仔细调试，比如显示分页...就得多看它的API了。
技术文档：http://miniui.com/docs/api/index.html
第一次如此欢快的写技术文档，如有纰漏，还请指正！