EasyUI 之 DataGrid的兩種賦值方法
阿新 • • 發佈：2019-02-11
上一篇部落格《EasyUI 之 DataGrid分頁元件中文顯示的兩種方法》中我們使用EasyUI-DataGrid在前臺添加了一個表格，並且讓表格的分頁控制元件顯示為中文。現在我們有了DataGrid，我們怎麼讓它顯示我們想要的資料呢？今天就跟大家聊一聊在MVC中怎麼給DataGrid傳值。
方法一：使用ViewData賦值
然後，我們在Action中新增假資料，並將假資料放到ViewData中
最後，我們在前臺用ViewData給DataGrid賦值
方法二：使用url賦值
首先，我們在前臺的DataGrid中加上URL屬性
然後，我們在相應的控制器中新增一個得到json資料的方法
方法一：使用ViewData賦值
首先，我們建立一個User的實體類
public class User { public string UserID; public string UserName; public string Sex; }
然後，我們在Action中新增假資料，並將假資料放到ViewData中
public ActionResult test() { List<User> listUser = new List<User>(); listUser.Add(new User { UserID = "001", UserName = "呵呵", Sex = "男" }); listUser.Add(new User { UserID = "002", UserName = "哈哈", Sex = "女" }); listUser.Add(new User { UserID = "003", UserName = "嘿嘿", Sex = "男" }); ViewData["listUser"] = listUser; return View(); }
最後，我們在前臺用ViewData給DataGrid賦值
<div> <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px" > <thead> <tr> <th data-options="field:'UserID',width:148,sortable:true">ID</th> <th data-options="field:'UserName',width:148,sortable:true">姓名</th> <th data-options="field:'Sex',width:148,sortable:true">性別</th> </tr> </thead> @foreach (ITOO.EvaluationUI.Models.User enUser in ViewData["listUser"] as List<ITOO.EvaluationUI.Models.User>) { <tr> <td>@enUser.UserID </td> <td>@enUser.UserName </td> <td>@enUser.Sex </td> </tr> } </table> </div>
方法二：使用url賦值
首先，我們在前臺的DataGrid中加上URL屬性
<div>
<table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px" >
<thead>
<tr>
<th data-options="field:'UserID',width:148,sortable:true">ID</th>
<th data-options="field:'UserName',width:148,sortable:true">姓名</th>
<th data-options="field:'Sex',width:148,sortable:true">性別</th>
</tr>
</thead>
</table>
</div>
<!--datagrid基本設定-->
<script type="text/javascript">
$(function () {
$('#dg').datagrid({
title: '測試表格',
url: "/EvaluationSituation/jsonTest",
pagination: true,//顯示分頁工具欄
});
});
</script>然後，我們在相應的控制器中新增一個得到json資料的方法
public JsonResult jsonTest()
{
List<User> listUser = new List<User>();
listUser.Add(new User {
UserID ="001",
UserName="呵呵",
Sex ="男"
});
listUser.Add(new User
{
UserID = "002",
UserName = "哈哈",
Sex = "女"
}); listUser.Add(new User
{
UserID = "003",
UserName = "嘿嘿",
Sex = "男"
});
JsonResult jsonUser = new JsonResult();
jsonUser = Json(listUser);
return jsonUser;
}上面介紹的兩種方法能夠解決我們給DataGrid賦值的問題，其中方法二里面除了將List集合轉換成Json物件以外，我們還可以自己寫一個方法將List轉換成Json格式的字串，這樣也可以給DataGrid賦值。雖然我們能夠賦值，但是這樣做也有一些其他的問題，比如說怎麼它的分頁怎麼實現，這就是我們下一期將要講解的內容