当前位置: 代码迷 >> VC/MFC >> 第一篇说说MVC+EF easyui dataGrid 动态加载报表
  详细解决方案

第一篇说说MVC+EF easyui dataGrid 动态加载报表

热度:216   发布时间:2016-05-02 03:53:25.0
第一篇说说MVC+EF easyui dataGrid 动态加载表格

首先上javascript的代码

<script type="text/javascript">    $(function () {        LoadGrid();    })    //加载表格!!!    function LoadGrid() {        $('#roleGrid').datagrid({            width: 900,            striped: true,   //交替条纹            fitColumns: true,   //防止水平滚动            fit: true,//自动补全             iconCls: "icon-save",//图标              idField: 'RoleId',  //唯一列            url: "GetRoles",            dataType: "json",            singleSelect: true,  //设置为true将只允许选择一行            loadMsg: '正在拼命加载,请稍后...',            rownumbers: false,   //显示行数            pagination: true,  //底部分页工具栏              nowrap: true,   //截取超出部分的数据            checkOnSelect: true,//点击一行的时候 checkbox checked(选择)/unchecked(取消选择)            pageNumber: 1,//初始化分页码。            pageSize: 10,  //初始化每页记录数。            pageList: [5, 10, 30],   //初始化每页记录数列表            showFooter: false,  //定义是否显示行底            columns: [[         { field: "RoleId", title: "角色编号", width: 60, align: "center", sortable: "true" },         { field: "RoleName", title: "角色名称", width: 100, align: "center" },         { field: "RoleRemarks", title: "备注", width: 100, align: "center" },         {             field: "IsStatus", title: "状态", width: 60, align: "center", formatter: function (value, row, index) {                 if (value == "0") {                     return "正常";                 } else if (value == "1") {                     return "停用";                 }             }         },         {             field: "edit", title: "操作", align: "center", width: 80, formatter: function (value, row, index) {                 var detail = '<a style="padding:1px;color:black;" onclick="editRole(' + index + ')"><i class="fa  fa-edit"></i>编辑</a>';                 var deleteBtn = '<a style="color:black;" onclick="delRole(' + index + ')"><i class="fa  fa-trash-o"></i>删除</>';                 var setrole = '<a style="color:black;" onclick="setRights(' + index + ')"><i class="fa  fa-exclamation-triangle"></i>设置权限</>';                 return "&nbsp;&nbsp;" + detail + "&nbsp;|&nbsp;" + deleteBtn + "&nbsp;|&nbsp;" + setrole;             }         }            ]] //        });    };    function editRole(i) { //编辑按钮的方法        var rows = $("#roleGrid").datagrid("getRows");        layer.open({            title: false,            type: 2,            closeBtn: false,            area: ['420px', '418px'],            skin: 'layui-layer-rim', //加上边框            content: ['/Admin/ShowForm/EidtRole', 'no'],            success: function (layero, index) {                var body = layer.getChildFrame('body', index);                body.contents().find("#roleId").val(rows[i].RoleId);                body.contents().find("#roleName").val(rows[i].RoleName);                if (rows[i].RoleRemarks != "-") {                    body.contents().find("#remarks").val(rows[i].RoleRemarks);                }                body.contents().find("#isstutas").val(rows[i].IsStatus);            }        });    }    function delRole(i) {  //删除用户        var rows = $("#roleGrid").datagrid("getRows");        var postData = {            roleId: rows[i].RoleId        };        layer.confirm('确认删除该角色?', {            btn: ['确认', '取消'], //按钮            shade: false //不显示遮罩        }, function (index) {            $.ajax({                type: "POST",                url: "DeleRole",                data: postData,                success: function (result) {                    if (result == "true") {                        layer.msg("操作成功!", {                            icon: 6,                            time: 1000,                        }, function () {                            $("#roleGrid").datagrid("reload");                            layer.close(index);                        });                    } else if (result == "false") {                        layer.msg("操作失败!", { icon: 2 });                    } else if (result == "msg") {                        layer.msg("系统错误,请联系管理员!", { icon: 0 });                    }                }            });        }, function (index) {            layer.close(index);        });    }    function addRole() { //新增用户        layer.open({            title: false,            type: 2,            closeBtn: false,            area: ['350px', '345px'],            skin: 'layui-layer-rim', //加上边框            content: ['/Admin/ShowForm/AddRole', 'no'],        });    }    function reloadGrid() {  //刷新表格        $("#roleGrid").datagrid("reload");    }

然后是html

<table id="roleGrid"> </table>

最后是控制器的方法(这一部分是最重要的,表格能否显示数据,全看这一部分)

/// <summary>        /// 动态生成表格的数据        /// </summary>        /// <param name="page"></param>        /// <param name="rows"></param>        /// <returns></returns>        public JsonResult GetRoles(int? page, int? rows)        {            page = page == null ? 1 : page; //第几页            rows = rows == null ? 1 : rows; //行数            List<role> rList = rService.GetAllRoles(Convert.ToInt32(page), Convert.ToInt32(rows));            List<role> roleList = new List<role>();            for (int i = 0; i < rList.Count; i++)            {                role r = new role();                r.RoleId = rList[i].RoleId;                r.RoleName = rList[i].RoleName;                if (string.IsNullOrEmpty(rList[i].RoleRemarks))                {                    r.RoleRemarks = "-";                }                else                {                    r.RoleRemarks = rList[i].RoleRemarks;                }                r.IsStatus = rList[i].IsStatus;                roleList.Add(r);            }            var json = new            {                total = rService.GetTotal(),                rows = roleList            };            return Json(json, JsonRequestBehavior.AllowGet);        }

最后的最后是控制器相关的方法

/// <summary>        /// 分页的数据        /// </summary>        /// <param name="page"></param>        /// <param name="rows"></param>        /// <returns></returns>        public List<role> GetAllRoles(int page, int rows)        {            using (diamondEntities entity = new diamondEntities())            {                IQueryable<role> role = entity.roles.OrderBy(a => a.RoleId).Skip((page - 1) * rows).Take(rows);                List<role> roleList = role.ToList<role>();                if (roleList.Count > 0)                {                    return roleList;                }                else                {                    return null;                }            }        }        /// <summary>        /// 获取总页数        /// </summary>        /// <returns></returns>        public int GetTotal()        {            using (diamondEntities entity = new diamondEntities())            {                IQueryable<role> user = entity.roles.Select(m => m);                List<role> userList = user.ToList();                return userList.Count;            }        }

持续关注我吧,最近项目紧,我还是会把碰见的东西写出来的。

1楼LeoLcy
eayui中也有dialog,为什么不用呢?layer好在哪里?
  相关解决方案