Question

我正在尝试创建一个可以动态调整大小的表。我找到了ColResizable插件。由于某种原因，当我从我的python应用程序调用它时，它无法正常工作。 html页面。似乎javascript忽略了$（Document）.ready，我甚至无法获得警报。调用它的python部分

@app.route('/')

def index():
    return render_template('demo.html')


 <!DOCTYPE html>
<head>
  <title>colResizable demo</title>  

  <link rel="stylesheet" type="text/css" href="/static/main.css">  
  <style>
      .scroll{
          overflow:scroll;
          max-width:100%;
          position:relative;
      }


  </style>



</head>

{% block body %}

<script> 
type="text/javascript" 
src="/static/jquery.js"
src="/static/colResizable-1.6.js"


$(Document).ready (function(){
      alert("its done.")

      $("#overflow").colResizable({
          liveDrag:true, 
          gripInnerHtml:"<div class='grip'></div>", 
          draggingClass:"dragging", 
          resizeMode:'overflow'
      });


    }); 
  </script>
    <div class="center" >

        <h3>Try to resize your browser to understand what is going on in this sample</h3>
        <br/>


        <p><strong>resizeMode: 'overflow'</strong> columns are sized independently. Table width can exceed its container </p>
        <div class="scroll">
            <table id="overflow" >
                <tr>
                    <th>header</th><th>header</th><th>header</th>
                </tr>
                <tr>
                    <td class="left">cell</td><td>cell</td><td class="right">cell</td>
                </tr>
                <tr>
                    <td class="left">cell</td><td>cell</td><td class="right">cell</td>
                </tr>
                <tr>
                    <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
                </tr>                                                                   
            </table>
        </div>
    </div> `enter code here`




{% endblock %}

在Python中使用ColResizable

0 个答案: