easyui 使用笔记
http://www.easyui.info/archives/1435.html
datagrid
服务端分页
服务端分页，高效，快捷！强力推荐！
easyui的datagrid服务端分页，通过设置url的方式会自动请求数据。默认会传递两个参数{page:1,rows:10},自定义参数，如果是固定不变的就可以通过queryParam配置，也可通过事件onBeforeLoad事件来拦截。只要返回{total:20,rows:[]}类型的数据就可以了。
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'MyJsp.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/json.js"></script></head> <body>
<input type="text" id="t" value="123" />
<table id="tt"> </table>
<script type="text/javascript">
$('#tt').datagrid({
rownumbers:true,
pagination:true,
url:'getData.jsp',
queryParams:{
name:'wch',
id:$('#t').val()
},
onBeforeLoad:function(param){
alert(JSON.encode(param));
param.id = $('#t').val();
return true;
},
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
</script>
</body>
</html>
网络请求拦截到的图片：
自适应宽度
如果列想自适应宽度，填满整个表格，但是想使用百分比的形式设置，width可以设置为方法的形式，自己计算宽度之后设置
比如{field:'id',title:'查询到的用户',width:$('#dg').width()-10,align:'center',resizable:true,sortable:true},
如果想设置为100%，那就随便设置比实际宽度宽的数字，然后fitColumns设置为true就可以了。
fitColumns:true,
columns:[[{field:'id',title:'查询到的用户',width:500,align:'center',resizable:true,sortable:true}]]
比如{field:'id',title:'查询到的用户',width:$('#dg').width()-10,align:'center',resizable:true,sortable:true},
如果想设置为100%，那就随便设置比实际宽度宽的数字，然后fitColumns设置为true就可以了。
fitColumns:true,
columns:[[{field:'id',title:'查询到的用户',width:500,align:'center',resizable:true,sortable:true}]]
重置，刷新到第一页
$('#dg').datagrid('getPager').pagination('select',1);
单元格鼠标悬停显示内容
通过给单元格设置title显示里面的内容 ,当单元格内容比较多的时候，就非常有用了
在1.3.3版本中的8674行修改成在renderRow方法中拦截，添加title
cc.push("<td field=\""+_643+"\" title=\""+(col.checkbox?"":_644)+"\" "+_646+">");
combotree 取消选中
combotree其实也是tree，但是今天碰到了一个问题，竟然api中没有提到，本来认为肯定会有的东西-----树节点的取消选中,我认为这是一个肯定会提供api的操作，竟然api中寻她千百度，依然不见踪影，但是内心有股默认的力量支撑着我，忽然灵光一闪，原来，使用select空就可以实现了。$('#ttt').combotree('tree').tree('select','');
如果想实现再次点击已选择的取消选中，那就监听onclick事件。
弹出框(dialog)底部多余空白
如果在dialog里面创建table，初始化的时候如果是先创建dialog，然后创建table，等显示出来的时候，dialog的底部就会有多余的空白，如果你还没遇到说明你很幸运，因为在你无意间避免了，你初始化的时候是先创建的table然后创建的dialog。
accordion 默认选中
defSelected 属性，默认 undefined, 可以使accordion 的index或者是title。
在取消选中后500ms后判断如果没有选中的就默认选中defSelected;
修改源文件：jquery.accordion.js 第185行
t.bind('click', function(e){
var animate = $.data(container, 'accordion').options.animate;
var defSel = $.data(container, 'accordion').options.defSelected;
stopAnimate(container);
if (pp.panel('options').collapsed){
pp.panel('expand', animate);
} else {
pp.panel('collapse', animate);
setTimeout(function(){
var cur11 = getCurrent(container);
if(cur11 == null){
select(container,defSel);
}},500);
}
return false;
});
也可直接修改压缩后的文件：jquery.easyui.min.js-1.3.3 ------3585行
else{
pp.panel("collapse",_292);
setTimeout(function(){
var defSel = $.data(_28d, 'accordion').options.defSelected;
if( defSel && _278(_28d) ==null){
_293(_28d,defSel);
}
},500);
}
combobox 和combotree双击可清除
//双击清除combo
$('.combo').each(function(i){
var is_box = true; // 是combobox还是combotree
var combo = $(this).prev()[0];
var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false);
if(opts.dblToClear != false){
this.title = '双击可清除!';
$(this).bind('dblclick',function(){
if(is_box){
$(this).prev().combobox('clear');
}else{
$(this).prev().combotree('clear');
}
});
}
});
linkbutton bug修复
linkbutton 如果在禁用期间去掉了绑定的click事件，再次启用，事件依然有效。linkbutton对于jQuery绑定的click方法禁用启用无效，即禁用时事件依然会触发。
/**
* 1、修复jquery绑定的方法在按钮disable之后仍然有效
* 2、修复按钮disable之后，取消事件，再次enable之后，事件继续有效
*/
(function($){ function setDisabled(target, disabled){
var state = $.data(target, 'linkbutton');
var opts = state.options;
$(target).removeClass('l-btn-disabled l-btn-plain-disabled');
if (disabled){
opts.disabled = true;
var href = $(target).attr('href');
if (href){
state.href = href;
$(target).attr('href', 'javascript:void(0)');
}
if (target.onclick){
state.onclick = target.onclick;
target.onclick = null;
}
//---------------------------
var data = $(target).data('events');
if(data && data.click){
state.click= data.click[0].handler ;
$(target).unbind('click');
}
//--------------------------------------------
opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled');
} else {
opts.disabled = false;
//---------------------
if (state.href) {
$(target).attr('href', state.href);
state.href = 'javascript:void(0)';
}
if (state.onclick) {
target.onclick = state.onclick;
state.onclick = null;
}
if (state.click){
$(target).bind('click',state.click);
state.click = null;
}
}
}
$.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, {
enable: function(jq){
return jq.each(function(){
setDisabled(this, false);
});
},
disable: function(jq){
return jq.each(function(){
setDisabled(this, true);
});
}
});
$(function(){
$('.l-btn-disabled').each(function(i){
setDisabled(this, true);
})
}); })(jQuery);
easyui在IE中样式不正确
//IE反应比较慢，有时候样式会变，可以通过setTimeout的方式修复bug；
$(function(){
setTimeout(function(){
$('#tg').treegrid({
title:"配置菜单",
width:ViewWidth,
height:ViewHeight-30,
iconCls: 'icon-ok',
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
url: 'frame/menu_config.json?p='+new Date().getTime(),
method: 'get',
idField: 'id',
treeField:'text',
cache:false,
columns:[[
{title:'菜单名称',field:'text',width:100,editor:'text'},
{title:'菜单路径',field:'path',width:100,editor:'text'},
{title:'展开状态',field:'state',width:30,editor:'text'}
]]
});
},30); });
窗口动态关闭
/*
*窗口打开和关闭的动画效果
*@param options
{
【必须】id:dom元素id，
【可选,默认500】speed:动画速度 'fast'、'normal'、'slow'、具体的毫秒数
【可选】close_to_id：关闭时动画指向的元素id，如果不指定，就向左上角关闭
}
*/
function windowAnimate(options){
//如果没有id属性，就返回
if(!options.id){
return;
}
//默认参数
var opt = {speed:500,easing:'swing',close_state:{left:0,top:0,width:0,height:0}};
//读取参数
$.extend(opt,options); //窗口实际的dom元素
var $w = $('#'+opt.id).parent('.window');
//保存参数信息
$w.data('opt',opt);
//保存关闭时的状态
function saveCloseState(){
//指定了关闭时，动画指向的元素
if(opt.close_to_id){
var $c = $("#"+opt.close_to_id);
//获取指向元素的中心点位置
opt.close_state.left = $c.offset().left + $c.width()/2;
opt.close_state.top = $c.offset().top + $c.height()/2;
}
} //保存打开时的状态
function saveOpenState(){
opt.open_state = {width:$w.width(),height:$w.height(),top:$w.offset().top,left:$w.offset().left};
} //设置动画方法
setTimeout(function(){
$('#'+opt.id).window({
shadow:false,
onBeforeClose:animateClose,
onBeforeOpen:animateOpen,
onMinimize:minimizeWindow,
onOpen:openWindow
});
},300); //打开窗口
function openWindow(){
saveOpenState();
saveCloseState();
$w.css(opt.close_state);
$('#'+opt.id).window('open');
} //最小化窗口
function minimizeWindow(){
$w.show();
$('#'+opt.id).window('close');
} //动态关闭
function animateClose(){
//保存关闭时的状态
saveCloseState();
//保存打开时的状态
saveOpenState();
//动画关闭
$w.animate(opt.close_state,opt.speed,'swing',function(){
$w.hide();
});
return false;
}
//动态打开
function animateOpen(){
//如果不存在之前的状态，说明是第一次打开，就调用打开方法
if(!opt.open_state){
return true;
}
$w.show();
$w.animate(opt.open_state,opt.speed,'swing');
return false;
}
}
附录：easyui扩展和bug修复源代码
/**
* 1、修复jquery绑定的方法在按钮disable之后仍然有效
* 2、修复按钮disable之后，取消事件，再次enable之后，事件继续有效
* 3、扩展了combobox和combotree双击可清除事件，通过设置属性dblToClear=false可以屏蔽此扩展
*/
(function($){ function setDisabled(target, disabled){
var state = $.data(target, 'linkbutton');
var opts = state.options;
$(target).removeClass('l-btn-disabled l-btn-plain-disabled');
if (disabled){
opts.disabled = true;
var href = $(target).attr('href');
if (href){
state.href = href;
$(target).attr('href', 'javascript:void(0)');
}
if (target.onclick){
state.onclick = target.onclick;
target.onclick = null;
}
//---------------------------
var data = $(target).data('events');
if(data && data.click){
state.click= data.click[0].handler ;
$(target).unbind('click');
}
//--------------------------------------------
opts.plain ? $(target).addClass('l-btn-disabled l-btn-plain-disabled') : $(target).addClass('l-btn-disabled');
} else {
opts.disabled = false;
//---------------------
if (state.href) {
$(target).attr('href', state.href);
state.href = 'javascript:void(0)';
}
if (state.onclick) {
target.onclick = state.onclick;
state.onclick = null;
}
if (state.click){
$(target).bind('click',state.click);
state.click = null;
}
}
}
$.fn.linkbutton.methods =$.extend($.fn.linkbutton.methods, {
enable: function(jq){
return jq.each(function(){
setDisabled(this, false);
});
},
disable: function(jq){
return jq.each(function(){
setDisabled(this, true);
});
}
});
$(function(){
$('.l-btn-disabled').each(function(i){
setDisabled(this, true);
})
//双击清除combo
$('.combo').each(function(i){
var is_box = true; // 是combobox还是combotree
var combo = $(this).prev()[0];
var opts = $.data(combo,'combobox') ? $.data(combo,'combobox').options:($.data(combo,'combotree').options,is_box = false);
if(opts.dblToClear != false){
this.title = '双击可清除!';
$(this).bind('dblclick',function(){
if(is_box){
$(this).prev().combobox('clear');
}else{
$(this).prev().combotree('clear');
}
});
}
});
}); })(jQuery);
easyui 使用笔记的更多相关文章
- EasyUI 开发笔记(二)
接上篇 :EasyUI 开发笔记(一) (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...
- EasyUI 开发笔记(一)
由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...
- easyui学习笔记8—在手风琴中加载其他的页面
在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href=& ...
- easyui学习笔记2—在行内进行表格的增删改操作
第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和c ...
- easyui学习笔记1—增删改操作
最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现 ...
- jQuery EasyUI 使用笔记
大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...
- EasyUI学习笔记之panel
<easyUI panel 属性:> <!--引入easyUI panel 组件 设置宽,高,定义标题(默认在左上角),设置图标iconCls:'icon-ok',引入工具tools ...
- easyUI datagrid笔记
easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <lin ...
- EasyUI学习笔记---Datagrid真分页
EasyUI Datagrid组件在我看来功能还是很强大的,在我使用过程中遇到分页请求的问题困扰了一天才解决,下面我就把我遇到的问题分享一下 //datagrid数据表格渲染 $("#dg& ...
- EasyUI ComboGrid 笔记(支持分页)
业务要求: 下拉框做选择时需要展现多个字段供用户参考,由于内容可能会很多,故还需要考虑分页. 解决方案: 由于项目整体已经采用了EasyUI,在浏览了demo以后,初步考虑使用EasyUI的combo ...
随机推荐
- 洛谷——P1082 同余方程
P1082 同余方程 题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输 ...
- @Autowired中无法注入RestTemplate的问题
1.在启动类中添加 @Beanpublic RestTemplate restTemplate(){ return new RestTemplate();} 即可解决无法注入RestTemplate的 ...
- 解DBA之惑：数据库承载能力评估及优化手段
原创 2016-08-29 韩锋 DBAplus社群 作者介绍 韩锋,宜信技术研发中心数据库架构师.精通多种关系型数据库,曾任职于当当网.TOM在线等公司,曾任多家公司首席DBA.数据库架构师等职 ...
- 转：SQL 索引最左前缀原理
表结构和索引列 假设数据库中表是这样的: 我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...
- 1. 找出数组中的单身狗OddOccurrencesInArray Find value that occurs in odd number of elements.
找出数组中的单身狗: 1. OddOccurrencesInArray Find value that occurs in odd number of elements. A non-empty ze ...
- 【翻译自mos文章】将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边
将expdp的dmp文件从asm磁盘组里边放到本地文件系统里边 參考原文: How To Extract Datapump File From ASM Diskgroup To Local Files ...
- 跨平台C、C++代码注意的事项
在我们的开发中,跨平台的需求越来越强烈,怎样保持C/C++代码能在多个平台上编译,是一个比較值得研究的问题.关于跨平台的文章网上非常多,跨平台的库网上也非常多.那么我从自己的跨平台开发经验谈一谈自己的 ...
- kentico11 教程，
create master page with css list menu Add the navigation menu Add a dynamic web part that will repre ...
- Scala 返回多个值
class A{ var c var d def return={ (c,d,"soyo") //以元组形式返回 }}调用: val s=new A var(a1,a2,a3)=s ...
- SpringBoot集成Redis来实现缓存技术方案
概述 在我们的日常项目开发过程中缓存是无处不在的,因为它可以极大的提高系统的访问速度,关于缓存的框架也种类繁多,今天主要介绍的是使用现在非常流行的NoSQL数据库(Redis)来实现我们的缓存需求. ...