jQuery组件easyui基本布局实现代码

前端技术 2023/09/09 JavaScript

本文实例为大家分享了

<!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 style=\"margin:20px 0;\"></div>
 <div class=\"easyui-layout\" style=\"width:700px;height:350px;\">
 <div data-options=\"region:\'north\'\" style=\"height:50px\"></div>
 <div data-options=\"region:\'south\',split:true\" style=\"height:50px;\"></div>
 <div data-options=\"region:\'east\',split:true\" title=\"东\" style=\"width:100px;\"></div>
 <div data-options=\"region:\'west\',split:true\" title=\"西\" style=\"width:100px;\"></div>
 <div data-options=\"region:\'center\',title:\'Main Title\',iconCls:\'icon-ok\'\">
  <table class=\"easyui-datagrid\"
   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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/24475

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案