HISUI
侧菜单增加检索框
2023年05月29日 11时57分

侧菜单增加检索框,方便用户找到菜单。

需求实现的效果图:

修改代码的步骤:

对应修改两个文件,修改前请注意备份!

1、studio打开:

imedical/web/scripts/websys.frames.js
新增红色框的代码:

代码文本:

    $("#searchBox").on('keypress',function(ev){
        if(ev.keyCode==13){
          ev.stopPropagation();
          ev.preventDefault()
          searchHandle();
        }
    })
    $("#searchBtn").on('click', function(){
          searchHandle();
    });

然后,下面的代码复制到文件的最后面,添加保存。

function searchHandle(){
    var searchVal = document.getElementById("searchBox").value;
    var html = $("#navmenu").html();
    $("#navmenu i.menu-icon").each(function(ind,itm){
        var _t = $(this);
        var _li = _t.closest('li');
        var _tx = "";
        if (_t[0].nextSibling.nodeType==3){
            _tx = _t[0].nextSibling.nodeValue || _t[0].nextSibling.innerText;
        }else if(_t[0].nextSibling.nodeType==1){
            _tx = _t[0].nextSibling.innerText; 
        }
        if (typeof _t.data('originText')=="undefined"){
            _t.data('originText', _tx);
        }else{
            _tx = _t.data('originText');
        }
        _t[0].nextSibling.innerHTML = _tx;
        if (_tx.indexOf(searchVal)==-1){
            _li.hide();
            return ;
        }else{
            // show parent menu
            _li.show();
            if (searchVal!=""){
                var _parentLi = _li.parent().closest('li');
                while(_parentLi.length>0 && _parentLi.closest('#navmenu').length>0 ){
                    _parentLi.show();
                    // // ace.submenu.show(_parentLi);
                    //if (_parentLi.attr("class") && _parentLi.attr("class").indexOf("open") == -1) _parentLi.children(0).click();
                    _parentLi = _parentLi.parent().closest('li');
                }
                _yellowtx = _tx.replace(searchVal, function(word){
                    return "<b style='background-color:yellow;'>"+word+"</b>"
                });
                $(_t[0].nextSibling).remove();
                $("<span>"+_yellowtx+"</span>").insertAfter(_t);
                //$("<span>"+_yellowtx+"</span>").replaceWith(_t[0].nextSibling);
            }
        }
    });
    //$("#navmenu").find("li.hsub:visible").removeClass('open');
    expandFirstMenu($("#navmenu"))
    return ;
}
function expandFirstMenu(mymenu){
    var dropdownMenu = mymenu.find("li:visible a.dropdown-toggle").eq(0);
    if (dropdownMenu.length>0){
        if (!dropdownMenu.parent().hasClass('open')){
            console.log(dropdownMenu.text());
            //dropdownMenu.click(); //-- 会导致lu的高度为0, 点击不能展开
            dropdownMenu.parent().addClass('open')
            dropdownMenu.next().show();
        }
        expandFirstMenu(dropdownMenu.next())
    }
}

2、studio打开:

imedical/web/csp/websys.frames.csp
新增红色框的代码:

代码文本:

            <!--新增搜索框-->
            <div class="sidebar-shortcuts" id="sidebar-shortcuts">
                <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                    <div class="navbar-header pull-left">
                        <strong>
                            <span class="navbar-brand" style="height:30px;padding:5px 5px;font-size:14px;color:#1095F1">
                                输入菜单名查询
                            </span>
                         </strong>
                    </div>
                     <div class="navbar-header pull-left" >
                        <table>
                           <tr>
                            <td><input id="searchBox" type="text" class="form-control"></td>
                            <td><span class="input-group-btn">
                                <button id="searchBtn" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span></td>
                          </tr>
                        </table>
                    </div>

                    <!-- /section:basics/sidebar.layout.shortcuts -->
                </div>

                <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini" style="background-color:#00A2E8;">
                   <img src="../scripts/bdp/Framework/assets/images/BDP.png" alt="BDPLogo" style="width: 30px; height: 30px; margin: 5px;"/>
                </div>
            </div><!-- /.sidebar-shortcuts --> 
            <!--新增搜索框完-->     
上一篇: 下一篇:

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注

访问量: 379595