easyui

来源：互联网发布：js api 编辑：程序博客网时间：2024/05/23 23:05

做个后端总是被前端的东西拖进度,就把几乎通用和常见的一些easyui的东西放一起了图个方便

$('#id').控件("属性/方法",{参数});

1. 布局.

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>easyui通用布局</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
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
});
}
}
</script>
</head>
<body class="easyui-layout">

<div data-options="region:'north',title:'北边 ',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'南边',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'东边',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'西边',split:true" style="width:180px;">

<div class="easyui-accordion" data-options="fit:true,fitColumns:true" >
<div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;"></h3>
<p>快速的创建页面</p>
</div>
<div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
快速的创建页面
</div>
<div title="树结构">
<ul id="tt1" class="easyui-tree">
<li>
<span>一级裁断</span>
<ul>
<li>
<span>二级菜单</span>
<ul>
<li><span><a href="javascript:addTab('数据表格','demo02.jsp')">点我开始打开一个tabs</a></span></li>
<li><span>三级菜单</span></li>
<li><span>三级菜单</span></li>
</ul>
</li>
<li><span>二级菜单</span></li>
<li><span>二级菜单</span></li>
</ul>
</li>
<li><span>二级菜单</span></li>
</ul>
</div>
</div>

</div>

<div data-options="region:'center',title:'中间'" style="padding:5px;background:#eee;">

<div id="tt" class="easyui-tabs" data-options="fit:true,fitColumns:true">
</div>
</div>
</body>
</html>

2.在打开的页面将常用的一些数据表格和窗口放一起了

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>常用的一些面板,数据表格</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
function openWindow(){
$('#win').window('open');
}
function deleteProduct(){
//获取选择的对象返回值是一个数组
var strids=$('#dg').datagrid('getSelections');
if(strids.length==0){
$.messager.alert('系统提示','请选择一条要删除的数据');
return;
}
var ids=[];
for(var i=0;i<strids.length;i++){
ids.push(strids[i].productid);
}
var id=ids.join(',');
$.messager.alert('系统提示','您要删除的产品id是'+id);
}

</script>

</head>
<body>
<table id="dg" class="easyui-datagrid" data-options="fit:true,fitColumns:true"
url="${pageContext.request.contextPath}/easyui-01/data.json"
title="数据表格" iconCls="icon-save"
rownumbers="true" pagination="true" toolbar="#tb">
<thead>
<tr>
<th field="cb" checkbox="true"></th>
<th field="productid" width="80">产品id</th>
<th field="productname" width="80">产品姓名</th>
<th field="status" width="60" align="center">状态</th>
<th field="listprice" width="60" align="center">参考价格</th>
</tr>
</thead>
</table>
<div id="tb">
<a class="easyui-linkbutton" href="javascript:deleteProduct()"data-options="iconCls:'icon-remove',plain:true">删除</a>
<a class="easyui-linkbutton" href="javascript:openWindow()" data-options="iconCls:'icon-add',plain:true">打开一个窗体</a>
<a class="easyui-linkbutton" href="javascript:$('#dd').dialog('open')" data-options="iconCls:'icon-add',plain:true">打开一面板</a>
</div>
<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300px;height:100px;padding:5px;">
Some Content.
</div>

<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" closed="true"
title="My Dialog" iconCls="icon-ok"
toolbar="#dlg-toolbar" buttons="#dlg-buttons">
Dialog Content.
</div>


<div id="dlg-toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
</div>
</body>
</html>

3.最后是一个官方的json需要有total和rows两个属性

{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

扩展右键

// 监听右键事件，创建右键菜单
$('#tabs').tabs({
onContextMenu:function(e, title,index){
e.preventDefault();
if(index>0){
$('#menu').menu('show', {
left: e.pageX,
top: e.pageY
}).data("tabTitle", title);
}
}
});

// 右键菜单click
$("#menu").menu({
onClick : function (item) {
closeTab(this, item.name);
}
});

function closeTab(menu, type) {
var allTabs = $("#tabs").tabs('tabs');
var allTabtitle = [];
$.each(allTabs, function (i, n) {
var opt = $(n).panel('options');
if (opt.closable)
allTabtitle.push(opt.title);
});
var curTabTitle = $(menu).data("tabTitle");
var curTabIndex = $("#tabs").tabs("getTabIndex", $("#tabs").tabs("getTab", curTabTitle));
switch (type) {
case "1": // 刷新当前标签页
var panel = $("#tabs").tabs("getTab", curTabTitle).panel("refresh");
break;
case "2": // 关闭当前标签页
$("#tabs").tabs("close", curTabIndex);
return false;
break;
case "3": // 关闭全部标签页
for (var i = 0; i < allTabtitle.length; i++) {
$('#tabs').tabs('close', allTabtitle[i]);
}
break;
case "4": // 关闭其他标签页
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#tabs').tabs('close', allTabtitle[i]);
}
$('#tabs').tabs('select', curTabTitle);
break;
case "5": // 关闭右侧标签页
for (var i = curTabIndex; i < allTabtitle.length; i++) {
$('#tabs').tabs('close', allTabtitle[i]);
}
$('#tabs').tabs('select', curTabTitle);
break;
case "6": // 关闭左侧标签页
for (var i = 0; i < curTabIndex - 1; i++) {
$('#tabs').tabs('close', allTabtitle[i]);
}
$('#tabs').tabs('select', curTabTitle);
break;
}
}
<div id="menu" class="easyui-menu" >
<div id="mm-tabrefresh" data-options="name:1,iconCls:'icon-refresh'"> 刷新当前标签页</div>
<div class="menu-sep"></div>
<div id="mm-tabclose" data-options="name:2,iconCls:'icon-closetab'">关闭当前标签页</div>
<div id="mm-tabcloseall" data-options="name:3,iconCls:'icon-closealltab'">关闭全部标签页</div>
<div id="mm-tabcloseother" data-options="name:4,iconCls:'icon-closeothertab'">关闭其他标签页</div>
<div id="mm-tabcloseright" data-options="name:5,iconCls:'icon-closerighttab'">关闭右侧标签页</div>
<div id="mm-tabcloseleft" data-options="name:6,iconCls:'icon-closelefttab'">关闭左侧标签页</div>
</div>

阅读全文

0 0