jQuery MiniUI

标题: Tab BeforeTabChange() destroy()无法销毁子控件 [打印本页]
作者: hks2002    时间: 2017-12-6 16:50:37     标题: Tab BeforeTabChange() destroy()无法销毁子控件

本帖最后由 hks2002 于 2017-12-6 16:59 编辑

Tab中设置了beforeactivechanged="onBeforeTabChange", 每个tab中含有一个datagrid
  1. function onBeforeTabChange(e) {
  2.     var tabs = mini.get(e.sender.id);

  4.     var el = tabs.getTabBodyEl(e.tab);
  5.     var ctls = mini.getChildControls(el);
  6.     for(var i=0,l=ctls.length;i<l;i++){
  7.         ctls[i].destroy();
  8.     }  
  9. }

  11. function refreshPage()
  12. {
  13.      mini.findControls(function(control){
  14.        if(control.type == "datagrid") {
  15.            control.load();
  16.        }
  17.   });  

  19. }
  20. var refreshInterval=setInterval("refreshPage()",5000);
复制代码

以上代码定时执行的时候, 新增的tab的datagrid会在findControls中找到, 非活动状态的tab中的datagrid 虽然用了destroy()方法,仍然会在findControls中找到, 这个哪里出问题了?
甚至, 我把整个tabs都动态删掉了, dataGrid仍然在定时发送请求.
作者: dforce    时间: 2017-12-6 17:11:14

html中绑定事件需要用onbeforeactivechanged="onBeforeTabChange"
有问题的话，请把整个页面发出来，回复高级模式可以打包。
作者: hks2002    时间: 2017-12-6 17:31:20

dforce 发表于 2017-12-6 17:11
html中绑定事件需要用onbeforeactivechanged="onBeforeTabChange"
有问题的话，请把整个页面发出来，回复高 ...

已经是绑定了的, 而且调试的时候,也进入到了destroy()那一步,
我的页面是动态拼接成的, 整个页面复制不太方便, 里面的函数都是分离编写的.
  1. <div id="subTabs" class="mini-tabs" activeindex="1" style="width:100%;height:100%;" bodystyle="border:0;" onbeforeactivechanged="onBeforeTabChange" onactivechanged="onTabChange" maskonload="false">
复制代码
tabs的定义是这样的
  1. <div id="subTabs" class="mini-tabs" activeindex="1" style="width:100%;height:100%;" bodystyle="border:0;" onbeforeactivechanged="onBeforeTabChange" onactivechanged="onTabChange" maskonload="false">
复制代码
作者: hks2002    时间: 2017-12-6 17:45:14

本帖最后由 hks2002 于 2017-12-6 17:50 编辑
hks2002 发表于 2017-12-6 17:31
已经是绑定了的, 而且调试的时候,也进入到了destroy()那一步,
我的页面是动态拼接成的, 整个页面复制不 ...

我构造了一个界面:可以重现了

  1. <div class="mini-tabs" activeindex="1" onbeforeactivechanged="onBeforeTabChange">
  2.     <div title="Tab1" >
  3.           <div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
  4.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
  5.                 <div property="columns">
  6.                     <div type="indexcolumn"></div>               
  7.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
  8.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
  9.                     <div header="工作信息">
  10.                         <div property="columns">
  11.                             <div field="dept_name" width="120">所属部门</div>
  12.                             <div field="position_name" width="100">职位</div>
  13.                             <div field="salary" width="100" allowSort="true">薪资</div>
  14.                         </div>
  15.                     </div>
  16.                 </div>
  17.             </div>
  18.     </div>
  19.     <div title="Tab2" iconCls="icon-cut" >
  20.            <div id="datagrid2" class="mini-datagrid" style="width:700px;height:250px;"
  21.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
  22.                 <div property="columns">
  23.                     <div type="indexcolumn"></div>               
  24.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
  25.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
  26.                     <div header="工作信息">
  27.                         <div property="columns">
  28.                             <div field="dept_name" width="120">所属部门</div>
  29.                             <div field="position_name" width="100">职位</div>
  30.                             <div field="salary" width="100" allowSort="true">薪资</div>
  31.                         </div>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.     </div>
  36.     <div title="Tab3" showCloseButton="true">
  37.             <div id="datagrid3" class="mini-datagrid" style="width:700px;height:250px;"
  38.                 url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" >
  39.                 <div property="columns">
  40.                     <div type="indexcolumn"></div>               
  41.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
  42.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>   
  43.                     <div header="工作信息">
  44.                         <div property="columns">
  45.                             <div field="dept_name" width="120">所属部门</div>
  46.                             <div field="position_name" width="100">职位</div>
  47.                             <div field="salary" width="100" allowSort="true">薪资</div>
  48.                         </div>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.     </div>
  53.     <div title="Tab4" showCloseButton="true" enabled="false">
  54.         4
  55.     </div>
  56. </div>
  57. <script type="text/javascript">
  58. function onBeforeTabChange(e) {
  59.     var tabs = mini.get(e.sender.id);

  61.     var el = tabs.getTabBodyEl(e.tab);
  62.     var ctls = mini.getChildControls(el);
  63.     for(var i=0,l=ctls.length;i<l;i++){
  64.         ctls[i].destroy();
  65.     }  
  66. }

  68. function refreshPage()
  69. {
  70.   mini.findControls(function(control){
  71.        if(control.type == "datagrid") {
  72.            control.load();
  73.        }
  74.   });  

  76. }
  77. var refreshInterval=setInterval("refreshPage()",5000);
  78. </script>
