MyException - 我的异常网
当前位置:我的异常网» VC/MFC » 第一篇说说MVC+EF easyui dataGrid 动态加载报表

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

www.MyException.Cn  网友分享于:2015-08-20  浏览: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好在哪里?

文章评论

中美印日四国程序员比较
中美印日四国程序员比较
老程序员的下场
老程序员的下场
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
一个程序员的时间管理
一个程序员的时间管理
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员都该阅读的书
程序员都该阅读的书
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
编程语言是女人
编程语言是女人
每天工作4小时的程序员
每天工作4小时的程序员
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
漫画:程序员的工作
漫画:程序员的工作
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
旅行,写作,编程
旅行,写作,编程
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
鲜为人知的编程真相
鲜为人知的编程真相
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
代码女神横空出世
代码女神横空出世
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我是如何打败拖延症的
我是如何打败拖延症的
那些争议最大的编程观点
那些争议最大的编程观点
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
如何成为一名黑客
如何成为一名黑客
 程序员的样子
程序员的样子
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员必看的十大电影
程序员必看的十大电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的鄙视链
程序员的鄙视链
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Java程序员必看电影
Java程序员必看电影
10个调试和排错的小建议
10个调试和排错的小建议
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有