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


Posted in Javascript onAugust 25, 2016

本文实例为大家分享了

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

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 #Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 #Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 #Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 #Javascript
You might like
mysql中存储过程、函数的一些问题
2007/02/14 PHP
How do I change MySQL timezone?
2008/03/26 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php动态变量定义及使用
2015/06/10 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
使用SAE部署Python运行环境的教程
2015/05/05 Python
python求解水仙花数的方法
2015/05/11 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
外包公司软件测试工程师
2014/11/01 面试题
电脑教师的自我评价
2013/12/18 职场文书
初中女生自我鉴定
2013/12/19 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
毕业生自荐书
2014/02/03 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL