本文将介绍一下,在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="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>