jsTree：使用模态打开“添加文件夹”（或任何右键单击选项）答案

【问题标题】：jsTree: open "add folder" (or any right-click option) with modaljsTree：使用模态打开“添加文件夹”（或任何右键单击选项）
【发布时间】：2014-02-17 01:29:31
【问题描述】：

我继承了一个有点意大利面编码的上传程序，它使用 jsTree 列出上传的文件。当您右键单击 jsTree 时，您会看到一个选项框，其中包含一些选项（上传文件、添加文件夹、删除文件夹等）。这些选项会导致单独的页面。我想知道当您单击这些选项（例如添加文件夹）时，是否有可能触发模式弹出窗口而不是转到单独的页面？

这是我正在尝试使用的代码：

function buildTreeViewContextMenu(node)
{
    var items = {};
    if ($(node).attr('id') == 'trash')
    {
        <?php if($totalTrash > 0): ?>
        var items = {
            "Empty": {
                "label": "<?php echo t('empty_trash', 'Empty Trash'); ?>",
                "action": function(obj) {
                    confirmEmptyTrash();
                }
            }
        };
        <?php endif; ?>
    }
    else if ($(node).attr('id') == '-1')
    {
        var items = {
            "Upload": {
                "label": "<?php echo t('upload_files', 'Upload Files'); ?>",
                "separator_after": true,
                "action": function(obj) {

                    window.location='/';
                }
            },

            "Add": {
                "label": "<?php echo t('add_folder', 'Add Folder'); ?>",
                "action": function(obj) {                       
                    window.location='/view/folder/add?p='+obj.attr("id"); // this part I want to convert to a modal
                }
            }
        };

    }

例如，这里是“添加文件夹”的模式：

<div class="panel-body">
            <!-- Modal -->
            <div class="modal fade" id="modalAddFolder" tabindex="-1" role="dialog" aria-labelledby="modalAddFolder" aria-hidden="true">
                    <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Add Folder</h4>
                                </div>
                                <div class="modal-body">
                                    <?php require_once("folder/add.php"); ?>
                                </div>
                        </div>
                </div>
        </div>
        <!-- /Add Folder modal -->
    </div>
    <!-- /modal -->

我尝试过使用this page，但无法集成它。

【问题讨论】：

标签： javascript jquery twitter-bootstrap jstree

【解决方案1】：

想通了-希望这对其他人有所帮助。它比我想象的要简单得多：

你可以用一些 jQuery 触发模态（我不知道为什么我不认为我不能混合使用 javascript / jQuery - 也许这不是一个好习惯，但现在，它可以工作。）

 "Add": {
        "label": "<?php echo t('add_folder', 'Add Folder'); ?>",
         "action": function(obj) {
           $('#modalAddFolder').modal('show'); 
           }
          },

与 window.location 不同，这个不启动变量，但可以在必要时轻松附加。

【讨论】：