easyUI学习

例子都是官网的,挑一些自己觉得目前开发中经常用到的,在这里收集,也方便以后查找


1.最简单的CRUD操作

关闭窗口

οnclick="javascript:$('#dlg').dialog('close')"
打开窗口

$('#dlg').dialog('open').dialog('setTitle','New User');

清空表单数据

$('#fm').form('clear');

获取选中行并在编辑的时候把数据填充到表单中

(数据网格(datagrid)组件包含两种方法来检索选中行数据:
getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。
getSelections:取得所有选中行数据,返回元素记录的数组数据。)

var row = $('#dg').datagrid('getSelected');
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
重新加载数据,类似于界面刷新
$('#dg').datagrid('reload');


2.按钮
<a href="#" id="print" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
只有一个,按钮的禁用

$("#print").linkbutton('disable');


3.动态添加Tab页,这个可以说非常常用了,一定要掌握

<a href="#" class="easyui-linkbutton" οnclick="addTab('easyui','http://jeasyui.com/')">easyui</a>

function addTab(title, url){
			if ($('#tt').tabs('exists', title)){
				$('#tt').tabs('select', title);
			} else {
				var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
				$('#tt').tabs('add',{
					title:title,
					content:content,
					closable:true
				});
			}
		}
很简单,一看就懂

还有一个动态的Tab页,类似于跑马灯,不常用,就是个定时事件,不过一些属性也是可以学习一下的

$(function(){
			var index = 0;
			var t = $('#tt');
			var tabs = t.tabs('tabs');
			setInterval(function(){
				t.tabs('select', tabs[index].panel('options').title);
				index++;
				if (index >= tabs.length){
					index = 0;
				}
			}, 3000);
		});

4.easyui的查询加载

itemid和productid是查询的条件,查询对于执行的后台方法是表单标签的url属性

function doSearch(){
	$('#tt').datagrid('load',{
		itemid: $('#itemid').val(),
		productid: $('#productid').val()
	});
}

5.EasyUI 格式化列(最近有一个需求就是这个)
为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。这个格式化函数包含三个参数:
value:当前列对应字段值。
row:当前的行记录数据。
index:当前的行下标。

function formatPrice(val,row){
	if (val < 20){
		return '<span style="color:red;">('+val+')</span>';
	} else {
		return val;
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值