jstree pre1.0 fix + плагин флажка - Как связать операции?

ОБНОВЛЕНИЕ ОБ ЭТОМ: я могу предупредить выбранные флажки, но мне трудно заставить работать привязку операций, таких как вырезание, вставка, копирование и переименование

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

        <li id="Events" class="label">
                <a href='#Events'><span> Events </span></a>
        <div class="sub-menu"  style="height:auto; min-height:120px; background-color:#E5E5E5">
            <div class="menu" id="menu_a" style="position:relative; margin-left:56%">
            <img src="./js/jsTree/create.png" alt="" style="cursor:pointer" id="create" title="Create" >
            <img src="./js/jsTree/rename.png" alt="" style="cursor:pointer" id="rename" title="Rename" >
            <img src="./js/jsTree/remove.png" alt="" style="cursor:pointer"  id="remove"  title="Delete">
            <img src="./js/jsTree/cut.png" alt="" style="cursor:pointer" id="cut" title="Cut" >
            <img src="./js/jsTree/copy.png" alt="" style="cursor:pointer" id="copy" title="Copy">
            <img src="./js/jsTree/paste.png" alt=""  style="cursor:pointer" id="paste" title="Paste">
            </div>

                <div id="a" class="jstree_container"></div>
        </div>

        </li>

        <!-- JavaScript neccessary for the tree -->
        <script type="text/javascript" >
           jQuery.noConflict();

        jQuery(function ($) {

        $("#a").jstree({ 
                // List of active plugins
                "plugins" : [ 
                    "themes","json_data","ui","crrm","dnd","types","hotkeys","checkbox"
                ],

        /*"ui":{select_limit:-1},       */
        "checkbox": {
            override_ui:true,
                      real_checkboxes: true,
                      real_checkboxes_names: function (n) {
                         var nid = 1;
                         $(n).each(function (data) {
                            nid = $(this).attr("nodeid");
                         });
                         return (["check_" + nid, nid]);
                      },
                      two_state: true
                   },

              themes: {"theme": "classic"},
                // This example uses JSON as it is most common
                "json_data" : { 
                    // This tree is ajax enabled - as this is most common, and maybe a bit more complex
                    // All the options are almost the same as jQuery's AJAX (read the docs)
                    "ajax" : {
                        // the URL to fetch the data
                        "url" : "./js/jsTree/server.php?user_id=jeanpaul&cat=a",
                        // the `data` function is executed in the instance's scope
                        // the parameter is the node being loaded 
                        // (may be -1, 0, or undefined when loading the root nodes)
                        "data" : function (n) { 
                            // the result is fed to the AJAX request `data` option
                            return { 
                                "operation" : "get_children", 
                                "id" : n.attr ? n.attr("id").replace("node_","") : 1 
                            }; 
                        }
                    }
                },

            })


            .bind("create.jstree", function (e, data) {
                $.post(
                    "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
                    { 
                        "operation" : "create_node", 
                        "id" : data.rslt.parent.attr("id").replace("node_",""), 
                        "position" : data.rslt.position,
                        "label" : data.rslt.name,
                        "type" : data.rslt.obj.attr("rel")
                    }, 
                    function (r) {
                        if(r.status) {
                            $(data.rslt.obj).attr("id", "node_" + r.id);
                        }
                        else {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );

            }
            )


            .bind("remove.jstree", function (e, data) {
                data.rslt.obj.each(function () {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "./js/jsTree/server.php?user_id=jeanpaul&cat=a",
                        data : { 
                            "operation" : "remove_node", 
                            "id" : this.id.replace("node_","")  
                        }, 
                        success : function (r) {
                            if(!r.status) {
                                data.inst.refresh();
                                $.jstree._reference($("#a")).refresh(-1);
                            }
                        }
                    });
                });
            })


            .bind("rename.jstree", function (e, data) {

                $.post(
                    "./js/jsTree/server.php?user_id=jeanpaul&cat=a", 
                    { 
                        "operation" : "rename_node", 
                        "id" : data.rslt.obj.attr("id").replace("node_",""),  /*data.rslt.obj.attr("id").replace("node_",""),*/
                        "label" : data.rslt.new_name
                    }, 
                    function (r) {
                        if(!r.status) {
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                );

            })


            .bind("move_node.jstree", function (e, data) {
                data.rslt.o.each(function (i) {
                    $.ajax({
                        async : false,
                        type: 'POST',
                        url: "./js/jsTree/server.php?user_id=jeanpaul&cat=a",
                        data : { 
                            "operation" : "move_node", 
                            "id" : $(this).attr("id").replace("node_",""), 
                            "ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""), 
                            "position" : data.rslt.cp + i,
                            "label" : data.rslt.name,
                            "copy" : data.rslt.cy ? 1 : 0
                        },
                        success : function (r) {
                            if(!r.status) {
                                $.jstree.rollback(data.rlbk);
                            }
                            else {
                                $(data.rslt.oc).attr("id", "node_" + r.id);
                                if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
                                    data.inst.refresh(data.inst._get_parent(data.rslt.oc));
                                }
                            }
                        }
                    });
                });
            });

        });
        </script>
        <script type="text/javascript" >
        // Code for the menu buttons of Events
           jQuery.noConflict();
            jQuery(function ($) { 

            $("#menu_a img").click(function () {

            //makes the images to behave as links, can't use a within the li because it thinks that is an accordion menu    



                switch(this.id) {



        case "create":
                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){
                        $("#a").jstree("create",'#'+$(element).attr("id"),"last",null);     
                        });
        break;

        case "remove":
                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){
                        $("#a").jstree("remove",'#'+$(element).attr("id"));     
                        });
        $.jstree._reference($("#a")).refresh(-1);               
        break;




        case "rename":

                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){           


                    $("#a").jstree("rename", '#'+$(element).attr("id"), true  );


                        });

        break;



        case "cut":
                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){

                            $("#a").jstree("cut", '#'+$(element).attr("id")); 
                        });
        break;



        case "copy":

                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){

                            $("#a").jstree("copy", '#'+$(element).attr("id")); 
                        });
        break;



        case "paste":

                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){

                            $("#a").jstree("paste", '#'+$(element).attr("id")); 
                        });
        break;



                    default:
        /*for tests only */
                    $.jstree._reference("#a").get_checked(-1, true).each(function(index,element){

                        //alert($(element).attr("id"));
                            $("#a").jstree(this.id, '#'+$(element).attr("id")); 
                        });

                        break;
                }
            });
        });

        </script>

