easyUi 的DataGrid的绑定
html代码：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GridView</title>
<script type="text/javascript">
$(function () {
$('#List').datagrid({
toolbar: [{
text: '添加',
iconCls: 'icon-add',
height:50,
handler: function () {
$('#List').datagrid('endEdit', lastIndex);
lastIndex = $('#List').datagrid('getRows').length - 1;
$('#List').datagrid('selectRow', lastIndex);
$('#List').datagrid('beginEdit', lastIndex);
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
height: 50,
handler: function () {
var row = $('#List').datagrid('getSelected');
if (row) {
var index = $('#List').datagrid('getRowIndex', row);
$('#List').datagrid('deleteRow', index);
}
}
}, '-', {
text: '保存',
iconCls: 'icon-save',
height: 50,
handler: function () {
$('#List').datagrid('acceptChanges');
}
}, '-', {
text: '刷新',
height: 50,
iconCls: 'icon-undo',
handler: function () {
$('#List').datagrid('rejectChanges');
}
}, '-', {
text: '搜索',
height: 50,
iconCls: 'icon-search',
handler: function () {
var rows = $('#List').datagrid('getChanges');
alert('changed rows: ' + rows.length + ' lines');
}
}],
title:"DataGrid的标题",
url: '/AjaxUser/loadjson2',
width: 500,
methord: 'post',
height:500,
fitColumns: true,
sortName: 'id',
sortOrder: 'desc',
idField: 'id',
pageSize: 20,
//pageList: 20,
pagination: true,
striped: true, //奇偶行是否区分
singleSelect: true,//单选模式
rownumbers: true,//行号
columns: [[
{ field: 'id', title: 'id', width: 80 },
{ field: 'realname', title: '名称', width: 120 },
{ field: 'sex', title: 'sex', width: 80, align: 'left' }
]]
});
});
</script>
</head>
<body>
<div>
<table id="List"></table>
</div>
</body>
</html>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
@Styles.Render("~/Content/themes/gray/easyui.css")
@Styles.Render("~/Content/themes/icon.css")
</head>
<body>
<div style="padding:5px 5px 0px 5px;">
@RenderBody()
</div>
</body>
</html>
控制器
public ActionResult loadjson2(int page=1, int rows=20, string sort="id", string order="desc")
{
List<tbl_admin> list = shop.tbl_admin.OrderBy(u => sort)
.Skip(rows * (page-1))
.Take(rows)
.ToList();
var json = new
{
total = shop.tbl_admin.Count(),
rows = (from r in list
select new tbl_admin()
{
id = r.id,
realname = r.realname,
sex = r.sex
}).ToArray()
};
return Json(json, JsonRequestBehavior.AllowGet);
}
public ActionResult GridView()
{
return View();
}
