jquery mvc写法参考

login.js

$(function () {
    MembershipLogin.init();
});

var MembershipLogin = {
    init: function () {
        LoginMVC.View.initControl();
        LoginMVC.View.bindEvent();
        LoginMVC.View.bindValidate();
    }
};

var LoginMVC = {
    URLs: {
        login: {
            url: LDPReport.ctxPath + '/member/authenticate',
            method: 'POST'
        },
        success: {
            url: LDPReport.ctxPath + '/home/index',
            method: 'POST'
        }
    },
    View: {
        initControl: function () {
            $("#account").focus();
            $("#login-message-tips").hide();
        },
        bindEvent: function () {
            document.onkeydown = function (e) {
                var evt = e ? e : (window.event ? window.event : null)
                if (evt.keyCode == 13) {
                    LoginMVC.Controller.login();
                }
            };
            $('#btnLogin').click(LoginMVC.Controller.login);
        },
        bindValidate: function () {
            $("#login-form").validate({
                rules: {
                    account: {
                        required: true,
                    },
                    password: {
                        required: true,
                        minlength: 3,
                        maxlength: 20
                    }
                },
                messages: {
                    account: {
                        required: ''
                    },
                    password: {
                        required: '',
                        minlength: 6
                    }
                },
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                }
            });
        }
    },
    Controller: {
        showTips: function (type, content) {
            var tipsContainer = $('#login-message-tips');
            tipsContainer.html(content);
            tipsContainer.show();
        },
        login: function () {
        	console.log("login>>>>>>>>"+LoginMVC.URLs.login.url);
            if ($('#login-form').validate().form()) {
            	console.log("validate>>>>>>>>");
                var data = {
                    "account": $("#account").val(),
                    "password": $("#password").val(),
                    "rememberMe": $("#rememberMe").prop("checked")
                };
                console.log("validate>>>>>>>>"+LoginMVC.URLs.login.url);
                $.post(LoginMVC.URLs.login.url, data, function (result) {
                	console.log("result.code>>>>>>>>");
                    if (result.code) {
                        LoginMVC.Controller.showTips('error', result.msg);
                    } else {
                        LoginMVC.Controller.showTips('success', '登录成功,正在跳转...');
                        window.location = LoginMVC.URLs.success.url;
                    }
                }, 'json');
            }
        }
    }
};

index.js

$(function () {
    HomeIndex.init();
});

var HomeIndex = {
    init: function () {
        HomeIndexMVC.View.initControl();
        HomeIndexMVC.View.bindEvent();
        HomeIndexMVC.View.bindValidate();
        HomeIndexMVC.View.initMenus();
    },
    addTab: function (id, title, url, iconCls, closable) {
        HomeIndexMVC.Controller.addTab(id, title, url, iconCls, closable == undefined ? true : closable)
    },
    selectedTab: function (title) {
        $('#main-tabs').tabs('select', title ? title : '报表设计');
    },
    showUserInfo: function () {
        HomeIndexMVC.Controller.showMyProfileDlg();
    },
    showChangeMyPwd: function () {
        HomeIndexMVC.Controller.showChangeMyPwdDlg();
    }
};

var HomeIndexMVC = {
    URLs: {
        getMenus: {
            url: EasyReport.ctxPath + '/rest/home/getMenus',
            method: 'GET'
        },
        changeMyPassword: {
            url: EasyReport.ctxPath + '/rest/member/user/changeMyPassword',
            method: 'POST'
        },
        designer: {
            url: EasyReport.ctxPath + '/views/report/designer',
            method: 'GET'
        },
        logout: {
            url: EasyReport.ctxPath + '/member/logout',
            method: 'POST'
        }
    },
    View: {
        initControl: function () {
            $('#main-tabs').tabs({
                onContextMenu: function (e, title, index) {
                    e.preventDefault();
                    $('#main-tab-ctx-menu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                },
                onSelect: function (title, index) {
                    var tab = $('#main-tabs').tabs('getSelected');
                    return tab.panel('refresh');
                }
            });

            $('#main-tab-ctx-menu').menu({
                onClick: function (item) {
                    if (item.name == "current") {
                        return EasyUIUtils.closeCurrentTab('#main-tabs');
                    }
                    if (item.name == "others") {
                        return EasyUIUtils.closeOthersTab('#main-tabs');
                    }
                    if (item.name == "all") {
                        return EasyUIUtils.closeAllTab('#main-tabs');
                    }
                },
            });

            $('#my-profile-dlg').dialog({
                closed: true,
                modal: true,
                width: 450,
                height: 320,
                iconCls: 'icon-avatar',
                buttons: [{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#my-profile-dlg").dialog('close');
                    }
                }]
            });

            $('#change-my-pwd-dlg').dialog({
                closed: true,
                modal: true,
                width: 450,
                height: 320,
                iconCls: 'icon-pwd',
                buttons: [{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#change-my-pwd-dlg").dialog('close');
                    }
                }, {
                    text: '确定',
                    iconCls: 'icon-save',
                    handler: HomeIndexMVC.Controller.changeMyPwd
                }]
            });
        },
        bindEvent: function () {
        },
        bindValidate: function () {
        },
        initMenus: function () {
            var loginUser = $('#login-user-name').val();
            HomeIndexMVC.Controller.buildMenu(loginUser);
            HomeIndex.addTab(0, '报表设计', HomeIndexMVC.URLs.designer.url, 'icon-chart', false);
        }
    },
    Controller: {
        addTab: function (id, title, url, iconCls, closable) {
            if ($('#main-tabs').tabs('exists', title)) {
                $('#main-tabs').tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="' + url
                    + '" style="width:100%;height:99%;"></iframe>';
                $('#main-tabs').tabs('add', {
                    id: id,
                    title: title,
                    content: content,
                    closable: closable,
                    iconCls: iconCls
                });
            }
        },
        showChangeMyPwdDlg: function () {
            $("#change-my-pwd-dlg").dialog('open').dialog('center');
        },
        showMyProfileDlg: function () {
            $("#my-profile-dlg").dialog('open').dialog('center');
        },
        changeMyPwd: function () {
            var pwd = $('#password').val();
            var pwdRepeat = $('#passwordRepeat').val();
            if (pwd === pwdRepeat) {
                $('#change-my-pwd-form').form('submit', {
                    url: HomeIndexMVC.URLs.changeMyPassword.url,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (data) {
                        var result = $.toJSON(data);
                        if (!result.code) {
                            EasyUIUtils.showMsg("密码修改成功");
                            $("#my-profile-dlg").dialog('close');
                        } else {
                            $.messager.alert('错误', result.msg, 'error');
                        }
                    }
                });
            } else {
                $.messager.alert('错误', '两次输入的密码不一致!', 'error');
                $('#password').focus();
            }
        },
        buildMenu: function (loginUser) {
            $.getJSON(HomeIndexMVC.URLs.getMenus.url, function (result) {
                if (result.code) {
                    console.info(result.msg);
                }

                var menuItems = [];
                var roots = result.data;
                var tmpl = "<a href=\"#\" class=\"${buttonCss}\" "
                    + "data-options=\"${subMenu},iconCls:'${iconCls}'\" ${clickEvent}>${name}</a>";

                // main menu items start
                menuItems.push('<div style=\"padding: 2px 5px;\">');
                for (var i = 0; i < roots.length; i++) {
                    var module = roots[i].attributes;
                    var url = module.linkType ? module.url : EasyReport.ctxPath + '/' + module.url;
                    var onClick = juicer("onclick=\"HomeIndex.addTab('${id}}','${name}','${url}','${icon}')\"", {
                        id: 'm_' + module.id,
                        url: url,
                        name: module.name,
                        icon: module.icon
                    });
                    var subMenu = module.hasChild > 0 ? "menu:'#mm" + module.id + "'" : "plain:true";
                    var buttonCss = module.hasChild > 0 ? "easyui-menubutton" : "easyui-linkbutton";
                    var clickEvent = module.hasChild > 0 ? "" : onClick;
                    menuItems.push(juicer(tmpl, {
                        buttonCss: buttonCss,
                        subMenu: subMenu,
                        clickEvent: clickEvent,
                        iconCls: module.icon,
                        name: module.name
                    }));
                }

                // 生成用户信息菜单项
                menuItems.push(juicer(tmpl, {
                    buttonCss: "easyui-menubutton",
                    subMenu: "menu:'#mm0'",
                    clickEvent: "",
                    iconCls: "",
                    name: '欢迎,' + loginUser
                }));

                // main menu items end
                menuItems.push('</div>');

                // 生成动态配置的子菜单项
                for (var i = 0; i < roots.length; i++) {
                    HomeIndexMVC.Controller.buildChildMenu(roots[i], menuItems);
                }
                // 生成用户信息子菜单项
                HomeIndexMVC.Controller.buildUserInfoChildMemu(menuItems);

                $(".menus").html(menuItems.join(''));
                $.parser.parse('.menus');
            });
        },
        buildChildMenu: function (parent, menuItems) {
            if (!parent.children || !parent.children.length)
                return;
            menuItems.push("<div id=\"mm" + parent.id + "\" style=\"width: 150px;\">");
            for (var i = 0; i < parent.children.length; i++) {
                var module = parent.children[i].attributes;
                var url = module.linkType ? module.url : EasyReport.ctxPath + '/' + module.url;
                var tmpl = "<div data-options=\"iconCls:'${iconCls}'\" "
                    + "onclick=\"HomeIndex.addTab('${id}','${name}','${url}','${iconCls}',${closable})\">${name}</div>";
                menuItems.push(juicer(tmpl, {
                    id: 'm_' + module.id,
                    url: url,
                    iconCls: module.icon,
                    name: module.name,
                    closable: module.name != "报表设计"
                }));
                HomeIndexMVC.Controller.buildChildMenu(module, menuItems);
            }
            menuItems.push('</div>');
        },
        buildUserInfoChildMemu: function (menuItems) {
            var items = [{
                url: '#',
                iconCls: 'icon-avatar',
                name: '用户信息',
                clickEvent: 'onclick=HomeIndex.showUserInfo()'
            }, {
                url: '#',
                iconCls: 'icon-pwd',
                name: '修改密码',
                clickEvent: 'onclick=HomeIndex.showChangeMyPwd()'
            }, {
                url: HomeIndexMVC.URLs.logout.url,
                iconCls: 'icon-cancel',
                name: '退出',
                clickEvent: ''
            }];
            var tmpl = "<div href=\"${url}\" data-options=\"iconCls:'${iconCls}'\" ${clickEvent}>${name}</div>";
            menuItems.push("<div id=\"mm0\" style=\"width: 150px;\">");
            for (var i = 0; i < items.length; i++) {
                menuItems.push(juicer(tmpl, items[i]));
            }
            menuItems.push('</div>');
        }
    }
};

user.js

$(function () {
    MembershipUser.init();
});

var MembershipUser = {
    init: function () {
        UserMVC.View.initControl();
        UserMVC.View.bindEvent();
        UserMVC.View.bindValidate();
        UserMVC.View.initData();
    }
};

var UserCommon = {
    baseUrl: EasyReport.ctxPath + '/rest/member/user/',
    baseRoleUrl: EasyReport.ctxPath + '/rest/member/role/',
    baseIconUrl: EasyReport.ctxPath + '/custom/easyui/themes/icons/'
};

var UserMVC = {
    URLs: {
        add: {
            url: UserCommon.baseUrl + 'add',
            method: 'POST'
        },
        edit: {
            url: UserCommon.baseUrl + 'edit',
            method: 'POST'
        },
        list: {
            url: UserCommon.baseUrl + 'list',
            method: 'GET'
        },
        remove: {
            url: UserCommon.baseUrl + 'remove',
            method: 'POST'
        },
        getRoleList: {
            url: UserCommon.baseRoleUrl + 'getRoleList',
            method: 'GET'
        },
        editPassword: {
            url: UserCommon.baseUrl + 'editPassword',
            method: 'POST'
        }
    },
    Model: {
        roles: {}
    },
    View: {
        initControl: function () {
            $('#user-datagrid').datagrid({
                method: 'get',
                fit: true,
                fitColumns: true,
                singleSelect: true,
                pagination: true,
                rownumbers: true,
                pageSize: 50,
                url: UserMVC.URLs.list.url,
                toolbar: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        UserMVC.Controller.add();
                    }
                }, '-', {
                    iconCls: 'icon-edit1',
                    handler: function () {
                        UserMVC.Controller.edit();
                    }
                }, '-', {
                    iconCls: 'icon-pwd',
                    handler: function () {
                        UserMVC.Controller.resetPwd();
                    }
                }, '-', {
                    iconCls: 'icon-remove1',
                    handler: function () {
                        UserMVC.Controller.remove();
                    }
                }, '-', {
                    iconCls: 'icon-reload',
                    handler: function () {
                        EasyUIUtils.reloadDatagrid('#user-datagrid');
                    }
                }],
                loadFilter: function (src) {
                    if (!src.code) {
                        return src.data;
                    }
                    return $.messager.alert('失败', src.msg, 'error');
                },
                columns: [[{
                    field: 'id',
                    title: '用户ID',
                    width: 50,
                    sortable: true
                }, {
                    field: 'account',
                    title: '账号',
                    width: 100,
                    sortable: true
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 80,
                    sortable: true,
                }, {
                    field: 'telephone',
                    title: '电话',
                    width: 50,
                    sortable: true
                }, {
                    field: 'email',
                    title: '邮箱',
                    width: 80,
                    sortable: true
                }, {
                    field: 'status',
                    title: '状态',
                    width: 50,
                    sortable: true,
                    formatter: function (value, row, index) {
                        return value == 1 ? "启用" : "禁用";
                    }
                }, {
                    field: 'gmtCreated',
                    title: '创建时间',
                    width: 50,
                    sortable: true
                }, {
                    field: 'options',
                    title: '操作',
                    width: 100,
                    formatter: function (value, row, index) {
                        var icons = [{
                            "name": "edit",
                            "title": "编辑"
                        }, {
                            "name": "pwd",
                            "title": "修改密码"
                        }, {
                            "name": "remove",
                            "title": "删除"
                        }];
                        var buttons = [];
                        for (var i = 0; i < icons.length; i++) {
                            var tmpl = '<a href="#" title ="${title}" '
                                + 'onclick="UserMVC.Controller.doOption(\'${index}\',\'${name}\')">'
                                + '<img src="${imgSrc}" alt="${title}"/"></a>';
                            var data = {
                                title: icons[i].title,
                                name: icons[i].name,
                                index: index,
                                imgSrc: UserCommon.baseIconUrl + icons[i].name + ".png"
                            };
                            buttons.push(juicer(tmpl, data));
                        }
                        return buttons.join(' ');
                    }
                }]],
                onDblClickRow: function (rowIndex, rowData) {
                    return UserMVC.Controller.edit();
                }
            });

            // dialogs
            $('#user-dlg').dialog({
                closed: true,
                modal: false,
                width: 560,
                height: 500,
                iconCls: 'icon-add',
                buttons: [{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#user-dlg").dialog('close');
                    }
                }, {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: UserMVC.Controller.save
                }]
            });

            $('#reset-pwd-dlg').dialog({
                closed: true,
                modal: false,
                width: 560,
                height: 250,
                iconCls: 'icon-pwd',
                buttons: [{
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $("#reset-pwd-dlg").dialog('close');
                    }
                }, {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: UserMVC.Controller.save
                }]
            });
        },
        bindEvent: function () {
            $('#btn-search').bind('click', UserMVC.Controller.find);
        },
        bindValidate: function () {
        },
        initData: function () {
            UserMVC.Util.loadRoleList();
        }
    },
    Controller: {
        doOption: function (index, name) {
            $('#user-datagrid').datagrid('selectRow', index);
            if (name == "edit") {
                return UserMVC.Controller.edit();
            }
            if (name == "remove") {
                return UserMVC.Controller.remove();
            }
            if (name == "pwd") {
                return UserMVC.Controller.resetPwd();
            }
        },
        add: function () {
            var options = UserMVC.Util.getOptions();
            options.title = '新增用户';
            EasyUIUtils.openAddDlg(options);
            UserMVC.Util.fillRoleCombox("add", []);
            $('#status').combobox('setValue', "1");
            $('#account').textbox('readonly', false);
        },
        edit: function () {
            var row = $('#user-datagrid').datagrid('getSelected');
            if (row) {
                var options = UserMVC.Util.getOptions();
                options.iconCls = 'icon-edit1';
                options.data = row;
                options.title = '修改[' + options.data.name + ']用户';
                EasyUIUtils.openEditDlg(options);
                $('#password').textbox('setValue', '');
                $('#account').textbox('readonly', true);
                var roleIds = row.roles || "";
                UserMVC.Util.fillRoleCombox("edit", roleIds.split(','));
            } else {
                $.messager.alert('警告', '请选中一条记录!', 'info');
            }
        },
        resetPwd: function () {
            var row = $('#user-datagrid').datagrid('getSelected');
            if (row) {
                $('#reset-pwd-dlg').dialog('open').dialog('center');
                $("#modal-action").val("resetPwd");
                $("#reset-pwd-form").form('clear');
                $("#reset-userId").val(row.userId);
                $("#reset-account").text(row.account);
            } else {
                $.messager.alert('警告', '请选中一条记录!', 'info');
            }
        },
        find: function () {
            var fieldName = $("#field-name").combobox('getValue');
            var keyword = $("#keyword").val();
            var url = UserMVC.URLs.list.url + '?fieldName=' + fieldName + '&keyword=' + keyword;
            EasyUIUtils.loadToDatagrid('#user-datagrid', url)
        },
        remove: function () {
            var row = $('#user-datagrid').datagrid('getSelected');
            if (row) {
                var options = {
                    rows: [row],
                    url: UserMVC.URLs.remove.url,
                    data: {
                        id: row.id
                    },
                    gridId: '#user-datagrid',
                    gridUrl: UserMVC.URLs.list.url,
                    callback: function (rows) {
                    }
                };
                EasyUIUtils.remove(options);
            }
        },
        save: function () {
            var action = $('#modal-action').val();
            var options = {
                gridId: null,
                gridUrl: UserMVC.URLs.list.url,
                dlgId: "#user-dlg",
                formId: "#user-form",
                url: null,
                callback: function () {
                }
            };

            if (action === "resetPwd") {
                options.dlgId = '#reset-pwd-dlg';
                options.formId = '#reset-pwd-form';
                options.url = UserMVC.URLs.editPassword.url;
            } else {
                $('#roles').val($('#combox-roles').combobox('getValues'));
                options.url = (action === "edit" ? UserMVC.URLs.edit.url : UserMVC.URLs.add.url);
                options.gridId = '#user-datagrid';
            }
            return EasyUIUtils.save(options);
        }
    },
    Util: {
        getOptions: function () {
            return {
                dlgId: '#user-dlg',
                formId: '#user-form',
                actId: '#modal-action',
                rowId: '#roleId',
                title: '',
                iconCls: 'icon-add',
                data: {},
                callback: function (arg) {
                },
                gridId: null,
            };
        },
        fillRoleCombox: function (act, values) {
            var id = '#combox-roles';
            $(id).combobox('clear');
            var data = [];
            var items = UserMVC.Model.roles;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                data.push({
                    "value": item.id,
                    "name": item.name,
                    "selected": i == 0
                });
            }
            $(id).combobox('loadData', data);
            if (act == "edit") {
                $(id).combobox('setValues', values);
            }
        },
        loadRoleList: function () {
            $.getJSON(UserMVC.URLs.getRoleList.url, function (src) {
                UserMVC.Model.roles = src.data;
            });
        }
    }
};

Jquery 规范写法!!!!!

猜你喜欢

转载自blog.csdn.net/pdw2009/article/details/83034290