View/UserInfo/Index.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/themes/default/easyui.css" target="_blank" rel="external nofollow" rel="stylesheet" /> <!--easyui的CSS檔案-->
<link href="~/Content/themes/icon.css" target="_blank" rel="external nofollow" rel="stylesheet" /> <!--easyui的CSS檔案-->
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script> <!--easyui的JS檔案-->
<script src="~/Scripts/easyui-lang-zh_CN.js"></script> <!--easyui的中文JS檔案-->
<script src="~/Scripts/datapattern.js"></script> <!--Json日期字元串格式化插件-->
<script type="text/javascript">
$(function () {
loadData();
});
//參數pars(Json格式)可以當做額外參數(搜尋條件)傳遞到服務端。
function loadData(pars) {
$('#tt').datagrid({ //#tt是展示資料的表格ID
url: '/UserInfo/GetUserInfoList', //MVC路由，可以不是MVC格式
title: '使用者資料表格',
width: 700,
height: 400,
fitColumns: true, //列自适應
nowrap: false,
idField: 'ID',//主鍵列的列名
loadMsg: '正在加載使用者的資訊...',
pagination: true,//是否有分頁
singleSelect: false,//是否單行選擇
pageSize: 5,//頁大小，一頁多少條資料
pageNumber: 1,//目前頁，預設的
pageList: [ 5, 10,15], //可以設定的頁大小的清單
queryParams: pars, //往背景額外傳遞的參數，(搜尋條件)(Json格式)
columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
{ field: 'ck', checkbox: true, align: 'left', width: 50 }, //額外添加的checkBox的列
{ field: 'ID', title: '編号', width: 80 }, //field屬性必須和UserInfo的屬性名對應。
{ field: 'UName', title: '姓名', width: 120 },
{ field: 'UPwd', title: '密碼', width: 120 },
{ field: 'Remark', title: '備注', width: 120 },
{
field: 'SubTime', title: '時間', width: 80, align: 'right',
formatter: function (value, row, index) {
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d"); //利用datapattern.js插件，格式化日期輸出。
}
}
]],
toolbar: [{ //工具條，按鈕
id: 'btnDelete',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
deleteInfo();
}
}, { //按鈕未用到
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
addInfo();
}
}, {
id: 'btnEidt',
text: '編輯',
iconCls: 'icon-edit',
handler: function () {
showEditInfo();
}
}],
});
}
//将序列化成json格式後日期(毫秒數)轉成日期格式(未用到)
function ChangeDateFormat(cellval) {
var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
</script>
</head>
<body>
<div>
使用者名:<input type="text" id="txtSearchName" /> 備注<input type="text" id="txtSearchRemark" /><a href="#" target="_blank" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px" id="btnSearch">Search</a>
<table id="tt" style="width: 700px;" title="标題，可以使用代碼進行初始化，也可以使用這種屬性的方式" iconcls="icon-edit">
</table>
</div>
</body>
</html>
服務端控制器，Controllers/UserInfoController.cs:
using XXX.Model;
using XXX.Model.EnumType;
using XXX.Model.Search;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XXX.WebApp.Controllers
{
public class UserInfoController :BaseController //Controller
{
//
// GET: /UserInfo/
IBLL.IUserInfoService UserInfoService{get;set;}
public ActionResult Index()
{
return View();
}
#region 擷取使用者清單資料
public ActionResult GetUserInfoList()
{
int pageIndex = Request["page"] != null ? int.Parse(Request["page"]) : 1; //page和rows是Jquery-easyui中的datagrid中固定的參數，不能改。
int pageSize = Request["rows"] != null ? int.Parse(Request["rows"]) : 5;
int totalCount;
//擷取分頁資料。
var userInfoList= UserInfoService.LoadPageEntities<int>(pageIndex, pageSize, out totalCount, c => c.DelFlag == delFlag, c => c.ID,true);
var temp = from u in userInfoList //部分列查詢
select new {
ID=u.ID, //等号前面的屬性名必須和用戶端中的列名相對應。
UName=u.UName,
UPwd=u.UPwd,
Remark=u.Remark,
SubTime=u.SubTime
};
return Json(new { rows = temp, total = totalCount }); //以Json格式傳回資料，rows和total是Jquery-easyui固定好的參數名，不能改。rows是List<model>資料，total是總記錄數。
}
#endregion
}
}
![ASP.NET大型績效考核評估系統源碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)