如何正確整合jQuery表與金字塔模板？

我有一個我想添加到我的金字塔模板的jQuery表插件（這是從python腳本中提供的數據），但是當我運行我的實例並從模板查看呈現的網頁時，我的小部件不顯示出來。我唯一能想象的就是使用變形來確保jQuery能夠獲得模板頭部鏈接的正確資源。除了我不確定如何整合變形來解決我的問題。如何正確整合jQuery表與金字塔模板？

這裏是我的初始化的.py：

from pyramid.config import Configurator 
from sqlalchemy import engine_from_config 

from .globals import Session, Base 

def main(global_config, **settings): 
    """ This function returns a Pyramid WSGI application. 
    """ 
    engine = engine_from_config(settings, 'sqlalchemy.') 
    Session.configure(bind=engine) 
    Base.metadata.bind = engine 
    Base.metadata.reflect() 

    config = Configurator(settings=settings) 
    config.add_static_view('static', 'static/', cache_max_age=3600) 
    #config.add_static_view('static', 'deform:static') 
    config.add_route('Building', '/Building') 
    config.add_route('home', '/') 
    config.scan() 
    return config.make_wsgi_app()

這裏是我的模板文件 'mytemplate.pt'：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
    <link rel="stylesheet" href="../static/pylons.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="../static/JQueryPlugins/Flexigrid/css/flexigrid.pack.css" type="text/css" media="screen" charset="utf-8" /> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="../static/JQueryPlugins/Flexigrid/js/flexigrid.pack.js"></script> 

</head> 
<body> 

<div id="container"> 
<div id="logo"><img src="../static/banner.png" alt="Logo" height="117" width="619" /> </div> 
<div id="leftcolumn"> 
    <ul class="navBar"> 
    </ul> 
</div> 
<div id="rightcolumn"> 
<h1>Physical Plant</h1> 
<br /> 
<script type="text/javascript"> 
$(".table_id").flexigrid({ 
    url: '', 
    dataType: '', 
    colModel : [ 
     {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'}, 
     {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, 
     ], 
    searchitems : [ 
     {display: 'ID', name : 'id'}, 
     {display: 'Name', name : 'name', isdefault: true} 
     ], 
    sortname: "id", 
    sortorder: "asc", 
    usepager: true, 
    title: 'Buildings', 
    useRp: true, 
    rp: 15, 
    showTableToggleBtn: true, 
    width: 700, 
    height: 200 
}); 
</script> 
<table class="table_id"> 
<div id="datacolumn" tal:replace="structure data" /> 

</table> 



<script type="text/javascript"> 
    deform.load() 
</script> 
</div> 
</body> 
</html>

這裏是我的view.py：

import csv 
import deform 
from pyramid.config import Configurator 
from pyramid.response import Response 
from pyramid.view import view_config 
from .globals import Session, Base 
from sqlalchemy.exc import DBAPIError 

from .KeyDatabase import Building 
session = Session() 
config = Configurator() 
""" 
form = deform.Form(someschema) 
resources = form.get_widget_resources() 
js_resources = resources['js'] 
css_resources = resources['css'] 
js_links = [ '%s' % r for r in js_resources ] 
css_links = [ 'http://my.static.place/%s' % r for r in css_resources ] 
js_tags = ['<script type="text/javascript" src="%s"></script>' % link 
      for link in js_links] 
css_tags = ['<link rel="stylesheet" href="%s"/>' % link 
      for link in css_links] 
tags = js_tags + css_tags 
return {'form':form.render(), 'tags':tags} 
""" 
def list_entity(entity_class): 
    table = "" 
    header = False 

    for entity in session.query(entity_class): 
     if not header: 
      table += entity.table_header() + " \n " 
      header = True 
     table += entity.table_row() + " \n " 

    table += "" 
    return table 

#@view_config(route_name='home', renderer="templates/mytemplate.pt") 
#def my_view(request): 
#return {'project':'MyProject'} 

@view_config(route_name='home', renderer="templates/mytemplate.pt") 
def list_Building(request): 
    try: 
     return{'data':list_entity(Building)} 
    except DBAPIError: 
     return Response(conn_err_msg, content_type='text/plain', status_int=500)

來源

2012-04-27 Sublimix

我看不出Deform如何與您的問題相關 - 看起來您只需修復y的路徑我們的JS文件在模板中。

<head> 
    <link rel="stylesheet" href="/static/pylons.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="/static/JQueryPlugins/Flexigrid/css/flexigrid.pack.css" type="text/css" media="screen" charset="utf-8" /> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="/static/JQueryPlugins/Flexigrid/js/flexigrid.pack.js"></script> 

</head>

使用Firebug或其他工具來檢查所有的資源都正確

來源

2012-04-27 07:02:54 Sergey

加載從我所看到的，當我使用Firebug的文件顯示他們有聯繫，但沒有工作，沒有錯誤使用JavaScript或任何東西 – Sublimix 2012-04-27 13:55:47

@user這是一個jQuery的東西。可能的問題是，代碼運行時dom還沒有準備好。你可能想把你的代碼封裝在$（document）.ready（function（）{/ *你的代碼在這裏* /}）; – 2012-04-27 15:19:07

user1360175：但你確實在jquery url中有一個錯字，不是嗎？ @TomWillis：很好！ – Sergey 2012-04-27 22:18:40

如何正確整合jQuery表與金字塔模板？

回答

相關問題