从零开始写C# MVC框架之--- 集成DataGrid、layer弹出层、ZTree

最新推荐文章于 2024-07-16 10:23:26 发布

闪耀的瞬间

最新推荐文章于 2024-07-16 10:23:26 发布

阅读量4.2k

点赞数 1

分类专栏：从零开始写C# MVC框架文章标签： asp.net

本文链接：https://blog.csdn.net/zhuyu19911016520/article/details/52572667

版权

从零开始写C# MVC框架专栏收录该内容

19 篇文章 14 订阅

订阅专栏

1、DataGrid控件：网上有很多：jqGrid、EasyUi的datagrid、datatables等等，选择后下载，添加到项目，并引入到框架，都提供有API调用，使用方式大同小异，在页面中定义一个Id区域存放列表，使用js获取数据，后台返回datagrid控件需要的数据格式

2、layer弹出层：layer是一个比较优秀的第三方弹出层，使用简单，官方提交比较好的API支持，集成到框架中有一点需要注意，就是引入js时，引入到框架外的模版_layout.cshtml中，要是引入在Iframe内时，弹出层的位置不在全屏幕中央，而在 iframe页面中央，下面是引用正确后的效果

2.1、封装layer js调用方法，方便框架页面使用，新建一个dialog.js，然后把layer调用方法写入在内

$.getLayerIframeId = function (layerId) {
    var iframeId = top.$("#" + layerId).find("iframe").attr("id");
    return iframeId;
}
$.currentWindow = function (layerId) {
    var iframeId = top.$("#" + layerId).find("iframe").attr("id");
    return top.frames[iframeId];
}
$.modalOpen = function (options) {
    var defaults = {
        id: null,
        title: '系统窗口',
        width: "100px",
        height: "100px",
        url: '',
        shade: 0.3,
        btn: ['确认', '关闭'],
        btnclass: ['btn btn-primary', 'btn btn-danger'],
        callBack: null
    };
    var options = $.extend(defaults, options);
    var _width = top.$(window).width() > parseInt(options.width.replace('px', '')) ? options.width : top.$(window).width() + 'px';
    var _height = top.$(window).height() > parseInt(options.height.replace('px', '')) ? options.height : top.$(window).height() + 'px';
    top.layer.open({
        id: options.id,
        type: 2,
        shade: options.shade,
        title: options.title,
        fix: false,
        area: [_width, _height],
        content: options.url,
        btn: options.btn,
        btnclass: options.btnclass,
        yes: function () {
            options.callBack(options.id)
        }, cancel: function () {
            return true;
        }
    });
}

$.modalConfirm = function (content, callBack) {
    top.layer.confirm(content, {
        icon: "fa-exclamation-circle",
        title: "系统提示",
        btn: ['确认', '取消'],
        btnclass: ['btn btn-primary', 'btn btn-danger'],
    }, function () {
        callBack(true);
    }, function () {
        callBack(false)
    });
}
$.modalAlert = function (content, type) {
    var icon = "";
    if (type == 'success') {
        icon = "fa-check-circle";
    }
    if (type == 'error') {
        icon = "fa-times-circle";
    }
    if (type == 'warning') {
        icon = "fa-exclamation-circle";
    }
    top.layer.alert(content, {
        icon: icon,
        title: "系统提示",
        btn: ['确认'],
        btnclass: ['btn btn-primary'],
    });
}
$.modalMsg = function (content, icon , isClose) {
    if (icon != undefined) {
        top.layer.msg(content, { icon: icon, time: 2500, shift: 5 });
    } else {
        top.layer.msg(content);
    }
    //是否关闭
    if (isClose) {
        $.modalClose();
    }
}
$.modalClose = function () {
    var index = top.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    var $IsdialogClose = top.$("#layui-layer" + index).find('.layui-layer-btn').find("#IsdialogClose");
    var IsClose = $IsdialogClose.is(":checked");
    if ($IsdialogClose.length == 0) {
        IsClose = true;
    }
    if (IsClose) {
        top.layer.close(index);
    } else {
        location.reload();
    }
}

2.2、使用layer.js，以下使用方式就会弹出上图的效果，编辑、确认、提示、关闭等弹出层使用方式一样

$("#btnAdd").click(function () {
        $.modalOpen({
            id: "addUser",
            title: "新增用户",
            url: "/admin/User/edit?id=0",
            width: "1050px",
            height: "400px",
            callBack: function (layerId) {
                $.currentWindow(layerId).saveData();
            }
        });
    });

2.3、saveData()方法是弹出层页面中定义的方法，保存按钮时调用，ajax保存完数据后刷新列表，并关闭弹出层

        function saveData() {
            var Id = $("#Id").val() == "" ? 0 : $("#Id").val();
            var DeptId = $("#DeptId").val();
            var UserName = $("#UserName").val();
            var UserNumber = $("#UserNumber").val();
            
            var obj = {
                Id: Id,
                DeptId: DeptId,
                UserName: UserName,
                UserNumber: UserNumber
            };
            $.post("/admin/user/edit", { data: JSON.stringify(obj), roleIds: roleIds }, function (data) {
                if (data.success) {
                    //刷新父页面
                    getIFrameElement().$("#userTable").ZyDatagrid('reload', { deptId: DeptId });
                    $.modalMsg('保存成功！', 1, true);//true：关闭弹出层
                } else {
                    isSave = true;
                    $.modalMsg('保存失败！', 2);
                }
            });
        }

3、ztree控件是API比较清晰，使用方便，能很快速的集成到框架中，框架的菜单、用户、组织机构等页面都使用到了它，所以是比较重要的功能块了，原理和datagrid差不多，下载、引入到项目，前台定义好调用，后台返回符合规范的数据即可。因树比较通用，所以后台定义了Tree.cs 的通用类，类别的字段和ztree.js中的属性一致，数据序列化后直接返回给ztree

3.1、Tree.cs类的定义，需要注意的是checked属性，ztree需要checked判断是否选择，而checked是C#关键字，定义checked会引起冲突导致报错，只需在checked前加@序列化时会自动去掉@，前台得到的就是checked

    /// <summary>
    /// ztree结构
    /// </summary>
    public class Tree
    {
        /// <summary>
        /// Id
        /// </summary>
        public int id { get; set; }

        /// <summary>
        /// 父级Id
        /// </summary>
        public int pId { get; set; }

        /// <summary>
        /// 节点名称
        /// </summary>
        public string name { get; set; }

        /// <summary>
        /// 是否展开节点
        /// </summary>
        public bool open { get; set; }

        /// <summary>
        /// 是否无子节点
        /// </summary>
        public bool isParent { get; set; }

        /// <summary>
        /// 是否选中
        /// </summary>
        public bool @checked { get;set;}

        /// <summary>
        /// 子节点集合
        /// </summary>
        public List<Tree> children { get; set; }

        /// <summary>
        /// 图标
        /// </summary>
        public string icon { get; set; }

        /// <summary>
        /// 设置个性图标的 className
        /// </summary>
        public string iconSkin { get; set; }
    }

3.2、前台调用方法

var treeObj;
function initTree() {
    treeObj = $.fn.zTree.init($("#deptTree"), {
        callback: {
            onClick: zTreeOnClick,
            onAsyncSuccess: zTreeOnAsyncSuccess
        },
        async: {
            enable: true,
            url: "/admin/Department/GetDeptTree",
            autoParam: ["id"],
            otherParam: { "otherParam": "zTreeAsyncTest" }
        }
    });
}
//点击节点
function zTreeOnClick(event, treeId, treeNode) {
    $("#hdDeptId").val(treeNode.id);
    $("#hdDeptName").val(treeNode.name);
    initDatatable();
};
//加载完成后展开跟节点
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    var nodes = treeObj.getNodes();
    if (nodes.length > 0) {
        treeObj.expandNode(nodes[0], true, false, true);
        $("#hdDeptId").val(nodes[0].id);
        $("#hdDeptName").val(nodes[0].name);
        initDatatable();
    }
};

3.3、后台返回--具体的数据获取方法就不贴了，页面太长了

        /// <summary>
        /// 获取菜单树
        /// </summary>
        /// <param name="parentId"></param>
        /// <returns></returns>
        public JsonResult GetDeptTree(int id = 0)
        {
            var deptTrees = initGlobalData.GetDeptTreeList(id); //缓存中的组织机构
            return Json(deptTrees, JsonRequestBehavior.AllowGet);
        }

集成完以上功能后，其余的页面全部仿照开发，速度还是很快的，复制、再复制。