1

ファイルの閲覧など、ページを作成したい。今、私はこの質問があります：私はこのページにフォルダとファイルであるいくつかのリンクと「開く」ボタンを持っています。ユーザーがキーを押すと、この文字で始まる最初のリンク（ファイル/フォルダー）が選択されます。また、ユーザーが各リンクをダブルクリックした場合、または各リンクをクリックして[開く]ボタンを押した場合、選択したフォルダーのコンテンツを表示するか、ファイルの場合はウィンドウを閉じます。「開く」ボタンがクリックされたとき、どの項目が選択されているかをどのように理解できるか知りたいのですが。

<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をビューに送信しますか？

編集：
私のviews.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})

初めて、ラベルのdivと「開く」ボタンを含む「learning.html」ページに移動します。それ以外の場合は、ラベルと「開く」ボタンの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 %}
4

1 に答える 1

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 %}
于 2012-12-31T07:28:38.133 に答える