panel和datagrid的结合和分离

在工作中我们经常会遇到，一个页面号多功能，这样我们把前端页面分开写可能会显得更加的清楚明了。下面是我写的一个页面因为在页面中要显示sidemenu的不同树下的每一个datagrid页面给，为了看起来比较方便直接：我才用了一下的方法：

(1).这是html的代码
    <div class="easyui-layout" data-options="fit:true">
    　　<div data-options="region:'west',split:true"  style="200px;">
            <div id="side_menu">
            </div>
    　　</div>
    　　<div data-options="region:'center',iconCls:'icon-ok'">
        　　<div id="system_url" class="easyui-panel" style="height:100%;">
        　　</div>
    　　</div>
　　 </div> 

(2).这是js的代码，当sidemenu中onSelect触发的时候通过panel的href去访问后端的view写好的路由，进一步相当于插入在<div id="system_url" class="easyui-panel" style="height:100%;"></div>
中插入一个写有datagrid的，相当与把每一个sidemenu的跟目录分了模块

　　$("#side_menu").sidemenu({
    　　data: side_data,
    　　onSelect: function(item){
        　　$('#system_url').panel({
            　　fit: true,
            　　border: false,
            　　href: '/system/' + model_name+ '/' + dlg_add + '/' + dlg_edit + '/' + datagrid_name + '/' + code_class
        　　})
    　　 }
　　 });

(3).这是后端python的view视图代码：这里我只写了一个if，还要判断其他的sidemenu下跟目录的，我是一个根目录写了一个html

　　@app.route('/system/<model_name>/<dlg_add>/<dlg_edit>/<datagrid_name>/<code_class>', methods=['GET', 'POST'])
　　def system_url(model_name, dlg_add, dlg_edit, datagrid_name, code_class):
    　　code_node = ['category_code', 'name_code', 'status_code', 'variety_code', 'norm_code', 'standard_code', 'manufacturer_code' ]
    　　if (model_name in code_node):
       　　 return render_template('./pages/sysmgr/code_html.html',
                               model_name = model_name,
                               dlg_add = dlg_add,
                               dlg_edit = dlg_edit,
                               datagrid_name = datagrid_name,
                               code_class = code_class,)           
(4).在code_html.html中的格式：相当于把<div id="code_detail"></div> 插入到了<div id="system_url" class="easyui-panel" style="height:100%;"></div>中

　　<div id="code_detail"></div>
　　<script type="text/javascript">
　　</script>