查看: 3400|回复: 8

mini.parse()越来越慢的问题求解! [复制链接]

天涯的尽头

新手上路

Rank: 1

电梯直达

楼主

发表于 2021-6-28 20:13:15 |只看该作者 |倒序浏览

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

收藏0

felt

超级版主

Rank: 8 Rank: 8

沙发

发表于 2021-6-29 09:10:36 |只看该作者

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

天涯的尽头

新手上路

Rank: 1

板凳

发表于 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

超级版主

Rank: 8 Rank: 8

地板

发表于 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();
      })