表刷新时保持行下拉 [英] Sustain dropdown on row while table refreshes

问题描述

我有一张每隔几秒刷新一次的表格.在每一行上，我都有一个下拉列表(来自 ui.bootstrap)，它允许用户在该行上执行操作.

问题在于，从数据库获取新数据后，如果下拉菜单处于打开状态，则会关闭.这对用户来说很烦人.

我最初只是在行上有单独的按钮来执行操作，但我可以看到操作列表可能会增加，所以想移到下拉列表中.

 <tr><td>{{item.name}}</td><td>{{item.age}}</td><td><div class="btn-group" 下拉菜单><button type="button" class="btn btn-sm btn-primary">Action</button><button type="button" class="btn btn-sm btn-primary" dropdown-toggle><span class="caret"></span><span class="sr-only">拆分按钮！</span><ul class="dropdown-menu" role="menu"><li><a>编辑</a><li><a href="#">删除</a><li><a href="#">这里还有别的东西</a><li class="divider"></li><li><a href="#">分隔链接</a>

</td></tr></tbody>

我做了一个 plunkr 来演示这里，可能比胡说八道容易！如果您点击下拉菜单并等待几秒钟，您会看到它消失了.

非常感谢任何建议.

编辑:感谢 Denocle 的回答，在这里...plunkr

...而且我在不使用 DOM 中的 ID 的情况下稍微改进了他的方法，这里... plunkr

感谢您的帮助和评论.

解决方案

只要你的所有行都有一个唯一的 ID，你就可以在刷新之前保存你打开下拉菜单的行的 ID，然后在数据更新后找到该行，将open"类添加到该行的 btn-group 中.

我在这里用一个工作示例分叉了你的演示:http://plnkr.co/edit/6vwBnmbsJQvDxHoxLJ70

//保存和恢复正确下拉的方法api.saveOpenBtnGroup = 函数(){this.openBtnGroupItemId = null;var openBtnGroup = document.getElementsByClassName('btn-group open');如果(openBtnGroup.length > 0){this.openBtnGroupItemId = openBtnGroup[0].getAttribute('data-item-id');}}api.restoreOpenBtnGroup = 函数(){如果 (this.openBtnGroupItemId !== null) {var btnGroup = document.querySelectorAll('[data-item-id="' + this.openBtnGroupItemId + '"]');如果(btnGroup.length == 1){console.log(btnGroup[0].className);btnGroup[0].className = btnGroup[0].className + 'open';console.log(btnGroup[0].className);}}}

<!-- 将唯一的 item id 添加到 btn-group 以便我们以后可以找到它 --><div class="btn-group" dropdown data-item-id="{{item.id}}">

I have a table which refreshes every few seconds. On each row, I have a dropdown (from ui.bootstrap) which allows the user to perform actions on that row.

The issue is that upon getting new data from the DB, if the dropdown is open, it closes. This is quite annoying for the users.

I did originally just have separate buttons on the row to perform the actions, but I can see that the list of actions is likely to grow, so would like to move to a dropdown.

    <tbody ng-repeat="item in items">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <div class="btn-group" dropdown>
                    <button type="button" class="btn btn-sm btn-primary">Action</button>
                    <button type="button" class="btn btn-sm btn-primary" dropdown-toggle>
                        <span class="caret"></span>
                        <span class="sr-only">Split button!</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a>Edit</a>
                        </li>
                        <li><a href="#">Delete</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>

I've done a plunkr to demonstrate here, probably easier than be waffling on! If you click a dropdown and wait a few seconds, you'll see it disappear.

Any advise is very much appreciated.

Edit: Thanks to Denocle for his answer, here... plunkr

...and also I've refined his method slightly without using IDs in the DOM, here... plunkr

Thanks for the help and comments.

解决方案

As long as you have a unique ID to all your rows, you can save the ID of the row that you have the dropdown open for, before you refresh, and then find that row after the data has updated to the add the "open" class to the btn-group on that row.

I forked your demonstration with a working example here: http://plnkr.co/edit/6vwBnmbsJQvDxHoxLJ70

// Method for saving and restoring the correct dropdown

api.saveOpenBtnGroup = function() {
  this.openBtnGroupItemId = null;
  var openBtnGroup = document.getElementsByClassName('btn-group open');
  if (openBtnGroup.length > 0) {
    this.openBtnGroupItemId = openBtnGroup[0].getAttribute('data-item-id');
  }
}

api.restoreOpenBtnGroup = function() {
  if (this.openBtnGroupItemId !== null) {
    var btnGroup = document.querySelectorAll('[data-item-id="' + this.openBtnGroupItemId + '"]');
    if (btnGroup.length == 1) {
      console.log(btnGroup[0].className);
      btnGroup[0].className = btnGroup[0].className + ' open';
      console.log(btnGroup[0].className);
    }
  }
}

<!-- Adding the unique item id to the btn-group so we can find it later -->
<div class="btn-group" dropdown data-item-id="{{item.id}}">

这篇关于表刷新时保持行下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！