Что мне нужно изменить в этих функциях, чтобы они правильно привязывались к проверенным элементам, чтобы разрешить операции с узлами?

Заранее благодарим вас за любые предложения.

JP-


person Jean Paul -JP A.K.A el_vete    schedule 02.06.2012    source источник


Ответы (2)


Изменять

.bind("change_state create.jstree")

чтобы просто

.bind("create.jstree")
person Hybride    schedule 03.06.2012
comment
data.rslt.obj is undefined [Break On This Error] data.rslt.obj.each(function() { при попытке удалить - person Jean Paul -JP A.K.A el_vete; 04.06.2012
comment
Гибрид, ваш ответ частично правильный ... Я имею в виду, что он работает только для удаления многих узлов с помощью плагина флажка, но если я использую переименование с меню содержимого с одним выбором, он действительно работает, иначе, если я выберу более одного, я получить только последний для переименования.. однако, если я использую значок с пользовательским событием, я получаю: obj.children не является функцией w1 = obj.children(ins).width(), на jquery.jstree.js (строка 1267) .. Я бы очень хотел принять ваш ответ, но не хочу смущать других, хотя .. есть идеи, как обойти эту проблему? Я хочу, чтобы контекстное меню работало как значки. - person Jean Paul -JP A.K.A el_vete; 04.06.2012
comment
Можете ли вы сделать мне одолжение и обновить свой код тем, что вы сделали с тех пор? Точно так же, когда я читаю, я не пытаюсь исправить то, что вы уже сделали. - person Hybride; 04.06.2012
comment
Привет, Гибрид, конечно! На самом деле я только что отредактировал свой пост с последними изменениями. Заранее благодарим вас за любую помощь, которую вы можете предоставить :) - person Jean Paul -JP A.K.A el_vete; 05.06.2012
comment
Итак, функция удаления работает, но ни одна из других, верно? Почему вы переименовали функции в remove.jstree._reference(#f).get_selected() вместо того, чтобы просто оставить их как bind(remove.jstree)? - person Hybride; 05.06.2012
comment
потому что у меня более одного дерева, javascript повторяется.. извините, возможно, я просто делаю это неправильно, но почитайте документацию, может быть, правильнее было бы использовать get_checked? - person Jean Paul -JP A.K.A el_vete; 07.06.2012
comment
Для нескольких экземпляров вы пытались использовать: var treeID = $(NODE).parents(div:first).attr(id), // получить идентификатор дерева tree = jQuery.tree.reference($(# + treeID) ); // получить экземпляр дерева по идентификатору (проверьте: эта ссылка ) - person Hybride; 07.06.2012

person    schedule
comment
очевидно, я делаю это для многих деревьев, поэтому мне нужна ссылка :) - person Jean Paul -JP A.K.A el_vete; 07.06.2012
comment
@Hybride: код выше обновлен, чтобы отразить последние изменения. - person Jean Paul -JP A.K.A el_vete; 07.06.2012
comment
В этом случае вы пытаетесь переименовать несколько узлов? (Я прошу прощения за то, что задаю так много вопросов, я пытаюсь понять, что вы пытаетесь сделать, и я думаю, что запутался между двумя сообщениями. :) - person Hybride; 07.06.2012
comment
ну, я хотел бы сделать это, если это возможно .. хотя я объяснил это клиенту, и он сказал, что это не так важно :P - person Jean Paul -JP A.K.A el_vete; 08.06.2012
comment
Я не совсем уверен, что это возможно без создания формы PHP (или другого языка) для одновременной обработки нескольких переименований (например, сценария обновления). Есть ли шанс, что вы можете показать нам, что имеет форма server.php? Я думаю, что jsTree/jQuery в порядке, но фактическая форма не получает переменные. - person Hybride; 08.06.2012
comment
В move_node и переименовать попробуйте изменить метку на заголовок; а также, switch(this.id) - вы действительно передаете какие-либо переменные для идентификатора? - person Hybride; 08.06.2012
comment
this.id — это значение идентификатора изображения, которое запускает событие.. а метка — это просто соглашение, потому что в нашем дБ у нас есть метка и полная метка, которая является зашифрованным значением метки. Вероятно, это не является обязательным требованием и еще не реализовано. То, о чем я думал, - это скорее функция Ajax jQuery перед этим событием, которая остановит его, как предупреждение или приглашение с обычным javascript. В реальной жизни пытается переименовать узел, но прыгает до последнего элемента... а затем останавливается, ожидая, пока пользователь введет имя, чтобы изменить его. Тогда вы можете увидеть - person Jean Paul -JP A.K.A el_vete; 09.06.2012
comment
что он фактически пытается в последний раз запросить сервер и передать значения. Server.php взаимодействует только с классами db, которые поставляются с пакетом. Вероятно, некоторые из переданных значений, которые потребуются позже, это cat = d для обсуждений, a для вопросов и т. д. Затем он должен возвращать только совпадения с этим значением db, а также идентификатором пользователя, который я передаю, и он находится в выходной код как jeanpaul... это мое имя пользователя, и оно должно быть просто $_SESSION[loginid], которое является значением для пользователя, вошедшего в систему. Таким образом, в основном мы используем одну единственную таблицу для размещения всех значений для этих данных для многих - person Jean Paul -JP A.K.A el_vete; 09.06.2012
comment
пользователей, а затем он вернет его.. user_id = jeanpaul & cat = t, а затем на стороне сервера включит функцию для кодирования метки в переменную full_label и вставит ее в БД. Вот почему он появляется в коде сейчас, но на самом деле это будет значение БД, такое же, как «метка», «parent_id», «id» и т. д. некоторые из этих значений будут автоматически увеличиваться, поэтому плагин будет в основном взаимодействовать, чтобы передать эти значения в БД для вставки, манипуляции и извлечения из него. :) - person Jean Paul -JP A.K.A el_vete; 09.06.2012
comment
о подсказке или предупреждении Я думаю, что есть функция на основе jquery, которая позволяет что-то делать до завершения функции AJAX.. так что, вероятно, есть ключ, чтобы остановить ее, а затем разрешить ввод данных пользователем для переименования... ( может твоя идея с формой это не такая уж и плохая идея) а потом возьми из очереди следующую переименуй. Может быть, что-то вроде Facebox, поскольку я уже использую его для некоторых форм с этим проектом, используя собственную функцию AJAX, чтобы запрашивать ввод данных также и в других разделах. Например: «Создать новый контакт».. деревья для меток, поэтому имя var. - person Jean Paul -JP A.K.A el_vete; 09.06.2012
comment
Есть ли шанс, что вы можете вставить это в jsFiddle, чтобы я мог увидеть рабочую копию этого? Я извиняюсь, что не очень помог / ходил туда-сюда вот так. Кроме того, я бы рекомендовал форму для переименования нескольких строк. Вы можете передать все выбранные идентификаторы, выполнить запрос на выборку, чтобы получить данные из базы данных, и просто обновить все сразу. - person Hybride; 09.06.2012
comment
Привет, Гибрид, кстати, на сегодняшней встрече, по-видимому, все немного изменилось. Я не уверен, как jsfiddle поможет, так как это использует БД. Короче говоря, очевидно, что конечный клиент хочет, чтобы только для удаления требовалось много флажков, а остальные в значительной степени были одиночными операциями :) В любом случае, я сделал некоторые обновления для этого, но поскольку это в значительной степени вы и я смотрим только на такого рода вопрос, я был бы честью связаться через чат или что-то еще, просто чтобы обменяться идеями.. хотя не знаю, как это сделать здесь.. в любом случае, спасибо за все.. надеюсь скоро увидеть вас здесь. - person Jean Paul -JP A.K.A el_vete; 13.06.2012
comment
Не стесняйтесь, контакты есть в профиле. Попробуйте это: удалить все узлы или это, напрямую от автора. - person Hybride; 13.06.2012
comment
Спасибо за это, на самом деле проблема больше связана с получением правильных данных из базы данных сейчас ... удаление работает отлично :) - person Jean Paul -JP A.K.A el_vete; 13.06.2012