维持在行下拉而表刷新 [英] Sustain dropdown on row while table refreshes

问题描述

我有每隔几秒钟刷新表。在各行，我有一个下拉（从ui.bootstrap），其允许用户在该行上执行的操作

问题是，在从数据库中获取新的数据，如果下拉是开放的，它会关闭。这是用户很烦人的。

我原本只是对行分开的按钮进行操作，但是我可以看到，操作列表可能会增长，所以想移动到一个下拉列表。

 ＆LT; TBODY NG重复=中的项项＆GT;
        ＆所述; TR＆GT;
            ＆所述; TD＆GT; {{item.name}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{item.age}}＆下; / TD＆GT;
            ＆所述; TD＆GT;
                ＆LT; D​​IV CLASS =BTN-组下拉＆GT;
                    ＆LT;按钮式=按钮级=BTN BTN-SM BTN-小学＆GT;动作＆LT; /按钮＆GT;
                    ＆LT;按钮式=按钮级=BTN BTN-SM BTN-主要下拉拨动＆GT;
                        ＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
                        ＆LT;跨度类=SR-只有＆GT;！分割按钮＆LT; / SPAN＆GT;
                    ＆LT; /按钮＆GT;
                    ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
                        ＆LT;立GT;＆LT; A＆gt;编辑＆LT; / A＆GT;
                        ＆LT; /李＆GT;
                        ＆LT;立GT;＆LT; A HREF =＃＆GT;删除＆LT; / A＆GT;
                        ＆LT; /李＆GT;
                        ＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;
                        ＆LT; /李＆GT;
                        ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
                        ＆LT;立GT;＆LT; A HREF =＃＆GT;分离链接＆LT; / A＆GT;
                        ＆LT; /李＆GT;
                    ＆LT; / UL＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
 

我已经做了plunkr证明这里，可能比更容易是胡扯了！如果您单击下拉，等待几秒钟，你会看到它消失。

任何建议非常多AP preciated。

修改：
由于 Denocle 作为他的答案，在这里... plunkr

......还我提炼了他的方法略有不使用的ID在DOM，这里...的 plunkr

感谢您的帮助和建议。

解决方案

只要你有一个唯一的ID到所有的行，你可以保存你的下拉菜单打开，刷新前行的ID，然后找到该行的数据已更新为打开类添加到BTN-组在该行之后。

我分叉了工作示例演示您的位置： http://plnkr.co/edit/6vwBnmbsJQvDxHoxLJ70

\r

\r

//方法保存和恢复正确的下拉列表\r
\r
api.saveOpenBtnGroup =功能（）{\r
  this.openBtnGroupItemId = NULL;\r
  VAR openBtnGroup = document.getElementsByClassName（'BTN-组开'）;\r
  如果（openBtnGroup.length大于0）{\r
    this.openBtnGroupItemId = openBtnGroup [0] .getAttribute（数据项ID）;\r
  }\r
}\r
\r
api.restoreOpenBtnGroup =功能（）{\r
  如果（this.openBtnGroupItemId！== NULL）{\r
    VAR btnGroup = document.querySelectorAll（'[数据项-ID =+ this.openBtnGroupItemId +']'）;\r
    如果（btnGroup.length == 1）{\r
      的console.log（btnGroup [0机] .className）;\r
      btnGroup [0机] .className = btnGroup [0机] .className +开放;\r
      的console.log（btnGroup [0机] .className）;\r
    }\r
  }\r
}

\r

＆LT;！ - 添加独特的项目ID的BTN-组，所以我们以后能够找到它 - ＆GT;\r
＆LT; D​​IV CLASS =BTN-组下拉列表中的数据项-ID ={{item.id}}＆GT;

\r

\r

\r

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屋！