MVC簡捷調用EasyUI的datagrid


一直想在項目中使用EasyUi的datagrid,但種種原因,沒有實現。

這兩天在開發一個項目中,願望終於得以實現。

先看效果:

實現步驟是這樣的:

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: '權限組', width: 250 },
                    { field: 'status', title: '狀態', 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,后台接收參數,返回需要的Json數據。

        /// <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,關鍵代碼,實現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,數據分頁查詢代碼

        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 Users
                                        WHERE 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人的自豪感,親愛的您,是不是也有這種感覺呢?

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM