jquery.params.js实现html与html之间的值传递,以及菜单修改的父菜单下拉的回显功能分析举例

其他 2018-05-03 23:00:05 阅读次数: 6

业务需求如图所示：

要实现勾选menu.html要修改的项，再点击修改菜单的时候到menu_add.html中对数据进行回显。

一.html与html之间id值传递的方法

回显的效果如下：

前端代码：add.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>菜单列表页面</title>
        <!-- 导入jquery核心类库 -->
        <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
        <!-- 导入easyui类库 -->
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
        <link rel="stylesheet" type="text/css" href="../../css/default.css">
        <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
        <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script type="text/javascript">
        

            $(function(){
                $("#grid").datagrid({
                    toolbar : [
                        {
                            id : 'add',
                            text : '添加菜单',
                            iconCls : 'icon-add',
                            handler : function(){
                                location.href='menu_add.html';
                        
                            }
                        },{
                            id : 'edit',
                            text : '修改菜单',
                            iconCls : 'icon-edit',
                            handler : function (){
                                //获取选中的行
                                var rows=$("#grid").datagrid("getSelections");
                                //是否仅选中一行数据
                                if(rows.length != 1) {
                                    $.messager.alert('提示','请且仅选中一行','info');
                                    return;
                                }
                                alert(rows[0].id);
                                location.href="menu_add.html?id="+rows[0].id;
                            }
                                
                        }          
                    ],
                    url : '../../menu_list.action',
                    columns : [[
                  
                      {
                          checkbox : true,
                          field : 'id',
                          title : '编号',
                          width : 200
                      },
                      {
                          field : 'name',
                          title : '名称',
                          width : 200
                      },  
                      {
                          field : 'description',
                          title : '描述',
                          width : 200
                      },  
                      {
                          field : 'priority',
                          title : '优先级',
                          width : 200
                      },  
                      {
                          field : 'page',
                          title : '路径',
                          width : 200
                      }
                    ]]
                });
            });
        </script>
    </head>

    <body class="easyui-layout">
        <div data-options="region:'center'">
            <table id="grid"></table>
        </div>
    </body>

</html>

添加/保存的html窗口代码add.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>菜单添加</title>
        <!-- 导入jquery核心类库 -->
        <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
        <!-- 引入的jquery.params.js插件 -->
        <script type="text/javascript" src="../../js/jquery.params.js"></script>
        <!-- 导入easyui类库 -->
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
        <link rel="stylesheet" type="text/css" href="../../css/default.css">
        <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
        <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>

        <script type="text/javascript">
            $(function(){
                
                var menuId = $.query.get("id");
                alert(menuId);
                if(menuId) {
                    //菜单id不为空,则为修改
                $.post("../../menu_findMenuById.action",{"id":menuId},
                    function(menu) {
                    $("#functionForm").form("load",menu);
                    $("#parentCombobox").combobox("setValue",menu.pId);
                    
                })
                    
                }
                    //alert(menuId);
                // 点击保存
                $('#save').click(function(){
                    
                    if($("#functionForm").form("validate")) {
                        $("#functionForm").submit();
                    }
                });
                $('#back').click(function(){
                    location.href='menu.html';
                });
            });
        </script>
    </head>

    <body class="easyui-layout">
        <div data-options="region:'north'">
            <div class="datagrid-toolbar">
                <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
                <a id="back" icon="icon-undo" href="#" class="easyui-linkbutton" plain="true">返回</a>
            </div>
        </div>
        <div data-options="region:'center'">
            <form id="functionForm" action="../../menu_add.action" method="post">
            <input type="hidden" name="id"/>
                <table class="table-edit" width="80%" align="center">
                    <tr class="title">
                        <td colspan="2">菜单项信息</td>
                    </tr>
                    <tr>
                        <td>名称</td>
                        <td>
                            <input type="text" name="name" class="easyui-validatebox" data-options="required:true" />
                        </td>
                    </tr>
                    <tr>
                        <td>访问路径</td>
                        <td>
                            <input type="text" name="page" />
                        </td>
                    </tr>
                    <tr>
                        <td>优先级</td>
                        <td>
                            <input type="text" name="priority" class="easyui-numberbox" data-options="required:true" />
                        </td>
                    </tr>
                    <tr>
                        <td>父菜单项</td>
                        <td>
                            <input name="parentMenu.id" id="parentCombobox" class="easyui-combobox" data-options="valueField:'id',textField:'name',url:'../../menu_list.action'" />
                        </td>
                    </tr>
                    <tr>
                        <td>描述</td>
                        <td>
                            <textarea name="description" rows="4" cols="60"></textarea>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>

