本文将介绍一下,在ASP.NET MVC环境下,如何用Jquery MiniUI中的Datagrid控件载入数据。

1.效果展示:


MiniUI中DataGrid数据的载入

 

 

 

 

 

 

 

 

 

 

 

 

 

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="width: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>
Head标签内代码

相关文章: