首页 > 代码库 > EasyUI 之 DataGrid的两种赋值方法

EasyUI 之 DataGrid的两种赋值方法

2024-09-06 16:52:35   217人阅读

方法一：使用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赋值。虽然我们能够赋值，但是这样做也有一些其他的问题，比如说怎么它的分页怎么实现，这就是下一节将要讲解的内容

EasyUI 之 DataGrid的两种赋值方法


联系
我们