jquery - JsTree create_node 函数正在从节点更新先前添加的数据

Question

我正在创建 JsTree，具有以下功能：（JsFiddle 链接在最后）

• 添加动态新节点（完美运行）。
• 在节点数据中放置多个控件（标签、隐藏字段以供以后使用）[工作正常]
• 页面上的一些控件用于将值设置为放置在节点内的标签和隐藏字段 [工作正常]

我的问题是：当我从放置在页面上的其他控件向标签添加文本时（目前我使用了复选框，但后期会有多个控件）它工作正常，但之后我添加了新节点所有设置的数据被刷新。

这是我的代码：

    <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>

查询：

 $('#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

如何测试：

• 选择“新建”文件夹图标
• 按“添加过滤器”按钮，这将创建带有一些子节点的新节点“单击此行，然后单击复选框”。
• 选择带有文本“单击此行然后单击复选框”的节点，然后选中复选框。这会将选定的节点文本更改为“复选框中的值”[只有带有文本的节点“单击此行然后单击复选框”将在单击复选框时更改文本。
• 选择任何节点，然后按“添加过滤器”。现在创建了一个新节点，但所有文本都替换为“单击此行，然后单击复选框”

标签： jqueryjstree