你的位置:首页 > ASP.net教程

[ASP.net教程]MiniUI DataGrid使用


1.效果展示:


 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.具体步骤:


 

1>  既然是在MVC里,那我们的界面自然选择cshtml,界面内代码如下:

 1 <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> 2 <script src="~/Scripts/jquery-1.8.2.js"></script> 3 <link href="~/Content/miniui.css" rel="stylesheet" /> 4 <script src="~/Scripts/miniui.js"></script> 5 <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /> 6 <style type="text/css"> 7   table { 8     margin-top: 0; 9   }10 </style>11 12 <div id="datagrid1" class="mini-datagrid" style="width:600px;height:380px;" url="JsonHtml" allowresize="true" sizelist="[10,20,30,50]" 13 pagesize="10" allowcellselect="true" multiselect="true">14   <div property="columns">15     <div type="checkcolumn" headeralign="center" ="center"></div>16     <div type="indexcolumn" headeralign="center" ="center">序号</div>17     <div field="d1" headeralign="center" ="center" width="80">时间</div>18     <div field="d2" headeralign="center" ="center" width="80">赛制</div>19     <div field="d3" headeralign="center" ="center" width="80">战绩</div>20   </div>21 </div>

 

2> 完成界面上内容以后,其实布局已经出来,但是这个DataGrid是没有数据的,它的数据来源就是那个 div>url 的属性,它的属性是一个返回值(就是后台的一个方法名),具体代码如下:

 1 public void JsonHtml() 2 { 3   int sum = 10; 4   DataTable dt = new DataTable(); 5   DataColumn dc1 = new DataColumn("d1", Type.GetType("System.String")); 6   DataColumn dc2 = new DataColumn("d2", Type.GetType("System.String")); 7   DataColumn dc3 = new DataColumn("d3", Type.GetType("System.String")); 8   dt.Columns.Add(dc1); 9   dt.Columns.Add(dc2);10   dt.Columns.Add(dc3);11   for (int i = 1; i < sum + 1; i++)12   {13     DataRow dr = dt.NewRow();14     dr["d1"] = "2015-10-20";15     dr["d2"] = "排位赛 第" + i + "场";16     dr["d3"] = "10杀 0死 0助攻";17     dt.Rows.Add(dr);18   }19   int pageIndex = Convert.ToInt32(Request["pageIndex"]);20   int pageSize = Convert.ToInt32(Request["pageSize"]);21   ArrayList AlData = DataTableToArrayList(dt);22   int index = pageIndex, size = pageSize;23   ArrayList data = new ArrayList();24   int start = index * size, end = start + size;25   for (int i = 0, l = AlData.Count; i < l; i++)26   {27     Hashtable record = (Hashtable)AlData[i];28     if (record == null) continue;29     if (start <= i && i < end)30     {31       data.Add(record);32     }33   }34   Hashtable result = new Hashtable();35   result["data"] = data;36   result["total"] = sum;37   Response.Write(MyEncode(result));38 }39 40 public static string MyEncode(object o)41 {42   if (o == null || o.ToString() == "null") return null;43 44   if (o != null && (o.GetType() == typeof(String) || o.GetType() == typeof(string)))45   {46     return o.ToString();47   }48 49   IsoDateTimeConverter dt = new IsoDateTimeConverter();50   dt.DateTimeFormat ="yyyy'-'MM'-'dd'T'HH':'mm':'ss";51   return JsonConvert.SerializeObject(o, dt);52 }53 54 private static ArrayList DataTableToArrayList(DataTable data)55 {56   ArrayList array = new ArrayList();57   for (int i = 0; i < data.Rows.Count; i++)58   {59     DataRow row = data.Rows[i];60     Hashtable record = new Hashtable();61     for (int j = 0; j < data.Columns.Count; j++)62     {63       object cellValue = row[j];64       if (cellValue.GetType() == typeof(DBNull))65       {66         cellValue = null;67       }68       record[data.Columns[j].ColumnName] = cellValue;69     }70     array.Add(record);71   }72   return array;73 }

 

3> 接下来我们就可以运行编译,查看效果了。

 

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