一直想在項目中使用EasyUi的datagrid，但種種原因，沒有實現(xiàn)。

這兩天在開發(fā)一個項目中，愿望終于得以實現(xiàn)。

先看效果：

實現(xiàn)步驟是這樣的：

1，在頁面中畫dataGrid,具體代碼如下：

<table id="UserListTb" class="easyui-datagrid" title="用戶列表"></table>function ListLoad() {var columnsSetting = [ { field: 'EnName', title: '英文名', width: 100,sortable:true,formatter: function (val, rowData) {var url = "/User/Index/66666666";return "<a href=\'" + url + "\');>"+rowData.EnName+"</a>";}},{ field: 'CnName', title: '中文名', width: 80 },{ field: 'DomainName', title: '域帳號', width: 120 },{ field: 'ID', title: 'ID', width: 80, align: 'right' },{ field: 'unitcost', title: '部門', width: 80, align: 'right' },{ field: 'attr1', title: '權(quán)限組', width: 250 },{ field: 'status', title: '狀態(tài)', width: 60, align: 'center' }];$('#UserListTb').datagrid({url: '/User/GetUserList',queryParams: { name: "wuf" },method: 'get', width: 1077,height: 250,fitColumns: true, pagination: true,pageSize: 20,singleSelect: true,showPageList: false,pageList: [1,20, 50, 100],rownumbers: true,nowrap: false,loadMsg: 'Load……',columns: [columnsSetting],onLoadSuccess: function (row) {},onLoadError: function (arguments) {}});} View Code

2，后臺接收參數(shù)，返回需要的Json數(shù)據(jù)。

/// <summary>/// 用戶列表Json/// </summary>/// <returns></returns>public ActionResult GetUserList(){int currentPageIndex = RequestExtension.GetQueryString<int>("page", 0);int pagesize = RequestExtension.GetQueryString<int>("rows", 0);String sort = RequestExtension.GetQueryString<String>("sort", "");String order = RequestExtension.GetQueryString<String>("order", "");String name = RequestExtension.GetQueryString<String>("name", "");Pagination pagin = new Pagination{CurrentPageIndex = currentPageIndex,PageSize = pagesize,OrderBy = String.IsNullOrEmpty(sort) ? "" : String.Concat(sort + " " + order)};UsersModel condition = new UsersModel();KeyValuePair<Pagination, IList<UsersModel>> list = usersRepository.UsersPagination(pagin, condition);return JsonExtension.JsonPagination(list.Value, pagin.CurrentPageIndex, pagin.PageSize, list.Key.TotalItemCount);} View Code

3，關(guān)鍵代碼，實現(xiàn)Json分頁的方法。

/// <summary>/// 分頁處理/// </summary>/// <param name="dataList"></param>/// <param name="page"></param>/// <param name="rows"></param>/// <returns></returns>public static JsonResult JsonPagination(IEnumerable<dynamic> dataList, int page, int rows, int dataListAuctalCount = -1){var result = dataList;Dictionary<string, object> json = new Dictionary<string, object>();int total = dataListAuctalCount;if (total == -1 && dataList != null){//自動分頁total = dataList.Count();result = dataList.Skip((page - 1) * rows).Take(rows).ToList();}json.Add("total", total);json.Add("rows", result);return new JsonResult() { Data = json, JsonRequestBehavior = JsonRequestBehavior.AllowGet };} View Code

4，數(shù)據(jù)分頁查詢代碼

public KeyValuePair<Pagination, IList<UsersModel>> UsersPagination(Pagination pagin, UsersModel condition){using (SqlConnection conn = DapperFactory.CrateOpenConnection()){String condtionStr = "";String orderBy = "CreateTime DESC";if (!String.IsNullOrEmpty(pagin.OrderBy)){orderBy = pagin.OrderBy;}String executeQuery = String.Format(@"WITH pagintable AS(SELECT ROW_NUMBER() OVER(ORDER BY {1} )AS RowID, ID, DomainName, EnName, PassWord, CnName, Email, DeptID, RoleId, CreateMan, CreateTime, EditMan, EditTime, IsValid FROM UsersWHERE 1= 1 {0} ) SELECT * FROM pagintable where RowID between ((@CurrentPageIndex - 1) * @PageSize) + 1 and (@CurrentPageIndex * @PageSize)", condtionStr, orderBy);String executeCount = String.Format("SELECT COUNT(*) AS CountNum FROM Users WHERE 1= 1 {0} ", condtionStr);var mixCondition = new{CurrentPageIndex = pagin.CurrentPageIndex,PageSize = pagin.PageSize};List<UsersModel> listScore = conn.Query<UsersModel>(executeQuery, mixCondition).ToList();pagin.TotalItemCount = conn.Query<Int32>(executeCount, mixCondition).SingleOrDefault<Int32>();KeyValuePair<Pagination, IList<UsersModel>> result =new KeyValuePair<Pagination, IList<UsersModel>>(pagin, listScore);return result;}} View Code

看著這精簡的代碼，和界面上強大的功能，真是有種IT人的自豪感，親愛的您，是不是也有這種感覺呢？

?

轉(zhuǎn)載于:https://www.cnblogs.com/ushou/p/3718610.html

總結(jié)

以上是生活随笔為你收集整理的MVC简捷调用EasyUI的datagrid的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。