我有我的js/jq代码问题。我通过json中的$ .get下载数据并尝试使用循环显示数据。我的代码有效,但有时我的json数据有300-400条记录,redner会花费很多时间。 我如何可以对此进行optymal化?Javascript呈现代码需要很长时间
我的代码:
var selectData = '';
var selectHtml = '';
var krzeselkaArray = [];
$(document).ready(function(){
DownloadData(<?= h($q->id_kontrahent) ?>);
});
function turnOffLoader(){
$('.loader').remove();
}
function DownloadData(oid){
$.get("<?= $this->Url->build(['controller'=>'json','action'=>'KontrahenciKonfiguruj'],true)?>/"+oid, function(r){
selectData = r.select;
selectHtml = $('<select>');
for(var x = 0, len = Object.keys(r.select).length; x < len ; x++){
var obj = r.select[x];
selectHtml.append($('<option>').val(obj.Tkaniny.id_tkaniny).text(obj.Tkaniny.nazwa));
}
for(var x = 0, len = Object.keys(r.konfiguracja.data).length; x < len; x++){
var obj = r.konfiguracja.data[x];
var obj_y = $('.konfiguratorHeaderTable').find('td[data-krzeselkoid="'+obj.id_krzesla+'"]').index();
var konf_cache = $('.zaawansowana_edycja').find('tbody').find('tr.konfiguratorAttr[key="'+obj.TKA1.id_tkaniny+'|'+obj.TKA2.id_tkaniny+'"]');
if(konf_cache.length == 0){
var newHtml = $('<tr>');
newHtml.addClass('konfiguratorAttr').attr('key',obj.TKA1.id_tkaniny+'|'+obj.TKA2.id_tkaniny);
for(var t1=0;t1 < $('.konfiguratorHeaderTable').find('.obr').find('td').length; t1++){
newHtml.append('<td>');
}
$('.zaawansowana_edycja').find('tbody').append(newHtml);
}
konf_cache.find('td:first').html('<div class="col-sm-12"><select>'+selectHtml.html()+'</select></div><div class="col-sm-12"><select>'+selectHtml.html()+'</select></div>');
var h2 = $('<div>');
h2.addClass('col-sm-12');
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
h2.append($('<input>').attr('type','text'));
konf_cache.find('td').eq(obj_y).append(h2.html());
}
if(r){
turnOffLoader();
}
},'json')
}
此外,我的代码生成在各TD包含10个输入表。