Question

我有一个jstree，用于管理工作分解结构。所需的功能是用户点击节点，弹出一个模式，其中包含一个表单文本字段。然后，用户可以重命名节点。当他们在模态中提交表单时，树会刷新新名称。我所做的一切都达到了树刷新的程度。当树刷新时...模态关闭但重新打开。我相信从节点解除click事件的绑定需要发生什么？这是代码。

选择节点点击事件

    $('.activity_div').on("select_node.jstree", function (e, data) { 
        var val     = data.node.id;
        var act_id  = val.substr(val.indexOf("_") + 1);
        //alert("node_id: " + data.node.id); 
        $.ajax({
            url: 'cfc/cfc_wbs.cfc?method=func_get_activity_code_details&returnformat=json',
            type: 'post',
            dataType: 'json',
            data: { 
                est_id:     estimate_id,
                act_id:     act_id
            },
            success: function(data){
                if(data && data.length) { 
                    var html            = "";
                    $.each(data, function(i, val) {
                        var status              = data[i].status;
                        var message             = data[i].message;
                        var text                = data[i].text;
                        var id                  = data[i].id;
                        var node                = data[i].node;
                        if (status == 'SUCCESS'){
                            $('#edit_modal').modal();
                            $('#node_text').val(text);
                            $('#node_id').val(id);
                            $('#node').val(node);

                        }
                    })
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                var errorMsg = 'Ajax request failed: ' + xhr.responseText;
                $('#content').html(errorMsg);
              }
        });
    });

模态表单提交事件

// FORM VALIDATION
$('#form_activity_code').validate();    
    // EDIT FORM SUBMISSION
    $('#form_activity_code').on('click', '.btn-node-submit', function (e) {
        if($("#form_activity_code").valid()){
            var node_id         =   $('#node_id').val();
            var node            =   $('#node').val();
            var node_text       =   $('#node_text').val();
            $.ajax({
                url: 'cfc/cfc_wbs.cfc?method=func_update_activity_codes&returnformat=json',
                type: 'post',
                dataType: 'json',
                data: { 
                    act_id:         node_id,
                    est_id:         estimate_id,
                    node_text:      node_text,
                    node:           node
                },
                success: function (data) {
                    if(data && data.length) { 
                        var html            = "";
                        $.each(data, function(i, val) {
                            var status              = data[i].status;
                            //var message               = data[i].message;
                            //var activity              = data[i].activity;
                            //var activity_date_time    = data[i].activity_date_time;
                            //var person                = data[i].person;
                            //var user                  = data[i].user;
                            if (status == 'SUCCESS'){
                                $('#activity_codes_div').jstree(true).settings.core.data = data;
                                $('#activity_codes_div').jstree(true).refresh();
                                $('#edit_modal').modal('toggle');
                                return false;
                            } else {
                            }
                        });
                    }
                }
            });
        } else {
        }
    });

Answer 1

您可以使用事件refresh.jstree

隐藏模态

$("#activity_codes_div").on("refresh.jstree",function(){
    $('#edit_modal').modal('hide');
});

看起来像是$('#activity_codes_div').jstree(true).refresh();行阻止引导模式对话框因某种原因而关闭，而不是你认为如果你从{删除上面的那一行而选择的节点事件{1}}事件您将看到模态隐藏并正常工作。

使用事件$('#form_activity_code').on('click', '.btn-node-submit', function (e) {隐藏模态解决问题，请参阅工作fiddle

或下面的代码段

＆＃13;

refresh.jstree

＆＃13;

var data = [{
    "state": {
      "opened": true
    },
    "text": "engineering",
    "icon": "fa fa-circle-o",
    "children": [{
        "state": {
          "opened": true
        },
        "text": "piping",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "stainless steel",
          "icon": "fa fa-dot-circle",
          "children": [{
            "state": {
              "opened": true
            },
            "text": "small bore",
            "icon": "fa fa-billseye"
          }]
        }]
      },
      {
        "state": {
          "opened": true
        },
        "text": "structural",
        "icon": "fa fa-dot-circle-o",
        "children": []
      },
      {
        "state": {
          "opened": true
        },
        "text": "civil",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "deep foundations",
          "icon": "fa fa-dot-circle",
          "children": []
        }]
      }
    ]
  },
  {
    "state": {
      "opened": true
    },
    "text": "procurement",
    "icon": "fa fa-circle-o",
    "children": [{
        "state": {
          "opened": true
        },
        "text": "piping",
        "icon": "fa fa-dot-circle-o",
        "children": [{
          "state": {
            "opened": true
          },
          "text": "stainless steel",
          "icon": "fa fa-dot-circle",
          "children": [{
            "state": {
              "opened": true
            },
            "text": "small bore",
            "icon": "fa fa-billseye"
          }]
        }]
      },
      {
        "state": {
          "opened": true
        },
        "text": "structural",
        "icon": "fa fa-dot-circle-o",
        "children": []
      },
      {
        "state": {
          "opened": true
        },
        "text": "civil",
        "icon": "fa fa-dot-circle-o",
        "children": []
      }
    ]
  }
]

$('.activity_div').on("select_node.jstree", function(e, data) {
  var val = data.node.id;
  var act_id = val.substr(val.indexOf("_") + 1);
  //alert("node_id: " + data.node.id); 
  $('#edit_modal').modal();
  return false;
});

$("#activity_codes_div").on("refresh.jstree", function() {

  $('#edit_modal').modal('hide');
})

// EDIT FORM SUBMISSION
$('#form_activity_code').on('click', '.btn-node-submit', function(e) {
  e.preventDefault();

  $('#activity_codes_div').jstree(true).settings.core.data = data;

  $('#activity_codes_div').jstree(true).refresh();

  return false;
});

$('#activity_codes_div').jstree({
  'core': {
    'data': data,
  }
});

＆＃13;

如何取消绑定jstree select_node事件

1 个答案: