Функция create_node JsTree обновляет ранее добавленные данные из узлов - PullRequest
Новая
       8

Функция create_node JsTree обновляет ранее добавленные данные из узлов

1 голос
/ 20 января 2020

Я создаю JsTree со следующей функциональностью: (ссылка JsFiddle в конце)

  • Добавление динамических c новых узлов (работает отлично).
  • Поместите несколько элементов управления внутри данных узла (метки, скрытые поля для использования позже) [Работает нормально]
  • Некоторые элементы управления на странице для установки значений в метки и скрытые поля, которые размещаются внутри узлов [Работает нормально]

Моя проблема: Когда я добавляю текст в метки из других элементов управления, размещенных на странице (в настоящее время я использовал флажок, но на более поздней стадии будет несколько элементов управления), он работает нормально, но после этого я добавляю новый узел все данные который установлен обновляется.

Вот мой код: 

    <div id="html1">
      <ul>
        <li>
        <label class="lblProduct">New</label>
        </li>
      </ul>
    </div>
 <label class="labelRadio">No Fever:</label> <div class="inputRadio"><input id="chkBx_No_Fever" type="checkbox" style="outline:none;"></div>
 <button id="btnTest">Add Filter</button>

Jquery: 

 $('#html1').jstree(
                {
                    "types": {
                        "filter": {
                            "icon": "glyphicon glyphicon-flash"
                        },
                        "treatment": {
                            "icon": "glyphicon glyphicon-ok"
                        }
                    },
                    "core": {
                        "check_callback": true,
                        "themes": {
                            "default": "large",
                            "dots": true
                        }
                    },
                    "plugins": ["wholerow", "changed", "types"]
                });



 var _selected_Node_Container;
        var _newlyCreatedNodeId;
        var _selectedNodeId;
        var _parentId_Of_Selected_Node;
        $("#btnTest").click(function () {
            debugger;
            _selectedNodeId = $('#html1').jstree('get_selected').toString();

            if (_selectedNodeId.length <= 0) { abp.notify.error('Please select record to configure.'); }
            else {
                create_Filter_Node();

                //--- Move selected node under newly created Node

                $('#html1').jstree("move_node", _selectedNodeId, _newlyCreatedNodeId, 0, null, true, false);
                //---- Add Another node for pass/fail condition
                $("#html1").jstree('create_node', _newlyCreatedNodeId, "sub child row", 'last', function (newNode) { _newlyCreatedNodeId = newNode.id });
            }
        });

        $('#html1').on('activate_node.jstree', function (e, data) {
            _parentId_Of_Selected_Node = data.instance.get_node(data.node.parent).id;
            _selectedNodeId = data.node.id;
            _selected_Node_Container = $('li[id=' + _selectedNodeId + ']');
            _selected_Node_Container = _selected_Node_Container.find($('a[id=' + _selectedNodeId + '_anchor]'))

        });
        function create_Filter_Node() {
            var data="";
            data += "<label name=\"lbl_No_Fever\" class=\"lbl_No_Fever\">Click This Row and then click Checkbox</label>";
            data += "<label name=\"lbl_Days_On_Feed_Mode\" class=\"lbl_Days_On_Feed_Mode\"></label>";
            data += "<label name=\"lbl_Days_On_Feed_Value\" class=\"lbl_Days_On_Feed_Value\"></label>";
            data += "<label name=\"lbl_Temperature_Mode\" class=\"lbl_Temperature_Mode\"></label>";
            data += "<label name=\"lbl_Temperature_Value\" class=\"lbl_Temperature_Value\"></label>";
            data += "<label name=\"lbl_Weight_Mode\" class=\"lbl_Weight_Mode\"></label>";
            data += "<label name=\"lbl_Weight_Value\" class=\"lbl_Weight_Value\"></label>";
            data += "<label name=\"lbl_Animal_Type\" class=\"lbl_Animal_Type\"></label>";
            data += "<label name=\"lbl_Processing_Group\" class=\"lbl_Processing_Group\"></label>";
           // data += "<label name=\"lbl_Relapse\" class=\"lbl_Relapse\"></label>";
            data += "<input type=\"hidden\" name=\"lbl_Relapse\" class=\"lbl_Relapse\"/>";
            $("#html1").jstree('create_node', _parentId_Of_Selected_Node, data, 'first', function (newNode) { _newlyCreatedNodeId = newNode.id });
        }

        //------ No Filter checkbox
        $("#chkBx_No_Fever").click(function () {
            if ($(this).is(":checked")) {
                _selected_Node_Container.find('.lbl_Relapse').val("Value From Checkbox");
                _selected_Node_Container.find('.lbl_No_Fever').text("Value From Checkbox");

            } else {
                _selected_Node_Container.find('.lbl_Relapse').text(false);
            }
        });

jsFiddle

Как проверить:

  • Выберите значок папки «Новая»
  • Нажмите кнопку «Добавить фильтр», чтобы создать новый узел «Щелкните по этой строке, а затем установите флажок» с некоторыми дочерними узлами.
  • Выберите узел с текстом «Нажмите эту строку, а затем нажмите флажок», а затем установите флажок. Это изменит текст выделенных узлов на «Значение из флажка» [Только узлы с текстом «Щелкните эту строку, а затем нажмите флажок» изменит текст при щелчке флажка.
  • выберите любой узел и затем нажмите «Добавить фильтр». Теперь создается новый узел, но весь текст заменяется на «Щелкните по этой строке, а затем установите флажок»
...