EasyUI框架
使用EasyUI框架时,需要导入3个包在项目js文件夹之中。
在项目之中,每次需先引入相关文件:
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>
将这些文件导入项目之中后,即可使用EasyUI框架。
EasyUI中jar包文件目录
plugins:插件包,若只想使用其中的某个功能,可单独导入某一个包。
locale:语言架包 语言版本控制。
themes:样式。
Panel练习实践
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<title>layout</title>
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
$(function(){
$("#t").datagrid({
columns:[[
{
title:'编号',
field:'id',
width:100,
},{
title:'学生姓名',
field:'name',
width:200,
},{
title:'成绩',
field:'score',
width:100,
}
]],
width:400,
url:'data.json',
method:'get',
pagination:true
})
})
</script>
</html>
datagrid练习实践
<head>
<meta charset="UTF-8">
<title></title>
<title>layout</title>
<!--引入jquery-->
<script src="../js/jquery.min.js" charset="utf-8"></script>
<!--引入easyui-->
<script src="../js/jquery.easyui.min.js" charset="utf-8"></script>
<!--引入样式-->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
<!--导入语言包-->
<script src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<table id="t">
</table>
</body>
<script type="text/javascript">
$(function(){
$("#t").datagrid({
columns:[[
{
title:'编号',
field:'id',
width:100,
},{
title:'学生姓名',
field:'name',
width:200,
},{
title:'成绩',
field:'score',
width:100,
}
]],
width:400,
url:'data.json',
method:'get',
pagination:true
})
})
</script>
</html>
progressbar进度条
<body>
<div id="pro">
</div>
<p id="p">
</p>
</body>
<script type="text/javascript">
$("#pro").progressbar({
width:400,
height:60,
value:0,
text:'{value}%',
onChange:function(n,o) {
$("#p").html('新值是:'+n+',旧值是'+o)
}
});
/*方法设置时需要单独设置*/
setInterval(function(){
$("#pro").progressbar('setValue',$("#pro").progressbar('getValue')+1);
},50);
</script>
pagination分页控件
<body>
<!--使用html实现-->
<!--data-options:用于设置属性-->
<!--<div class="easyui-pagination" data-options="total:200,pageSize:10" style="background-color: grey">-->
<!---->
<div id="page">
</div>
</div>
</body>
<script type="text/javascript">
$("#page").pagination()({
total:100,
pageSize:5,
pageList:[5,10,15,20,25]
});
</script>
layout
<body class="easyui-layout">
<div style="background-image: url(../img1/timg.jpg); height: 200px; width: 1620px; background-size: 200 1620;">
</div>
<div data-options="region:'north',title:'North Title',split:true" style="height:200px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
<script type="text/javascript">
$(function(){
var west=$("body").layout('panel','west');
var content=$('<div id="lanmn"></div>');
content.tree({
url:'../tree/tree.json',
method:'get'
})
west.panel({
content:content
})
var north=$("body").layout('panel','north');
north.panel({
content:'<div style="background-image: url(../img1/timg.jpg); background-size: 200 1620;height: 140px; width: 1260px;"></div>'
})
})
</script>
tree
<body>
<ul id="tree">
<li>
<span>目录1</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script type="text/javascript">
$("#tree").tree()
</script>
动态tree
<body>
<ul id="tree">
</ul>
<input type="button" id="b" value="刷新"/>
</body>
<script>
$("#tree").tree({
url:'tree.json',
lines:true,
dnd:true
});
$("#b").click(function(){
$("#tree").tree('loadData',[{
"id": 2,
"text": "Node 2",
"state": "closed"}]
);
})
</script>
EasyUI框架的更多相关文章
- easyui框架对tab的限制提示
使用easyui框架如果页面打开太多可能导致页面加载缓慢的问题,下面我们看看代码怎么写: var $tab = $('#tabs'); var tabCount = $tab.tabs('tabs') ...
- 【JavaScript】EasyUI框架的Dialog控件根据浏览器分辨率自动调节宽高
序: 如果单独一个或几个Dialog控件修改成根据浏览器可视界面自动调整高.宽很容易仅仅是一个量变的过程,但如果大量页面都引入了Dialog控件,修改起来是一个很消耗体力的工作.所以接到任务后第一想法 ...
- 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识
对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识 初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...
- hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结
最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...
- JQuery EasyUI框架学习
前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...
- Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架
Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架 初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相关资料,了解了框 ...
- easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)
前 言 php easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
- 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目
项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...
- 快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。
快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)
http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...
随机推荐
- Hi,这里是我的2020年,请查收!
Part 1. 回顾 还记得新年第一天,我在刚租的房子给自己做了一顿咖喱饭 (不好意思放照片...),然后回顾并展望了一下自己的 2020. 转眼间,2020 就过去了. 总的来说,今年小目标 (比如 ...
- 动态REM
什么是rem? rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 ) rem和em区别? rem:(root em,根em)根元素的fort-size的大小计算em: ...
- Queue的使用说明
普通的Queue.Queue是单个进程间的队列,不同进程不能共享:multiprocessing.Queue()是不同进程间使用的,可以共享:如果是进程池的话需要使用multiprocessing.M ...
- ASP.Net中的TreeView控件中对节点的上移和下移操作
Web中的TreeView中的没有PreNode和NextNode属性. 但它的集合属性中有一个IndexOf属性,从而能够找到它的前一个节点知后一个节点. TreeView中要么只有一个根节点:要么 ...
- mysql 双主复制 centos7
mysql 安装请看:http://www.cnblogs.com/leohe/p/6839705.html 双主复制设置 1. 两台虚拟机,都是 centos7 主: 10.1.1.115 从: 1 ...
- Android——spinner控件实现读取xml资源,省、市两级互动
(1)首先在res文件夹下面的values中创建一个省市arrays.xml文件夹,如下 <?xml version="1.0" encoding="utf-8&q ...
- 1. 内存分区模型以及new、delete操作
C++程序在执行时,将内存大方向分为 4 个区域,不同区域存放的数据,赋予不同的生命周期,给我们更大的灵活编程 代码区:存放函数二进制代码,由操作系统进行管理 全局区:存放全局变量和静态数据以及常量, ...
- Phoneix(二)HBase集成Phoenix安装
一.软件下载 1.访问:http://phoenix.apache.org/ 2.点击: 3.进入以下内容:点击 4.跳转到 5.跳转到 6.点击安装包,进入 点击进行下载: 二.安装 phoneni ...
- 4.5万字手把手教你实现MySQL TB级数据存储!!
写在前面 业界对系统的高可用有着基本的要求,简单的说,这些要求可以总结为如下所示. 系统架构中不存在单点问题. 可以最大限度的保障服务的可用性. 一般情况下系统的高可用可以用几个9来评估.所谓的几个9 ...
- instanceof和isInstance的区别
instanceof 是一个操作符(类似new, ==等) ( Object reference variable ) instanceof (class/interface type) if(a i ...