复制代码

这个例子的ajax请求会不停的发送, 虽然页面中的datagrid被清理掉了(看不到了).
作者: felt    时间: 2017-12-7 09:35:47

hks2002 发表于 2017-12-6 17:45
我构造了一个界面:可以重现了

[attach]10265[/attach]1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findControls(function (control) {
                if (control.type == "datagrid") {
                    return true;
                }
  });
2 可以这样测试，请看一下我上传的例子，切换之后按按钮，可以找到页面所有的grid，这个数量是真实的。
作者: hks2002    时间: 2017-12-7 13:10:26

felt 发表于 2017-12-7 09:35
1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findCo ...

太感谢了, 建议论坛上总结一些错误用法集, 用户使用前通读,这样可以有意识的避免, 不然按jquery的习惯, 会踩不少坑, 这样挺折腾的.
作者: hks2002    时间: 2017-12-16 23:18:02

本帖最后由 hks2002 于 2017-12-17 00:58 编辑
felt 发表于 2017-12-7 09:35
1 首先你这方法使用的有问题，findControls只是一个查找方法，内部不能执行操作
var grids = mini.findCo ...

问题还是存在.
按照http://miniui.com/bbs/forum.php? ... B%E6%8E%A7%E4%BB%B6

var div=document.getElementById(id);
var controls=mini.getChildControls(div);    //根据dom元素获取所有内部控件
$(controls).each(function(i,item){
    item.destroy();
})这里已经已经删掉了,

控件还是存在, 还是会继续发送ajax请求function refreshPage()
{
   var grids= mini.findControls(function(control){
       if(control.type == "datagrid") {
           return true;
       }
  });

   console.log("grids count:"+grids.length);
   reloadGrids(grids);
}
只要设定了定时:var refreshInterval = setInterval("refreshPage()", 5000); grid的数量就不会减少了.
//grids.length 还是包含了,已经删掉的控件, 即使我的整个tabs已经动态删掉.findControls()是不是有问题呀?求证
[attach]10305[/attach]

对比用jq的方法, jq选择器可以返回正确的grid数量.
function getGrids() {
            var grids = mini.findControls(function (control) {
                if (control.type == "datagrid") {
                    return true;
                }
            });
            var len = $(".mini-datagrid").length;

           console.log("mini:"+grids.length);
           console.log("JQ:"+len);
}
用下面的方法也可以获得正确的grid数量.
var ctls = mini.getChildControls(document); //根据dom元素获取所有内部控件
var grid2=$(ctls).filter(function(i,ctl){
      if (ctl.type == "datagrid") {
        return ctl;
        }
  });


所以findControls()这个方法肯定是不太正常的.
作者: felt    时间: 2017-12-19 13:39:00

hks2002 发表于 2017-12-16 23:18
问题还是存在.
按照http://miniui.com/bbs/forum.php? ... B%E6%8E%A7%E4%BB%B6

不清楚你是怎么测试的。
你的页面上tab123下都有datagrid,监听的是activeChanged事件，销毁的效果是当切换到哪个tab，哪个tab下所有控件销毁，经测试，切换一次之后console.log打印的数量是正确的2



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2