jQuery---EasyUI小案列
分页[pagination]
实例：
<html>
<head>
<meta charset="GBK">
<title>客户端分页demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>客户端分页dem</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div></div>
</div>
<div style="margin:10px 0;"></div> <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
<script> function getData(){//模拟数据
var rows = [];
for(var i=1; i<=80000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
//console.log(JSON.stringify(rows));
return rows; } function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
} $(function(){//加载数据
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</script>
</body>
</html>
效果图：
进度条[progressbar]
<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script>
function test(){
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
}
}
</script>
</head>
<body>
进度条
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click below button to show progress information.</div>
</div> <div style="margin: 10px 0">
<a href="#" class="easyui-linkbutton" onclick="test()">Test</a>
</div> <div id="p" class="easyui-progressbar" style="width:400px;"></div>
</body>
</html>
树形菜单[tree]
<html>
<head>
<meta charset="GBK">
<title>客户端分页demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.menuLink {
cursor: pointer;
}
</style>
<script type="text/javascript"> $(function () {
//动态菜单数据
var treeData = [{
text : "菜单",
children : [{
text : "一级菜单1",
attributes : {
url : ""
}
}, {
text : "一级菜单2",
attributes : {
url : ""
}
}, {
text : "一级菜单3",
state : "closed",
children : [{
text : "二级菜单1",
attributes : {
url : ""
}
}, {
text : "二级菜单2",
attributes : {
url : ""
}
}, {
text : "二级菜单3",
attributes : {
url : ""
}
}
]
}
]
}
]; //实例化树形菜单
$("#tree").tree({
data : treeData,
lines : true,
onClick : function (node) {
if (node.attributes) {
Open(node.text, node.attributes.url);
}
}
});
//在右边center区域打开菜单，新增tab
function Open(text, url) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
$('#tabs').tabs('add', {
title : text,
closable : true,
content : text
});
}
} //绑定tabs的右键菜单
$("#tabs").tabs({
onContextMenu : function (e, title) {
e.preventDefault();
$('#tabsMenu').menu('show', {
left : e.pageX,
top : e.pageY
}).data("tabTitle", title);
}
}); //实例化menu的onClick事件
$("#tabsMenu").menu({
onClick : function (item) {
CloseTab(this, item.name);
}
}); //几个关闭事件的实现
function CloseTab(menu, type) {
var curTabTitle = $(menu).data("tabTitle");
var tabs = $("#tabs"); if (type === "close") {
tabs.tabs("close", curTabTitle);
return;
} var allTabs = tabs.tabs("tabs");
var closeTabsTitle = []; $.each(allTabs, function () {
var opt = $(this).panel("options");
if (opt.closable && opt.title != curTabTitle && type === "Other") {
closeTabsTitle.push(opt.title);
} else if (opt.closable && type === "All") {
closeTabsTitle.push(opt.title);
}
}); for (var i = 0; i < closeTabsTitle.length; i++) {
tabs.tabs("close", closeTabsTitle[i]);
}
}
});
</script>
</head>
<body class="easyui-layout">
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.west{
width:200px;
padding:10px;
}
.north{
height:100px;
}
</style>
</head>
<body class="easyui-layout">
<div region="north" class="north" title="">
<h1>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</h1>
</div>
<div region="center" title="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页"></div>
</div>
</div>
<div region="west" class="west" title="menu">
<ul id="tree"></ul>
</div> <div id="tabsMenu" class="easyui-menu" style="width:120px;">
<div name="close">关闭</div>
<div name="Other">关闭其他</div>
<div name="All">关闭所有</div>
</div>
</body>
</html>
效果图
jQuery---EasyUI小案列的更多相关文章
- 雷林鹏分享：jQuery EasyUI 数据网格 - 列运算
jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...
- jquery easyui 动态绑定数据列
function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...
- Jquery局部刷新小案列
/* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...
- 使用nosql实现页面静态化的一个小案列
页面静态化,其实就是将动态生成的php页面,变成静态的HTML页面,让用户直接访问.有一下几方面好处: 1,首先就是访问速度,不需要去访问数据库,或者缓存来获取哪些数据,浏览器直接加载渲染html页即 ...
- canvas小案列-绚丽多彩的倒计时
本次随笔中,我将实现一个绚丽的倒计时效果,这个效果主要是结合canvas和js实现的,具体代码如下 index.html文件 <!DOCTYPE html> <html> &l ...
- 表格排序tablesort小案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- 让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
随机推荐
- 【Android 】Service 全面总结
1.Service的种类 按运行地点分类: 类别 区别 优点 缺点 应用 本地服务(Local) 该服务依附在主进程上, 服务依附在主进程上而不是独立的进程,这样在一定程度上节约了资源,另外L ...
- Javascript中String对象的的简单学习
第十一课String对象介绍1:属性 在javascript中可以用单引号,或者双引号括起来的一个字符当作 一个字符对象的实例,所以可以在某个字符串后再加上.去调用String 对象 ...
- 测量行业（RTK）相关的小知识总结
RTK测量系统,一般需要先架设基准站(参考站),数据链模式外挂大电台(有天线大功率模式,理想范围方圆18公里以内).基准站通过收到卫星(多星)进行计算出当前的位置. 其中涉及到频率的设置,波特率,以及 ...
- ESXi5 中克隆Linux虚拟主机的网络配置
虚拟化技术果然非常方便,尤其是windows主机,克隆后在网络管理中改一下IP即可. 但对于Linux来说就有点麻烦,只修改IP还不行,还有MAC地址,网卡指定等,这个规程对应新手来说没有大半天搞不定 ...
- 关于多线程与CRITICAL_SECTION的使用
CRITICAL_SECTION 只能针对多线程进行锁定,在同一个线程中,是可以进入很多次的. 同一线程可以多次进入临界区. 在测试程序(多线程同时访问CADOAccess类的对象)中,辅助线程不论是 ...
- 虚拟机评估——如何确定一个CPU核上部署的虚拟机数量？
最近研究虚拟化技术,不可避免遇到一个问题:如何评估物理主机上虚拟主机的容量?下面这篇文章的思路有一定的启发性,转发一下. 如何确定一个CPU核上部署的虚拟机数量? 摘要:本文说明一个CPU核上部署虚拟 ...
- SIFT 特征提取算法总结
原文链接:http://www.cnblogs.com/cfantaisie/archive/2011/06/14/2080917.html 主要步骤 1).尺度空间的生成: 2).检测尺度空间极 ...
- #入魔这些年#零度智控&模型控社区大型征文活动,万元大奖等你拿
玩航模是个好爱好,它能培养严谨的科学态度.超强的DIY动手能力.规范的项目管理习惯.良好的沟通合作技巧.过人的三维空间思维和感知: 你需要的知识储备有力学.空气动力学.电子学.通讯工程.材料学 ...
- Eclipse Maven to create Struts2 Project
Follow the guide in this page: http://blog.csdn.net/topwqp/article/details/8882965 problem met : Des ...
- 如何制作CSR文件?
如何制作CSR文件? 在申请数字证书之前,您必须先生成证书私钥和证书请求文件(CSR,Cerificate Signing Request),CSR是您的公钥证书原始文件,包含了您的服务器信息和您的单 ...