类似于在 jQuery 中浏览文件的东西

Posted 2023-05-09

【中文标题】类似于在 jQuery 中浏览文件的东西

【英文标题】：Some thing like browsing file in jQuery

【发布时间】：2012-12-15 10:29:40

【问题描述】：

我想创建一个页面，比如浏览一个文件。现在我有这个问题： 我在此页面中有一些链接，它们是文件夹和文件，以及一个“打开”按钮。我希望当用户按下一个键时，选择以该字符开头的第一个链接（文件/文件夹）。我还希望当用户双击每个链接或单击每个链接并按“打开”按钮时，我会显示所选文件夹的内容，或者如果这是文件，我希望关闭窗口。现在我想知道如何理解单击“打开”按钮时，选择了哪个项目？

<script type="text/javascript">
        function func(id)
            var label = $('<label/>').text(id).appendTo($('#div_for_labels'));
            $('#div_show').html('waiting...').load('learning/?ajax=true&path='+id);
        

        $('openButton').click(function(e)
            e.preventDefault();
            ???
        )
    </script>


            <div id="div_for_labels"></div>
            <div id="div_show">
            % for f_name, f_type in list %
                    % if f_type == 'folder' %
                        <p><a ondblclick="func(this.id)" id=" f_name " class="res"><img src="/media/img/folder.jpeg"> f_name </a></p>
                    % else %
                        <p><a ondblclick="func(this.id)" id=" f_name " class="res"><img src="/media/img/file.jpeg"> f_name </a></p>
                    % endif %
            % endfor %
            </div>
            <div>
                <input type="submit" id="openButton" value="Open">
            </div>

我不知道我应该在“打开”按钮上写什么脚本来了解选择了哪个项目并将其 id 发送到我的视图？

编辑： 我的意见.py：

def learning(request):
    if request.is_ajax():
            if 'path' in request.GET:
                # receives list
                return render_to_response("path.html",'list': list)
            else:
                # receives list
                return render_to_response("learningPath.html",'list': list)

第一次进入“learning.html”页面，其中包含标签的 div 和“打开”按钮。其他时候，由于防止标签和“打开”按钮重复 div，它转到“path.html”，其中仅包含：

% for f_name, f_type in list %
                        % if f_type == 'folder' %
                            <p><a ondblclick="func(this.id)" id=" f_name " class="res"><img src="/media/img/folder.jpeg"> f_name </a></p>
                        % else %
                            <p><a ondblclick="func(this.id)" id=" f_name " class="res"><img src="/media/img/file.jpeg"> f_name </a></p>
                        % endif %
                % endfor %

【参考方案1】：

不要混合使用 HTML 和 JavaScript，只要用 jQuery 做所有事情。

<script type="text/javascript">
$(function() 
   var _loadFile = function(file) 
     if (file.type == 'folder') 
       var label = $('<label/>').text(file.name).appendTo($('#div_for_labels'));
       $('#div_show').html('waiting...').load('learning/?ajax=true&path='+file.name);
      else 
        // load file here
     
   ;

   var _selectedFile = null;  // nothing selected;

   // using '#div_show' as relative parent, fetch all 'a.res' elements...
   $('a.res', $('#div_show')).live(  // bind now and any future elements
       dblclick: function() 
           var $this = $(this);
           _loadFile($this.data('file'));
       ,
       click: function() 
           var $this = $(this);
           $('#div_show a.res.file-selected').removeClass('file-selected'); // remove old selection (if any)
           $this.addClass('file-selected');

           _selectedFile = $this.data('file');
       
   );

   $('openButton').click(function(e)
      e.preventDefault();

      if (_selectedFile) 
         _loadFile(_selectedFile);
       else 
         alert("No file selected");
      
   )
);
</script>

<div id="div_for_labels"></div>
<div id="div_show">
   % for f_name, f_type in list %
       <p><a data-file="'name':' f_name ', 'type':' f_type '" class="res"><img src="/media/img/ f_type .jpeg"> f_name </a></p>
   % endfor %
</div>
<div>
   <input type="submit" id="openButton" value="Open">
</div>

注意：我假设f_type 是folder 或file。

** 编辑 **

你的 path.html 文件应该只包含上面提到的 HTML 块：

% for f_name, f_type in list %
   <p><a data-file="'name':' f_name ', 'type':' f_type '" class="res"><img src="/media/img/ f_type .jpeg"> f_name </a></p>
% endfor %

【讨论】：

非常感谢。有用。我编辑了我的问题。你能帮我让它在这种情况下也能工作吗？ :">

啊哈，非常感谢。我已经得到了问题第二部分的答案。现在我想知道当用户按下一个键时有没有办法。它显示了以该字符开头的第一个文件/文件夹？

这不是您的问题的一部分。然而，一个简单的谷歌搜索结果是this。试试看吧！这就是我们学习的方式:)