部分的に動的にロードされる page_html/css_WEB-ITnose

フロントエンド ページを作成するときに、あなたの友人が私と同じ経験をするかどうかはわかりませんが、通常、システム全体には全体的なフレームワークが必要で、時々更新する必要があるのはその一部だけです。さっそく、私が達成したいことのレンダリングを次に示します。

明らかに、赤い枠で囲った場所はプロジェクト ページ全体に必要で、2 つの黄色の枠については、同じスタイルを使用するページもあれば、上部の黄色の枠を変更するページもあれば、下部の黄色の境界線。

そこで、Ajax を使用して他のページからコンテンツを動的にリクエストすることを考えました。こうすることで、インデックス ページのコード内容が多くなりすぎず、同じスタイルの複数のセクションを統合して同じページをリクエストできるため、手間が省けます。

まず、メインページに 2 つの空白の div を残しました。そこが 2 つの黄色の枠線です。

<div id="navBoxContent">    <div id="boxButton">        </div>    <div id="mainContent">    </div></div>

上の黄色の枠内のコンテンツは、別の right1.html ファイルに配置されます。以下はright1.htmlの内容です。

<ul style="margin-left: 30px">   <li><div class="but" id="add"><img src="/static/imghwm/default1.png"  data-src="images/index/add.png"  class="lazy"   alt="添加"/></div></li>   <li><div class="but" id="edit"><img src="/static/imghwm/default1.png"  data-src="images/index/edit.png"  class="lazy"   alt="修改"/></div></li>   <li><div class="but" id="del" onclick="del()"><img src="/static/imghwm/default1.png"  data-src="images/index/del.png"  class="lazy"   alt="删除"/></div></li></ul><div id="search"><input type="text" placeholder="请输入关键字"><img src="/static/imghwm/default1.png"  data-src="images/index/search.png"  class="lazy"   alt="搜索"/></div>

以下の黄色の枠内のコンテンツは、table.html に配置されます。テーブルのスタイルはeasyuiのdatagridを採用しています。

<table id="dg"    style="max-width:90%" data-options="                                    rownumbers:false,                                    singleSelect:true,                                    autoRowHeight:false,                                    pagination:true,                                    resizeHandle:'right'">    <thead>    <tr>    </tr>    </thead></table>

上記の right1.html と table.html の CSS スタイル コントロールは、インデックス内の統合 CSS スタイル ファイルに直接配置できます。

次のステップは、js の動的リクエストです。

$(function(){    //企业信息 用户管理   $("#companyInformation").click(function(){        $.ajax({//按钮栏显示            url:"right1.html",            dataType:"html",            type:"get",            success:function(data){                $("#boxButton").html(data);                $("#boxButton").css({"height":"50px","background":"url('images/index/search_bg.png')"})            }        });       $.ajax({//表格显示           url:"table.html",           dataType:"html",           type:"get",           success:function(data){               $("#mainContent").html(data);               $("#mainContent").css({"height":"509px"});               $.ajax({                   url:"datagrid_data.json",                   type:"post",                   dataType:"json",                   success:function(data){                       $("#dg").datagrid({                           columns:[data.title]    //动态取标题                       });                       $("#dg").datagrid("loadData",data.rows);  //动态取数据                       $("#dg").datagrid('getPager').pagination({//分页栏下方文字显示                           pageSize: 15,//每页显示的记录条数，默认为10                           pageList:[15,30,45,60],//每页显示几条记录                           beforePageText: '第',//页数文本框前显示的汉字                           afterPageText: '页    共 {pages} 页',                           displayMsg: '当前显示 {from} - {to} 条记录    共 {total} 条记录',                           onBeforeRefresh:function(){                               $(this).pagination('loading');//正在加载数据中...                               $(this).pagination('loaded'); //数据加载完毕                           }                       })                   }               });           }       });    });});

もちろん、前に述べたように、私のコラムの多くのページは同じページをリクエストする可能性があります。では、同じイベントを 2 つのボタンに追加する方法を説明します。ここでは、js の add メソッドである

$("#companyInformation").add($("#userManage")).click(function(){.....});

を使用して、ID 名 companyInformation と userManage のメニューをクリックすると、このテーブル ページが読み込まれるようにしました。