javascript - 如何通过拖放创建 JavaScript UI 以创建“嵌套集模式”？

Question

模拟 Mike Hillyer 关于在 MySQL中管理分层数据的博客文章中的图形，我想在 JavaScript 中创建一个用户界面，允许用户将分层数据拖放到嵌套集模型中。

是否有任何 JavaScript 和/或 jQuery 应用程序的示例或演示可以做到这一点？

Answer 1

尝试使用文件树，

我自己做了一个，简单而强大，检查这个拖放演示

我还需要更新 github repo，但是您可以将这个小功能添加到插件中以允许 json 导出（这里假设值没有得到任何报价）

    $.fn.jtreeGetJson = function()
    {   var t = $(this).children('li');
        var json = '[';
        t.each(function(n,e)
        {   if(n>0) json += ',';
            json += '{';
                var span = $(e).children('span');
                json += '"label":"'+span.html()+'"';
                var ref = span.data('ref');
                if(ref !== undefined) json += ',"ref":"'+ref+'"';
                /*var d = span.data('info'); if(d === undefined) d = {};
                if(!$.isEmptyObject(d))
                {   json += ',"data":{';
                    var nb=0;
                    $.each(d, function(n,v){ if(nb++) json += ','; json += '"'+n+'":'+'"'+v+'"'; });
                    json += '}';
                }*/
                var u = span.next('ul');
                if(u.length)
                {   json += ', "subs":';
                    json += $.fn.jtreeGetJson.call(u);
                }
            json += '}';
        });
        json += ']';
        return json;
    }