jQuery組件easyui基本布局實現(xiàn)代碼

字號:


    這篇文章主要為大家詳細介紹了jQuery easyui基本布局實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>Basic Layout - jQuery EasyUI Demo</title>
     <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="../themes/icon.css">
     <link rel="stylesheet" type="text/css" href="demo.css">
     <script type="text/javascript" src="../jquery.min.js"></script>
     <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    </head>
    <body>
     <h2>基本布局</h2>
     <p>布局包括北,南,東,西,中間,部分</p>
     <div></div>
     <div>
     <div data-options="region:'north'"></div>
     <div data-options="region:'south',split:true"></div>
     <div data-options="region:'east',split:true"></div>
     <div data-options="region:'west',split:true"></div>
     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
      <table
       data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
      <thead>
       <tr>
       <th data-options="field:'itemid'" width="80">Item ID</th>
       <th data-options="field:'productid'" width="100">Product ID</th>
       <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
       <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
       <th data-options="field:'attr1'" width="150">Attribute</th>
       <th data-options="field:'status',align:'center'" width="60">Status</th>
       </tr>
      </thead>
      </table>
     </div>
     </div>
    </body>
    </html>
    以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助