jQuery MiniUI

标题: mini.parse()越来越慢的问题求解! [打印本页]

作者: 天涯的尽头 时间: 2021-6-28 20:13:15 标题: mini.parse()越来越慢的问题求解!

场景是:用户点击buttonEdit后会弹出一个模态框,框里会绘制1个上百行的table,每一行包含6个miniUI的组件,(1个下拉框树形选择,2个日期框,1个TextArea,2个绑定了输入后查询事件的AutoComplete);由于组件比较多,调用mini.parse比较耗时很正常;
但是下次点击buttonEdit,重新绘制表格(每次弹框后都会调用jquery的remove方法清空上次的数据)的时候就会变慢(mini.parse方法慢).而且会越来越慢,求解该怎么优化?

作者: felt 时间: 2021-6-29 09:10:36

请提供一个例子页面，我们来分析优化

作者: 天涯的尽头 时间: 2021-7-11 20:52:47

felt 发表于 2021-6-29 09:10
请提供一个例子页面，我们来分析优化

例子我造好了,在treeSelect.html这个页面上改的;
问题现象就是,每次先点'生成下拉树'按钮再点'清空',点的越多,mini.parse方法越慢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreeSelect 树形选择框</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="./css/demo.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/boot.js" type="text/javascript"></script>

</head>
<body>

<div id="contentArea" ></div>
<button id="createAll" onclick="createManyTreeSelect()">生成下拉树</button>
<button id="clearAll" onclick="clearAllTreeSelect()">清空</button>

<script type="text/javascript">
var dataArr='[{id:"base",text:"Base",children:[{id:"ajax",text:"Ajax",pid:"base"},{id:"json",text:"JSON",pid:"base"},{id:"date",text:"Date",pid:"base",checked:true},{id:"control",text:"Control",pid:"base"},{id:"forms",text:"Forms",pid:"base",children:[{id:"button",text:"Button",pid:"forms"},{id:"listbox",text:"ListBox",pid:"forms"},{id:"checkboxlist",text:"CheckBoxList",pid:"forms"}]}]},{id:"lists",text:"Lists",children:[{id:"datagrid",text:"DataGrid",pid:"lists"},{id:"tree",text:"Tree",pid:"lists"},{id:"treegrid",text:"TreeGrid",pid:"lists"}]},{id:"layouts",text:"Layouts",children:[{id:"panel",text:"

anel",pid:"layouts"},{id:"splitter",text:"Splitter",pid:"layouts"},{id:"layout",text:"Layout ",pid:"layouts"}]},{id:"navigations",text:"Navigations",children:[{id:"toolbar",text:"Toolbar",pid:"navigations"},{id:"tabs",text:"Tabs",pid:"navigations"},{id:"outlookbar",text:"OutlookBar",pid:"navigations"},{id:"menu",text:"Menu",pid:"navigations"},{id:"pager",text:"

ager",pid:"navigations"}]},{id:"other",text:"Other",isLeaf:false,asyncLoad:false}]';
function createManyTreeSelect(){
      var str = '';
      for (var i = 0; i < 200; i++) {
         str+="<input id=\"select"+i+"\" class=\"mini-treeselect\" multiSelect=\"true\"\n" +
            "    textField=\"text\" valueField=\"id\" parentField=\"pid\" checkRecursive=\"false\"\n" +
            "    showFolderCheckBox=\"true\" expandOnLoad=\"true\" showClose=\"true\" oncloseclick=\"onCloseClick\"\n" +
            "    popupWidth=\"200\"/>"
      }
      $('#contentArea').append(str);
      var start= new Date();
      mini.parse();
      var end = new Date();
      console.log(end-start);
      for (var i = 0; i < 200; i++) {
         var myTree = mini.get('select'+i);
         myTree.set({
            data

.extend(true, [], eval(dataArr)),
            valueField:'id',
            parentField:'pid'
         });
      }
}
function clearAllTreeSelect(){
$('#contentArea').empty();
}

</script>
</body>
</html>

作者: felt 时间: 2021-7-12 09:09:03

天涯的尽头发表于 2021-7-11 20:52
例子我造好了,在treeSelect.html这个页面上改的;
问题现象就是,每次先点'生成下拉树'按钮再点'清空',点的 ...

你没有清空控件，只是清空了html
var controls = mini.getChildControls($('#contentArea')[0]);

      $(controls).each(function (o, item) {
         item.destroy();
      })

作者: happylover1278 时间: 2021-7-12 17:52:29

felt 发表于 2021-7-12 09:09
你没有清空控件，只是清空了html
var controls = mini.getChildControls($('#contentArea')[0]);

还要注销的么。。。我之前都是替换html后直接直接parse。。。。

作者: felt 时间: 2021-7-12 17:59:33

happylover1278 发表于 2021-7-12 17:52
还要注销的么。。。我之前都是替换html后直接直接parse。。。。

必须的啊，js控件，光删html没用的。

作者: happylover1278 时间: 2021-7-13 10:54:28

felt 发表于 2021-7-12 17:59
必须的啊，js控件，光删html没用的。

完了趁项目还没崩准备跑路

作者: snake 时间: 2021-7-29 14:56:51

happylover1278 发表于 2021-7-13 10:54
完了趁项目还没崩准备跑路

秀啊，成功跑了么

作者: happylover1278 时间: 2021-7-29 16:06:43

snake 发表于 2021-7-29 14:56
秀啊，成功跑了么

还没人发现，先苟活几天

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)