如何正确地将jQuery表与金字塔模板集成?

时间:2012-04-27 05:42:14

标签: javascript jquery python pyramid deform

我有一个jQuery表插件(由python脚本提供数据),我想添加到我的金字塔模板,但是当我运行我的实例并从模板中查看渲染的网页时,我的小部件不显示。我唯一可以想象的是使用deform来确保jQuery可以获得在模板标题中链接的正确资源。除了我不确定如何整合变形以解决我的问题。

这是我的 init .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)

1 个答案:

答案 0 :(得分:2)

我没有看到Deform如何与您的问题相关 - 看起来您只需要修复模板中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或其他工具检查所有资源是否已正确加载