</html>

插件:jquery.params.js

/**
* jQuery.query - Query String Modification and Creation for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
* Date: 2009/8/13
*
* @author Blair Mitchelmore
* @version 2.1.7
*
**/
new function (settings) {
    // Various Settings
    var $separator = settings.separator || '&';
    var $spaces = settings.spaces === false ? false : true;
    var $suffix = settings.suffix === false ? '' : '[]';
    var $prefix = settings.prefix === false ? false : true;
    var $hash = $prefix ? settings.hash === true ? "#" : "?" : "";
    var $numbers = settings.numbers === false ? false : true;

    jQuery.query = new function () {
        var is = function (o, t) {
            return o != undefined && o !== null && (!!t ? o.constructor == t : true);
        };
        var parse = function (path) {
            var m, rx = /\[([^[]*)\]/g, match = /^([^[]+)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
            while (m = rx.exec(match[2])) tokens.push(m[1]);
            return [base, tokens];
        };
        var set = function (target, tokens, value) {
            var o, token = tokens.shift();
            if (typeof target != 'object') target = null;
            if (token === "") {
                if (!target) target = [];
                if (is(target, Array)) {
                    target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
                } else if (is(target, Object)) {
                    var i = 0;
                    while (target[i++] != null);
                    target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
                } else {
                    target = [];
                    target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
                }
            } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
                var index = parseInt(token, 10);
                if (!target) target = [];
                target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
            } else if (token) {
                var index = token.replace(/^\s*|\s*$/g, "");
                if (!target) target = {};
                if (is(target, Array)) {
                    var temp = {};
                    for (var i = 0; i < target.length; ++i) {
                        temp[i] = target[i];
                    }
                    target = temp;
                }
                target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
            } else {
                return value;
            }
            return target;
        };

        var queryObject = function (a) {
            var self = this;
            self.keys = {};

            if (a.queryObject) {
                jQuery.each(a.get(), function (key, val) {
                    self.SET(key, val);
                });
            } else {
                jQuery.each(arguments, function () {
                    var q = "" + this;
                    q = q.replace(/^[?#]/, ''); // remove any leading ? || #
                    q = q.replace(/[;&]$/, ''); // remove any trailing & || ;
                    if ($spaces) q = q.replace(/[+]/g, ' '); // replace +'s with spaces

                    jQuery.each(q.split(/[&;]/), function () {
                        var key = decodeURIComponent(this.split('=')[0] || "");
                        var val = decodeURIComponent(this.split('=')[1] || "");

                        if (!key) return;

                        if ($numbers) {
                            if (/^[+-]?[0-9]+\.[0-9]*$/.test(val)) // simple float regex
                                val = parseFloat(val);
                            else if (/^[+-]?[0-9]+$/.test(val)) // simple int regex
                                val = parseInt(val, 10);
                        }

                        val = (!val && val !== 0) ? true : val;

                        if (val !== false && val !== true && typeof val != 'number')
                            val = val;

                        self.SET(key, val);
                    });
                });
            }
            return self;
        };

        queryObject.prototype = {
            queryObject: true,
            has: function (key, type) {
                var value = this.get(key);
                return is(value, type);
            },
            GET: function (key) {
                if (!is(key)) return this.keys;
                var parsed = parse(key), base = parsed[0], tokens = parsed[1];
                var target = this.keys[base];
                while (target != null && tokens.length != 0) {
                    target = target[tokens.shift()];
                }
                return typeof target == 'number' ? target : target || "";
            },
            get: function (key) {
                var target = this.GET(key);
                if (is(target, Object))
                    return jQuery.extend(true, {}, target);
                else if (is(target, Array))
                    return target.slice(0);
                return target;
            },
            SET: function (key, val) {
                var value = !is(val) ? null : val;
                var parsed = parse(key), base = parsed[0], tokens = parsed[1];
                var target = this.keys[base];
                this.keys[base] = set(target, tokens.slice(0), value);
                return this;
            },
            set: function (key, val) {
                return this.copy().SET(key, val);
            },
            REMOVE: function (key) {
                return this.SET(key, null).COMPACT();
            },
            remove: function (key) {
                return this.copy().REMOVE(key);
            },
            EMPTY: function () {
                var self = this;
                jQuery.each(self.keys, function (key, value) {
                    delete self.keys[key];
                });
                return self;
            },
            load: function (url) {
                var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
                var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
                return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
            },
            empty: function () {
                return this.copy().EMPTY();
            },
            copy: function () {
                return new queryObject(this);
            },
            COMPACT: function () {
                function build(orig) {
                    var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
                    if (typeof orig == 'object') {
                        function add(o, key, value) {
                            if (is(o, Array))
                                o.push(value);
                            else
                                o[key] = value;
                        }
                        jQuery.each(orig, function (key, value) {
                            if (!is(value)) return true;
                            add(obj, key, build(value));
                        });
                    }
                    return obj;
                }
                this.keys = build(this.keys);
                return this;
            },
            compact: function () {
                return this.copy().COMPACT();
            },
            toString: function () {
                var i = 0, queryString = [], chunks = [], self = this;
                var encode = function (str) {
                    str = str + "";
                    if ($spaces) str = str.replace(/ /g, "+");
                    return encodeURIComponent(str);
                };
                var addFields = function (arr, key, value) {
                    if (!is(value) || value === false) return;
                    var o = [encode(key)];
                    if (value !== true) {
                        o.push("=");
                        o.push(encode(value));
                    }
                    arr.push(o.join(""));
                };
                var build = function (obj, base) {
                    var newKey = function (key) {
                        return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
                    };
                    jQuery.each(obj, function (key, value) {
                        if (typeof value == 'object')
                            build(value, newKey(key));
                        else
                            addFields(chunks, newKey(key), value);
                    });
                };

                build(this.keys);

                if (chunks.length > 0) queryString.push($hash);
                queryString.push(chunks.join($separator));

                return queryString.join("");
            }
        };

        return new queryObject(location.search, location.hash);
    };
} (jQuery.query || {}); // Pass in jQuery.query as settings object

id传递的核心代码:menu.html

 menu_add.html:

1.引入插件

2.通过$.query.get()取值

 后台取id可以使用request(代码详见action)

二.父菜单下拉框的回显

Oracle数据库表格如下图所示:

后台要根据拿到的id查询menu将其回显,难点是在pid(实体类中没有该属性),我们对Menu实体类进行如下改进:

完整代码如下

package cn.itcast.bos.domain.system;

import java.io.Serializable;
import java.util.HashSet;
import java.util.Set;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToMany;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;

import org.apache.struts2.json.annotations.JSON;
import org.springframework.data.annotation.Transient;

/**
 * @description:菜单
 */
@Entity
@Table(name = "T_MENU")
public class Menu implements Serializable {

    private static final long serialVersionUID = -5435625580410902709L;
    @Id
    @GeneratedValue
    @Column(name = "C_ID")
    private Integer id;
    @Column(name = "C_NAME")
    private String name; // 菜单名称
    @Column(name = "C_PAGE")
    private String page; // 访问路径
    @Column(name = "C_PRIORITY")
    private Integer priority; // 优先级
    @Column(name = "C_DESCRIPTION")
    private String description; // 描述

    @ManyToMany(mappedBy = "menus")
    private Set<Role> roles = new HashSet<Role>(0);

    @OneToMany(mappedBy = "parentMenu")
    private Set<Menu> childrenMenus = new HashSet<Menu>();

    @ManyToOne
    @JoinColumn(name = "C_PID")
    private Menu parentMenu;
    
    private Integer pId;
    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public Integer getPriority() {
        return priority;
    }

    public void setPriority(Integer priority) {
        this.priority = priority;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
    @JSON(serialize=false)
    public Set<Role> getRoles() {
        return roles;
    }

    public void setRoles(Set<Role> roles) {
        this.roles = roles;
    }
    
    @JSON(serialize=false)
    public Set<Menu> getChildrenMenus() {
        return childrenMenus;
    }

    public void setChildrenMenus(Set<Menu> childrenMenus) {
        this.childrenMenus = childrenMenus;
    }
    @JSON(serialize=false)
    public Menu getParentMenu() {
        return parentMenu;
    }

    public void setParentMenu(Menu parentMenu) {
        this.parentMenu = parentMenu;
    }
    @Transient//阻止该属性被持久化到数据库成为字段
    public Integer getpId() {
        if (parentMenu == null ) {
            return null;
        }
        return parentMenu.getId();
    }
}

 Action的代码如下:

package cn.itcast.bos.web.action.system;

import java.util.List;
import java.util.Map;

import org.apache.shiro.SecurityUtils;
import org.apache.shiro.subject.Subject;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionContext;

import cn.itcast.bos.domain.system.Menu;
import cn.itcast.bos.domain.system.User;
import cn.itcast.bos.service.system.MenuService;
import cn.itcast.bos.web.action.common.BaseAction;

@Controller
@Scope("prototype")
public class MenuAction extends BaseAction<Menu> {
    
    //注入Service
    @Autowired
    private MenuService menuService;
    
    //查询菜单的方法
    @Action("menu_list")
    public String findMenu() {
        
        List<Menu> list = menuService.findMenu();
        ActionContext.getContext().getValueStack().push(list);
        return JSON;
    }
    
    //保存的方法
    @Action(value="menu_add",results={@Result(type=REDIRECT,location="/pages/system/menu.html")})
    public String saveMenu() {
    
        menuService.save(model);
        
        return SUCCESS;
    }
    
    //根据用户显示菜单
    @Action("menu_listByUser")
    public String findMenuByUser() {
        
        //获取当前登录的用户
        User user = (User) SecurityUtils.getSubject().getPrincipal();
        
        //根据用户查询菜单
        List<Menu> list = menuService.findByUser(user);
        //将集合压入root栈顶
        ActionContext.getContext().getValueStack().push(list);
        return JSON;
    }
    


    //根据菜单id查询菜单
    @Action("menu_findMenuById")
    public String findMenuById() {
        
        //获取request,用于取到id
        Map<String,Object> request = (Map<String, Object>) ActionContext.getContext().get("request");
        Integer menuId = (Integer) request.get("id");
        
        //根据id查询菜单,并进行压栈
        Menu menu = menuService.finMenuById(menuId);
        ActionContext.getContext().getValueStack().push(menu);
        return JSON;
    }
}

service

package cn.itcast.bos.service.system;

import java.util.List;

import cn.itcast.bos.domain.system.Menu;
import cn.itcast.bos.domain.system.User;

public interface MenuService {

    void save(Menu menu);

    List<Menu> findMenu();

    List<Menu> findByUser(User user);

    Menu finMenuById(Integer id);



}

serviceImpl

package cn.itcast.bos.service.impl.system;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.CacheEvict;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import cn.itcast.bos.dao.system.MenuRepository;
import cn.itcast.bos.domain.system.Menu;
import cn.itcast.bos.domain.system.User;
import cn.itcast.bos.service.system.MenuService;

@Service
@Transactional
public class MenuServiceImpl implements MenuService {
    
    //注入dao
    @Autowired
    private MenuRepository menuRepository;
    
    /**
     * 保存菜单
     *
     */
    @Override
    @CacheEvict(value="bos_menu_cache",allEntries=true)
    public void save(Menu menu) {
        if (menu.getParentMenu() != null && menu.getParentMenu().getId()==null) {
            menu.setParentMenu(null);
        }
        menuRepository.save(menu);

    }

    /**
     * 查询菜单
     *
     */
    @Override
    public List<Menu> findMenu() {
        
        List<Menu> list = menuRepository.findAll();
        return list;
    }

    /**
     * 根据不同用户显示不同菜单
     *
     */
    @Override
    @Cacheable(value="bos_menu_cache",key="#user.id")
    public List<Menu> findByUser(User user) {
        //判断用户是超级管理员还是普通用户
        if ("admin".equals(user.getUsername())) {
            return menuRepository.findByOrderByPriority();
        } else{
            //普通用户
            return menuRepository.findByUser(user);
        }
    }

    /**
     * 根据id你查询菜单
     *
     */
    @Override
    public Menu finMenuById(Integer id) {
        return menuRepository.findOne(id);
    }

}

dao层代码

package cn.itcast.bos.dao.system;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import cn.itcast.bos.domain.system.Menu;
import cn.itcast.bos.domain.system.User;

public interface MenuRepository extends JpaRepository<Menu, Integer> {
    
    List<Menu> findByOrderByPriority();
    //jpql
    @Query("from Menu m inner join fetch m.roles r inner join fetch r.users u where u=? order by m.priority")
    List<Menu> findByUser(User user);
    //sql
    /*@Query(value="SELECT * FROM t_menu t1 INNER JOIN t_role_menu t2 "
            + "ON t1.c_id=t2.c_menu_id INNER JOIN t_user_role t3 "
            + "ON t2.c_role_id=t3.c_role_id WHERE t3.c_user_id=? ORDER BY t1.c_priority ASC"
            ,nativeQuery=true)
    List<Menu> findByUserId(Integer userId);
*/
}

猜你喜欢

转载自www.cnblogs.com/peng611/p/8988036.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022