EasyUI 之 DataGrid的两种赋值方法

Posted 2020-09-02 小猫钓鱼吃鱼

方法一：使用ViewData赋值

        首先，我们创建一个User的实体类

 

[csharp] view plain copy

 

1. public class User  
2.     {  
3.         public string UserID;  
4.   
5.   
6.         public string UserName;  
7.   
8.   
9.         public string Sex;  
10.     }  

 

        然后，我们在Action中添加假数据，并将假数据放到ViewData中

 

[csharp] view plain copy

 

1. public ActionResult test()  
2.         {  
3.             List<User> listUser = new List<User>();  
4.   
5.   
6.             listUser.Add(new User  
7.             {  
8.                 UserID = "001",  
9.                 UserName = "呵呵",  
10.                 Sex = "男"  
11.             });  
12.             listUser.Add(new User  
13.             {  
14.                 UserID = "002",  
15.                 UserName = "哈哈",  
16.                 Sex = "女"  
17.             }); listUser.Add(new User  
18.             {  
19.                 UserID = "003",  
20.                 UserName = "嘿嘿",  
21.                 Sex = "男"  
22.             });  
23.   
24.   
25.             ViewData["listUser"] = listUser;  
26.               
27.             return View();  
28.         }  

 

        最后，我们在前台用ViewData给DataGrid赋值

 

[html] view plain copy

 

1. <div>  
2.         <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px" >  
3.             <thead>  
4.                 <tr>  
5.                     <th data-options="field:‘UserID‘,width:148,sortable:true">ID</th>  
6.                     <th data-options="field:‘UserName‘,width:148,sortable:true">姓名</th>  
7.                     <th data-options="field:‘Sex‘,width:148,sortable:true">性别</th>  
8.                 </tr>  
9.             </thead>  
10.             @foreach (ITOO.EvaluationUI.Models.User enUser in ViewData["listUser"] as List<ITOO.EvaluationUI.Models.User>)  
11.         {  
12.             <tr>  
13.                 <td>@enUser.UserID </td>  
14.                 <td>@enUser.UserName  </td>  
15.                 <td>@enUser.Sex  </td>  
16.             </tr>  
17.         }  
18.         </table>  
19.     </div>  

                                                 

 

方法二：使用url赋值

        首先，我们在前台的DataGrid中加上URL属性

 

[html] view plain copy

 

1. <div>  
2.     <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px" >  
3.         <thead>  
4.             <tr>  
5.                 <th data-options="field:‘UserID‘,width:148,sortable:true">ID</th>  
6.                 <th data-options="field:‘UserName‘,width:148,sortable:true">姓名</th>  
7.                 <th data-options="field:‘Sex‘,width:148,sortable:true">性别</th>  
8.             </tr>  
9.         </thead>  
10.     </table>  
11. </div>  
12.   
13.   
14. <!--datagrid基本设置-->  
15. <script type="text/javascript">  
16.     $(function () {  
17.         $(‘#dg‘).datagrid({  
18.             title: ‘测试表格‘,  
19.             url: "/EvaluationSituation/jsonTest",  
20.             pagination: true,//显示分页工具栏              
21.         });  
22.     });  
23. </script>  

 

        然后，我们在相应的控制器中添加一个得到json数据的方法

 

[csharp] view plain copy

 

1. public JsonResult  jsonTest()  
2.         {  
3.             List<User> listUser = new List<User>();  
4.   
5.             listUser.Add(new User {   
6.                 UserID ="001",  
7.                 UserName="呵呵",  
8.                 Sex ="男"  
9.             });  
10.             listUser.Add(new User  
11.             {  
12.                 UserID = "002",  
13.                 UserName = "哈哈",  
14.                 Sex = "女"  
15.             }); listUser.Add(new User  
16.             {  
17.                 UserID = "003",  
18.                 UserName = "嘿嘿",  
19.                 Sex = "男"  
20.             });  
21.   
22.             JsonResult jsonUser = new JsonResult();  
23.             jsonUser = Json(listUser);  
24.   
25.             return jsonUser;  
26.               
27.         }  

                                                 

 

 

        上面介绍的两种方法能够解决我们给DataGrid赋值的问题，其中方法二里面除了将List集合转换成Json对象以外，我们还可以自己写一个方法将List转换成Json格式的字符串，这样也可以给DataGrid赋值。虽然我们能够赋值，但是这样做也有一些其他的问题，比如说怎么它的分页怎么实现，这就是下一节将要讲解的内容