码迷,mamicode.com
首页 > Web开发 > 详细

MiniUI DataGrid使用 - MVC

时间:2015-10-20 21:02:24      阅读:460      评论:0      收藏:0      [点我收藏+]

标签:

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> 接下来我们就可以运行编译,查看效果了。

 

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

 

MiniUI DataGrid使用 - MVC

标签:

原文地址:http://www.cnblogs.com/kingboat/p/4895898.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!