w2ui layout加载自定义html
1.views.py
# Init script view
@app.route('/_init_scriptviews')
def init_scriptviews():
sqlscript = """select script_conf->>'script_name' script_name
from script_obj
where script_conf->>'script_type' = 'unix'"""
rows = g.db.query(sqlscript).dictresult()
srows = [dict(caption=unicode(row['script_name'],"UTF8")) for row in rows]
return jsonify(sview = srows)
@app.route('/_scriptviews')
def scriptview():
return render_template('scriptViewData.html')
# Init list view
2.scriptViewData.html（访问数据库数据）
<!-- JQUERY -->
<script src="{{url_for('static',filename='js/jquery-2.02.min.js')}}"></script>
<!-- Flask AJAX -->
<script type=text/javascript>
$SCRIPT_ROOT={{request.script_root|tojson|safe}};
</script>
<ul id='scriptlist' class="inline">
</ul>
<script type="text/javascript">
var list = document.getElementById("scriptlist");
$.getJSON($SCRIPT_ROOT+'/_init_scriptviews',function(data){
$.each(data.sview, function (key, val) {
list.innerHTML += "<li>" + val.caption + "</li>";
});
});
</script>
3.layout.html（manager.html扩展模板）
<!doctype html>
<html>
<head>
<title>W2ui layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<!-- JQUERY -->
<script src="{{url_for('static',filename='js/jquery-2.02.min.js')}}"></script>
<!-- Bootstrap -->
<link rel=stylesheet type=text/css href="{{url_for('static',filename='css/bootstrap.min.css')}}" media="screen">
<link rel=stylesheet type=text/css href="{{url_for('static',filename='css/bootstrap-responsive.min.css')}}">
<script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
<!-- w2ui -->
<link rel=stylesheet type=text/css href="{{url_for('static',filename='css/w2ui-1.3.min.css')}}">
<script src="{{url_for('static',filename='js/w2ui-1.3.min.js')}}"></script>
<!-- sidebarcustom -->
<link rel=stylesheet type=text/css href="{{url_for('static',filename='css/sidebar-custom-img.css')}}">
<!-- Flask AJAX -->
<script type=text/javascript>
$SCRIPT_ROOT={{request.script_root|tojson|safe}};
</script>
</head>
<body>
<div class="container" style="margin-top:1px;">
<div class="navbar" style="margin-bottom:1px">
<div class="navbar-inner">
<ul class="nav">
<li ><a href="{{url_for('manager')}}">管理控制台</a></li>
<li ><a href="#">服务视图</a></li>
<li ><a href="#">报表服务</a></li>
<li ><a href="#">自动化任务</a></li>
</ul>
<ul class="nav pull-right">
<li>
{% if not session.logged_in %}
<a href="{{url_for('login')}}">登录</a>
{%else%}
<a href="{{url_for('logout')}}">注销</a>
{%endif%}
</ul>
</div>
</div>
{%block body%}{%endblock%}
</div>
</body>
</html>
4.manager.html 扩展layout.html加载scriptViewData.html
{%extends "layout.html"%}
{%block body%}
{%if session.logged_in%}
<div id="toolbar" class="btn-group">
</div>
<div id="layout" style="height:560px"></div>
<script type="text/javascript">
$(function () {
// Toolbar Button define: treeview, scriptsview, listview
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type:'button', id:'left', caption:'树形视图', hint:'显示/隐藏树形视图'},
{ type:'button', id:'preview',caption:'脚本视图', hint:'显示/隐藏脚本视图'},
{ type:'button', id:'bottom',caption:'列表视图', hint:'显示/隐藏列表视图'}
],
// Click Event define:
onClick: function (event) {
w2ui['layout'].toggle(event.target, window.instant);
}
});
// Layout define: left, main, preview, bottom
var pstyle = 'border: 1px solid #dfdfdf;padding:1px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'left', size: 200, resizable: true, style: pstyle},
{ type: 'main', style: pstyle},
{ type: 'preview', size: '60%', resizable: true, hidden: true, style: pstyle,content: '图形视图'},
{ type: 'bottom', size: 180, resizable: true, hidden: true, style: pstyle, content: '列表视图'}
]
});
});
// Function define: init layout left with sidebar
function initTreeView(){
// init tree view sidebar,draw data from db
$.getJSON($SCRIPT_ROOT+'/_init_treeviews',function(data){
// debug return data
// alert(data.mview)
// define sidebar tree view
$().w2sidebar({
name: 'treeview',
// init master node
nodes: [
{ id: 'master', text: 'Master', img: 'icon-master', expanded: false, group: false,
// insert node into node 'master'
nodes: data.mview
}
]
});
// Insert sidebar tree view into the left layout
w2ui['layout'].content('left', w2ui['treeview'])
});
}
// Call function initTreeView
initTreeView()
// Fill scriptview content with /templates/scriptdata.html()
$.ajax({
url: $SCRIPT_ROOT + '/_scriptviews',
success: function(data) {
w2ui['layout'].content('main',data);
}
});
</script>
{%endif%}
{%endblock%}
本文转自 pgmia 51CTO博客，原文链接:http://blog.51cto.com/heyiyi/1349644