club子菜单无法保持选中状态

image.png

点了添加按钮,跳转到表单页面,左边的子菜单选中状态消失了。

menu页面中的html如下:

image.png

添加按钮的html如下:

<div class="jfa-toolbar">
    <a  class="btn btn-primary btn-sm" id="btnAdd" href="/admin/article/add?menucode=#(menu)" >
        <i class="fa fa-plus"></i>
        添加文章
    </a>
</div>


控制器代码如下:

public class ArticleAdminController extends BaseController {

@Inject
ArticleAdminService srv;
@Inject
ArticleSubmenuAdminService submenuSrv;

public void index(){
    keepPara("menu");
    String menuCode = getPara("menu","toutiao");
    int pageIndex = getParaToInt("p", 1);
    
    Page<Article> artPage = srv.paginate(menuCode,pageIndex);
    
    setAttr("artPage", artPage);
    render("index.html");
}

/**
 * 创建
 */
public void add() {
    keepPara("menucode");
    String menuCode = getPara("menucode");
    setAttr("submenus", submenuSrv.findByMenuCode(menuCode));
    render("add_edit.html");
}

/**
 * 提交创建
 */
public void save() {
    keepPara("menucode");
    Article art = getBean(Article.class,"article");
    Ret ret = srv.save(art);
    renderJson(ret);
}

/**
 * 修改
 */
public void edit() {
    keepPara("menucode");
    keepPara("p");// 保持住分页的页号,便于在 ajax 提交后跳转到当前数据所在的页
    setAttr("article", srv.edit(getParaToInt("id")));
    setAttr("submenus", submenuSrv.findByMenuCode(getPara("menucode")));
    render("add_edit.html");
}

/**
 * 提交修改
 */
public void update() {
    keepPara("menucode");
    Article art = getBean(Article.class,"article");
    Ret ret = srv.update(art);
    renderJson(ret);
}

/**
 * 锁定
 */
public void lock() {
    Ret ret = srv.lock(getParaToInt("id"));
    renderJson(ret);
}

/**
 * 解除锁定
 */
public void unlock() {
    Ret ret = srv.unlock(getParaToInt("id"));
    renderJson(ret);
}
/**
 * 删除
 */
public void delete() {
    Ret ret = srv.delete(getParaToInt("id"));
    renderJson(ret);
}
}

-----------------------------------------------------------

经过单步调试,找到问题原因:

image.png

点击【添加按钮】并加载表单后,jfinal-admin.js在进行反向匹配菜单时,是根据按钮action的pathName进行的,如果pathName和菜单href匹配不上,则无法选中。

评论区

JFinal

2019-03-13 18:18

看一下 jfinal-club/src/main/webapp/assets/js/jfinal-admin.js 这个文件中的 clickSubMenu() 方法,其中有三行代码如下:
// 设置当前选中菜单样式
$(".jfa-sub-menu a").removeClass("jfa-cur-menu");
$(".jfa-main-menu[home='true']").removeClass("jfa-cur-menu");
$this.addClass("jfa-cur-menu");

按一下 F12 打开浏览器的开发者工具,然后按 esc 键将浏览器控制台打开,再点击菜单,看控制台有没有 js 脚本错误,如果有错误解决一下即可

在点击子菜单的同时看一下开发者工具的 dom 文档中的当前被选中的菜单上的 class= 是不是被赋上值了:
class = "jfa-cur-menu"

要确保被赋上值,如果赋上值还是没效果,那就是 css 的问题,只要确保 copy 已存在的纯正的菜单过去改改就好

总之就两类问题:
1:js 错误(包括 js 文件找不到)
2:css 错误,包括 css 未正确操控,或者正确操控但没不是想要的效果

JFinal

2019-03-13 18:23

大概率是你的菜单并不是按 jfinal club 的菜单结构来的,造成目标即便添加了
class="jfa-cur-menu"
以后,没有效果,因为 jfa-cur-menu 是针对 jfinal club 的菜单结构生效的 css ,你菜单结构变了,css 就不会生效

lanin

2019-03-13 18:30

@JFinal 报这个错误,
Unchecked runtime.lastError: The message port closed before a response was received.

lanin

2019-03-13 18:35

当前子菜单的选中样式没有赋值成功。

JFinal

2019-03-13 18:37

@lanin 将 js 改对,先确保 css 赋值成功

你可以先在当前菜单上手动添加一个 class="jfa-cur-menu" , 看显示效果如何,然后就剩解决 js 的问题了

控制台会明确告诉你 js 是哪行代码出错了,根据提示去解决

lanin

2019-03-13 19:18

@JFinal 把chrome的插件都关闭后,不报错了,但是问题没解决。

lanin

2019-03-13 19:25

@JFinal 手动添加选中样式可以正常显示。

lanin

2019-03-14 01:03

@JFinal 找到原因了,既不是我写的代码有错,只能说是用法不符合要求。
在加载表单后,jfinal-admin.js在进行反向匹配菜单时,是根据按钮action的pathName进行的,如果pathName和菜单的href匹配不上,则无法选中。

lanin

2019-03-14 01:33

谢谢波总耐心指导。