Создавайте динамические элементы в javascript и визуализируйте их в интерфейсе пользователя, как только будет создан узел - PullRequest
Новая
       8

Создавайте динамические элементы в javascript и визуализируйте их в интерфейсе пользователя, как только будет создан узел

0 голосов
/ 13 марта 2012

Я работаю над сценарием, который создает дерево. Проблема, с которой я сталкиваюсь, заключается в том, что когда приходит большой кусок данных, он на некоторое время застревает, а затем отрисовывает все в конце.

То, что я ищу, может быть способ сделать его более интерактивным. Например, как только узел создается, он всплывает в интерфейсе.

Для проникновения внутрь я публикую свой код. 

function recursiveGenerateTree(objNode, parntSpan, ulContainer, objEditParam) {
    var cntLi = 0;
    var spnApplyClass;
    var rdbValue;
    var cntrList = 0;

    for (cntLi = 0; cntLi <= objNode.NodeList.length - 1; cntLi++) {

            objEditParam.rdbGroup = objEditParam.rdbGroup;
            rdbValue = objEditParam.orgRootID + '_' + objNode.NodeList[cntLi].Id;
            objEditParam.rdbValue = rdbValue;
            objEditParam.selector = 'radio';
            objEditParam.selector = '';

        objEditParam.isNewNode = false;
        addChild('', parntSpan, ulContainer, objEditParam);

        $('#txtParent').val(objNode.NodeList[cntLi].Name);
        spnApplyClass = $('#txtParent').parents('span:first');
        $('#txtParent').trigger('blur', [spnApplyClass]);
        spnApplyClass.removeClass('bgLime');

        var li = spnApplyClass.parents("li:first");
        li.attr("nodeId", objNode.NodeList[cntLi].Id);
        li.attr("rootnodeId", objNode.NodeList[cntLi].RootOrgUnitId);

        var ulPrsnt = objNode.NodeList[cntLi].NodeList;
        if (ulPrsnt != undefined && ulPrsnt.length > 0) {
            recursiveGenerateTree(objNode.NodeList[cntLi], spnApplyClass, '', objEditParam);
        }
    }

}

Вторая используемая функция - Добавить ребенка 

function addChild(currentbtn, parentSpn, parentUl, objEditParam) {
    var spnElement;
    if ($(currentbtn).length > 0) {
        var dvClick = $(currentbtn).closest('div').siblings('div.OrgGroupLists')
        spnElement = $(dvClick).find('span.bgLime');
    }
    else {
        spnElement = parentSpn;
    }
    if (spnElement.length == 0 && parentUl.length == 0)
        return;

    var crtUlChild;
    if (spnElement.length > 0) {
        var dvCurrent = $(spnElement).closest("div");
        crtUlChild = $(dvCurrent).find('ul:first');
    }

    if (parentUl.length > 0) {
        crtUlChild = parentUl;
    }

    if (crtUlChild.length == 0) {
        var ulChildrens = createUl();
    }
    //Next line needs to be updated.
    var spnImage = $(dvCurrent).find("span:first");
    $(spnImage).removeClass("SpanSpace");
    $(spnImage).addClass("L7CollapseTree");
    var liChildrens = document.createElement("li");
    $(liChildrens).attr("isNew", objEditParam.isNewNode);
    $(liChildrens).attr("isTextEdited", false);
    var dvChildrens = createDivNode(objEditParam);
    $(liChildrens).append(dvChildrens);
    if (crtUlChild.length == 0) {
        $(ulChildrens).append(liChildrens);
        $(dvCurrent).append(ulChildrens);
    }
    else {
        crtUlChild.append(liChildrens);
    }



}

Не стесняйтесь спрашивать более подробную информацию, если требуется, чтобы лучше понять проблему.

1 Ответ

0 голосов
/ 13 марта 2012

Что означает @nnnnnn, так это то, что вы вызываете последующую рекурсию в setTimeout.Я не тратил время, пытаясь реплицировать ваш код локально.Проверьте код JavaScript ниже, например.setTimeout отлично работает для кода ниже.Вы можете варьировать длину переменной j в зависимости от вашего браузера.Внутренний цикл j должен блокировать поток JS. 

<html><head>
  <script>
  var k = 0;
  function recursiveTree(){
    $("#holder").append("<div>Item</div>");
    for(var j =0; j < 100000000; j++){
      // blocking thread
    }
    if (k++ < 20) {
      console.log(k);
      setTimeout(function(){recursiveTree()},10);
    }
  }</script>
 </head>
 <body>
 <div id='holder'></div></body>
</html>

Я предположил, что вы используете JQuery.

Просто для подтверждения того, что вам нужно сделать рекурсивный вызов следующим образом 

if (ulPrsnt != undefined && ulPrsnt.length > 0) {
  setTimeout(function(){recursiveGenerateTree(objNode.NodeList[cntLi], spnApplyClass, '', objEditParam);},10);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...