天天看點

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>";

       });

   });

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%}

               </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>

   $(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);

     }

   });        

{%endif%}

{%endblock%}

本文轉自 pgmia 51CTO部落格,原文連結:http://blog.51cto.com/heyiyi/1349644