Question

我正在使用SmartGWT

我正在尝试创建一个显示菜单和输入文本的用户界面。

菜单包含树级别的项目，您可以在“类别”菜单here中看到它。可以过滤菜单中最低项目的输入文本。

如果我在输入文本中输入“2”，则只显示标题中带有“2”的菜单。没有孩子的家长消失了。

运行代码段以查看我想要做的快速示例。

function mainmenu() {
  $(" #nav ul ").css({
    display: "none"
  }); // Opera Fix
  $(" #nav li").hover(function() {
    $(this).find('ul:first').css({
      visibility: "visible",
      display: "none"
    }).show(400);
  }, function() {
    $(this).find('ul:first').css({
      visibility: "hidden"
    });
  });
}



$(document).ready(function() {
  mainmenu();
});

body {
  font-size: 0.85em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.nav,
.nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-position: outside;
  position: relative;
  line-height: 1.5em;
}
.nav a {
  display: block;
  padding: 0px 5px;
  border: 1px solid #333;
  color: #fff;
  text-decoration: none;
  background-color: #333;
}
.nav a:hover {
  background-color: #fff;
  color: #333;
}
.nav li {
  float: left;
  position: relative;
}
.nav ul {
  position: absolute;
  display: none;
  width: 12em;
  top: 1.5em;
}
.nav li ul a {
  width: 12em;
  height: auto;
  float: left;
}
.nav ul ul {
  top: auto;
}
.nav li ul ul {
  left: 12em;
  margin: 0px 0 0 10px;
}
.nav li:hover ul ul,
.nav li:hover ul ul ul,
.nav li:hover ul ul ul ul {
  display: none;
}
.nav li:hover ul,
.nav li li:hover ul,
.nav li li li:hover ul,
.nav li li li li:hover ul {
  display: block;
}

<p>Quick representation of the menu :</p>

<ul class="nav">
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Menu 1.1</a>
      </li>
      <li><a href="#">Menu 1.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Menu 2.1</a>
        <ul>
          <li><a href="#">Menu 2.1.1</a>
          </li>
          <li><a href="#">Menu 2.1.2</a>
          </li>
          <li><a href="#">Menu 2.1.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu 2.2</a>
      </li>
      <li><a href="#">Menu 2.3</a>
        <ul>
          <li><a href="#">Menu 2.3.1</a>
          </li>
          <li><a href="#">Menu 2.3.2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Menu 3.1</a>
      </li>
      <li><a href="#">Menu 3.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a>
    <ul>
      <li><a href="#">Menu 4.1</a>
      </li>
    </ul>
  </li>
</ul>
<br>
<br>
<input value="" />

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<ul class="nav">
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Menu 1.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Menu 2.1</a>
        <ul>
          <li><a href="#">Menu 2.1.1</a>
          </li>
          <li><a href="#">Menu 2.1.2</a>
          </li>
          <li><a href="#">Menu 2.1.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu 2.2</a>
      </li>
      <li><a href="#">Menu 2.3</a>
        <ul>
          <li><a href="#">Menu 2.3.1</a>
          </li>
          <li><a href="#">Menu 2.3.2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Menu 3.2</a>
      </li>
    </ul>
  </li>
</ul>
<br>
<br>
<input value="2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

SmartGwt可以实现吗？

Answer 1

是的，您应该能够达到非常相似的结果。对于子菜单，一种方法是对菜单Toolstrip或ToolStripButton使用ToolStripMenuButton的混合。同时使用DynamicForm和TextItem作为输入文本。当修改TextItem的值时，通过addChangedHandler方法拦截ChangedEvent并相应地更新菜单。

如何从菜单中过滤项目

1 个答案: