MVC简捷调用EasyUI的datagrid

一直想在项目中使用EasyUi的datagrid，但种种原因，没有实现。

这两天在开发一个项目中，愿望终于得以实现。

先看效果：

实现步骤是这样的：

1，在页面中画dataGrid,具体代码如下：

    <table id="UserListTb" class="easyui-datagrid" title="用户列表">

    </table>

   function ListLoad() {

        var columnsSetting = [

                    { field: 'EnName', title: '英文名', width: ,sortable:true,

                        formatter: function (val, rowData) {

                            var url = "/User/Index/66666666";

                            return "<a href=\'" + url + "\');>"+rowData.EnName+"</a>";

                        }

                    },

                    { field: 'CnName', title: '中文名', width:  },

                    { field: 'DomainName', title: '域帐号', width:  },

                    { field: 'ID', title: 'ID', width: , align: 'right' },

                    { field: 'unitcost', title: '部门', width: , align: 'right' },

                    { field: 'attr1', title: '权限组', width:  },

                    { field: 'status', title: '状态', width: , align: 'center' }

                ];

        $('#UserListTb').datagrid({

            url: '/User/GetUserList',

            queryParams: { name: "wuf"

            },

            method: 'get',

            width: ,

            height: ,

            fitColumns: true,

            pagination: true,

            pageSize: ,

            singleSelect: true,

            showPageList: false,

            pageList: [,, , ],

            rownumbers: true,

            nowrap: false,

            loadMsg: 'Load……',

            columns: [columnsSetting],

            onLoadSuccess: function (row) {},

            onLoadError: function (arguments) {}

        });

    }

2，后台接收参数，返回需要的Json数据。

        /// <summary>

        /// 用户列表Json

        /// </summary>

        /// <returns></returns>

        public ActionResult GetUserList()

        {

            int currentPageIndex = RequestExtension.GetQueryString<int>("page", );

            int pagesize = RequestExtension.GetQueryString<int>("rows", );

            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);

        }

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 = -)

        {

            var result = dataList;

            Dictionary<string, object> json = new Dictionary<string, object>();

            int total = dataListAuctalCount;

            if (total == - && dataList != null)

            {

                //自动分页

                total = dataList.Count();

                result = dataList.Skip((page - ) * rows).Take(rows).ToList();

            }

            json.Add("total", total);

            json.Add("rows", result);

            return new JsonResult() { Data = json, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

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;

            }

        }

看着这精简的代码，和界面上强大的功能，真是有种IT人的自豪感，亲爱的您，是不是也有这种感觉呢？

巴特西

MVC简捷调用EasyUI的datagrid

最新文章

热门文章