前端开发之easyUI（下）[通俗易懂]

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说前端开发之easyUI（下）[通俗易懂],希望您对编程的造诣更进一步.

EasyLoader 组件

一，基本EasyLoader 组件

要引入<script type=”text/javascript” src=”../jquery-easyui-1.3.3/easyloader.js”></script>

<h2>基本EasyLoader组件</h2>

点击下面按钮动态加载组件.<br/>

<a href=”javascript:void(0)” class=”easyui-linkbutton” onclick=”load2()” >加载对话框</a>

<a href=”javascript:void(0)” class=”easyui-linkbutton” onclick=”load3()” >加载数据表格</a>

</div>

function load1(){

using(‘calendar’, function(){

$(‘#cc’).calendar({

width:180,

height:180

});

}

function load2(){

using([‘dialog’,’messager’], function(){

$(‘#dd’).dialog({

title:’对话框’,

width:300,

height:200

});

$.messager.show({

title:’系统提示’,

msg:’对话框被创建’

});

}

function load3(){

using(‘datagrid’, function(){

$(‘#tt’).datagrid({

title:’数据表格’,

width:300,

height:200,

fitColumns:true,

columns:[[

{field:’productid’,title:’产品编号’,width:100},

{field:’productname’,title:’产品名称’,width:200}

]],

data: [

{“productid”:”FI-SW-01″,”productname”:”Koi”},

{“productid”:”K9-DL-01″,”productname”:”Dalmation”},

{“productid”:”RP-SN-01″,”productname”:”Rattlesnake”},

{“productid”:”RP-LI-02″,”productname”:”Iguana”},

{“productid”:”FL-DSH-01″,”productname”:”Manx”},

{“productid”:”FL-DLH-02″,”productname”:”Persian”},

{“productid”:”AV-CB-01″,”productname”:”Amazon Parrot”}

]

});

}

</script>

Draggable 组件

一，基本拖拽组件

</div>

<!— 只能托转标题 –>

</div>

二，拖拽限制

</div>

function onDrag(e){

var d = e.data;

if (d.left < 0){d.left = 0}

if (d.top < 0){d.top = 0}

if (d.left + $(d.target).outerWidth() > $(d.parent).width()){

d.left = $(d.parent).width() – $(d.target).outerWidth();

}

if (d.top + $(d.target).outerHeight() > $(d.parent).height()){

d.top = $(d.parent).height() – $(d.target).outerHeight();

}

</script>

</div>

三，对齐拖拽

</div>

function onDrag(e){

var d = e.data;

d.left = repair(d.left);

d.top = repair(d.top);

//对齐调整

function repair(v){

var r = parseInt(v/20) * 20;//计算成20的整数倍

if(Math.abs(v % 20) > 10){ //计算是更接近左边还是右面

r += v > 0 ? 20 : -20;

}

return r;

}

</script>

</div>

四，购物车

.products {

overflow: auto;

height: 100%;

background: #fafafa;

}

.products ul {

list-style: none;

margin: 0;

padding: 0px;

}

.products li {

display: inline;

float: left;

margin: 10px;

}

.item {

display: block;

text-decoration: none;

}

.item img {

border: 1px solid #333;

}

.item p {

margin: 0;

font-weight: bold;

text-align: center;

color: #c3c3c3;

}

.cart {

float: right;

position: relative;

width: 260px;

height: 100%;

background: #ccc;

padding: 0px 10px;

}

.ctitle {

text-align: center;

color: #555;

font-size: 18px;

padding: 10px;

}

</style>

</head>

<body>

<h2>基本Easydraggable组件-购物车</h2>

<div class=”easyui-panel” fit=”true” border=”false”

style=”height: 100%; overflow: hidden”>

<table id=”cartcontent” fitColumns=”true”

style=”width1: 300px; height: auto;”>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<div class=”ctitle” style=”position: absolute; bottom: 80px”>把商品拖到这里添加到购物车</div>

</div>

<ul>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

<div>

</div>

</a></li>

</ul>

</div>

$(function(){

$(‘#cartcontent’).datagrid({

singleSelect:true,

showFooter:true

});

$(‘.item’).draggable({

revert:true,

proxy:’clone’,

onStartDrag:function(){

$(this).draggable(‘options’).cursor = ‘not-allowed’;

$(this).draggable(‘proxy’).css(‘z-index’,10);

onStopDrag:function(){

$(this).draggable(‘options’).cursor=’move’;

}

});

$(‘.cart’).droppable({

onDragEnter:function(e,source){

$(source).draggable(‘options’).cursor=’auto’;

onDragLeave:function(e,source){

$(source).draggable(‘options’).cursor=’not-allowed’;

onDrop:function(e,source){

var name = $(source).find(‘p:eq(0)’).html();

var price = $(source).find(‘p:eq(1)’).html();

addProduct(name, parseFloat(price.split(‘RMB’)[1]));

}

});

function addProduct(name,price){

var dg = $(‘#cartcontent’);

var data = dg.datagrid(‘getData’);

function add(){

for(var i=0; i<data.total; i++){

var row = data.rows[i];

if (row.name == name){

row.quantity += 1;

return;

}

data.total += 1;

data.rows.push({

name:name,

quantity:1,

price:price

});

}

add();

dg.datagrid(‘loadData’, data);

var cost = 0;

var rows = dg.datagrid(‘getRows’);

for(var i=0; i<rows.length; i++){

cost += rows[i].price*rows[i].quantity;

}

dg.datagrid(‘reloadFooter’, [{name:’总计’,price:cost}]);

}

</script>

</body>

五，学校课程表

.left {

width: 120px;

float: left;

}

.left table {

background: #E0ECFF;

}

.left td {

background: #eee;

}

.right {

float: right;

width: 570px;

}

.right table {

background: #E0ECFF;

width: 100%;

}

.right td {

background: #fafafa;

color: #444;

text-align: center;

padding: 2px;

}

.right td {

background: #E0ECFF;

}

.right td.drop {

background: #fafafa;

width: 100px;

}

.right td.over {

background: #FBEC88;

}

.item {

text-align: center;

border: 1px solid #499B33;

background: #fafafa;

color: #444;

width: 100px;

}

.assigned {

border: 1px solid #BC2A4D;

}

</style>

</head>

<body>

<h2>创建一个学校课程表</h2>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

$(function(){

$(“.left .item”).draggable({

revert:true,

proxy: ‘clone’

});

$(‘.right td.drop’).droppable({

onDragEnter:function(){

$(this).addClass(‘over’);

onDragLeave:function(){

$(this).removeClass(‘over’);

onDrop:function(e,source){

$(this).removeClass(‘over’);

if ($(source).hasClass(‘assigned’)){

$(this).append(source);

} else {

var c = $(source).clone().addClass(‘assigned’);

$(this).empty().append(c);

c.draggable({

revert:true

});

}

});

</script>

</body>

Droppable 组件

一，基本可拽入容器

<body>

<h2>基本Easydroppable组件</h2>

<div>把左边项拖拽到右边目标区域.</div>

</div>

<div>

</div>

<div class=”easyui-droppable targetarea”

data-options=”

accept: ‘.dragitem’,

onDragEnter:function(e,source){

$(this).html(‘进入’);

onDragLeave: function(e,source){

$(this).html(‘离开’);

onDrop: function(e,source){

$(this).html($(source).html() + ‘ 拽入’);

}

“>

</div>

<styletype=”text/css”>

.title{

margin-bottom:10px;

}

.dragitem{

border:1px solid #ccc;

width:50px;

height:50px;

margin-bottom:10px;

}

.targetarea{

border:1px solid red;

height:150px;

}

.proxy{

border:1px solid #ccc;

width:80px;

background:#fafafa;

}

</style>

$(function(){

$(‘.dragitem’).draggable({

revert:true,

deltaX:10,

deltaY:10,

proxy:function(source){

var n = $(‘<div></div>’);

n.html($(source).html()).appendTo(‘body’);

return n;

}

});

</script>

</body>

二，改变拖放物顺序

<h2>改变托动物顺序</h2>

<div>拖动托动物改变顺序.</div>

</div>

</ul>

<styletype=”text/css”>

.drag-item {

list-style-type: none;

display: block;

padding: 5px;

border: 1px solid #ccc;

margin: 2px;

width: 300px;

background: #fafafa;

color: #444;

}

.indicator {

position: absolute;

font-size: 9px;

width: 10px;

height: 10px;

display: none;

color: red;

}

</style>

$(function() {

var indicator = $(‘<div>>></div>’).appendTo(

‘body’);

$(‘.drag-item’).draggable({

revert : true,

deltaX : 0,

deltaY : 0

}).droppable({

onDragOver : function(e, source) {

indicator.css({

display : ‘block’,

left : $(this).offset().left – 10,

top : $(this).offset().top + $(this).outerHeight() – 5

});

onDragLeave : function(e, source) {

indicator.hide();

onDrop : function(e, source) {

$(source).insertAfter(this);

indicator.hide();

}

});

</script>

三，接受一个拖拽物

<h2>接受一个拖拽物</h2>

<div>不接受一些拖拽物.</div>

</div>

<div id=”source”

style=”border: 1px solid #ccc; width: 300px; height: 400px; float: left; margin: 5px;”>

来拖我!

</div>

<div id=”target”

style=”border: 1px solid #ccc; width: 300px; height: 400px; float: left; margin: 5px;”>

拖到这里！</div>

<styletype=”text/css”>

.drag {

width: 100px;

height: 50px;

padding: 10px;

margin: 5px;

border: 1px solid #ccc;

background: #AACCFF;

}

.dp {

opacity: 0.5;

filter: alpha(opacity = 50);

}

.over {

background: #FBEC88;

}

</style>

$(function() {

$(‘.drag’).draggable({

proxy : ‘clone’,

revert : true,

cursor : ‘auto’,

onStartDrag : function() {

$(this).draggable(‘options’).cursor = ‘not-allowed’;

$(this).draggable(‘proxy’).addClass(‘dp’);

onStopDrag : function() {

$(this).draggable(‘options’).cursor = ‘auto’;

}

});

$(‘#target’)

.droppable(

{

accept : ‘#d1,#d3’,

onDragEnter : function(e, source) {

$(source).draggable(‘options’).cursor = ‘auto’;

$(source).draggable(‘proxy’).css(‘border’,

‘1px solid red’);

$(this).addClass(‘over’);

onDragLeave : function(e, source) {

$(source).draggable(‘options’).cursor = ‘not-allowed’;

$(source).draggable(‘proxy’).css(‘border’,

‘1px solid #ccc’);

$(this).removeClass(‘over’);

onDrop : function(e, source) {

$(this).append(source)

$(this).removeClass(‘over’);

}

});

</script>

Resizable 组件

一，基本可缩放组件

</div>

<div style=”padding:20px”>拖拽并缩放我</div>

</div>

Pagination 组件

一，基本分页组件

</div>

二，定制分页组件按钮

</div>

var buttons = [{

iconCls:’icon-add’,

handler:function(){

alert(‘添加’);

}

},{

iconCls:’icon-cut’,

handler:function(){

alert(‘剪切’);

}

},{

iconCls:’icon-save’,

handler:function(){

alert(‘保存’);

}

}];

</script>

三，简化分页组件

<div class=”easyui-pagination” data-options=”

total: 114,

showPageList: false,

showRefresh: false,

displayMsg: ”

” style=”border:1px solid #ddd”></div>

</div>

SearchBox 组件

一，基本搜索框组件

</div>

function doSearch(value){

alert(‘您输入的是: ‘ + value);

}

</script>

二，分类搜索

<div data-options=”name:’sports'”>Sports News</div>

</div>

function doSearch(value,name){

alert(‘You input: ‘ + value+'(‘+name+’)’);

}

</script>

Progressbar 组件

一，基本进度条组件

<h2>进度条组件</h2>

</div>

function start(){

var value = $(“#p”).progressbar(‘getValue’);

if(value < 100){

value += Math.floor(Math.random() * 10);

$(“#p”).progressbar(‘setValue’, value);

//setTimeout(arguments.callee, 200);

setTimeout(start, 200);

}

</script>

ToolTip 组件

一，基本提示信息组件

<h2>基本提示信息组件</h2>

<p>

能够用每个元素的标题属性作为提示信息.

显示提示信息.

</p>

</div>

二，提示信息位置

<h2>基本提示信息的位置</h2>

</select>

<br/>

</div>

function changerPosition(pos){

alert(pos);

$(“#pp”).tooltip({

position:pos

});

}

</script>

三，定制提示信息内容(分页提示)

$(function(){

$(‘#pg’).pagination().find(‘a.l-btn’).tooltip({

content : function(){

var cc = $(this).find(‘span.l-btn-empty’).attr(‘class’).split(‘ ‘);

var icon = cc[1].split(‘-‘)[1];

return icon + ‘ 页面’;

}

});

</script>

一，定制提示信息风格

</div>

</div>

$(function(){

$(“#pp1”).tooltip({

position:’right’,

content: ‘<span style=”color:#fff”>这是一种风格的提示信息.</span>’,

onShow : function(){

$(this).tooltip(‘tip’).css({

backgroundColor: ‘#666’,

borderColor: ‘#666’

});

}

});

$(“#pp2”).tooltip({

position: ‘bottom’,

content: ‘<div style=”padding:5px;background:#eee;color:#000″>这又是一种风格的提示信息.</div>’,

onShow: function(){

$(this).tooltip(‘tip’).css({

backgroundColor: ‘#fff000’,

borderColor: ‘#ff0000’,

boxShadow: ‘1px 1px 3px #292929’

});

onPosition: function(){

$(this).tooltip(‘tip’).css(‘left’, $(this).offset().left);

$(this).tooltip(‘arrow’).css(‘left’, 20);

}

});

</script>

二，提示信息组件作为工具条

<h2>提示信息组件作为工具条</h2>

<p>

<a id=”dd” href=”javascript:void(0)” class=”easyui-tooltip”

data-options=”

hideEvent: ‘none’,

content: function(){

return $(‘#toolbar’);

onShow: function(){

var t = $(this);

t.tooltip(‘tip’).focus().unbind().bind(‘blur’,function(){

t.tooltip(‘hide’);

});

}

“>到我这来</a>

搞出一个工具条.

</p>

</div>

<a href=”#” class=”easyui-linkbutton easyui-tooltip” title=”添加”

data-options=”iconCls:’icon-add’,plain:true”></a> <a href=”#”

class=”easyui-linkbutton easyui-tooltip” title=”剪切”

data-options=”iconCls:’icon-cut’,plain:true”></a> <a href=”#”

class=”easyui-linkbutton easyui-tooltip” title=”删除”

data-options=”iconCls:’icon-remove’,plain:true”></a> <a href=”#”

class=”easyui-linkbutton easyui-tooltip” title=”撤销”

data-options=”iconCls:’icon-undo’,plain:true”></a> <a href=”#”

class=”easyui-linkbutton easyui-tooltip” title=”恢复”

data-options=”iconCls:’icon-redo’,plain:true”></a>

</div>

三，Ajax 提示信息

<h2>Ajax提示信息</h2>

<a href=”#” class=”easyui-tooltip” data-options=”

content: $(‘<div></div>’),

onShow: function(){

$(this).tooltip(‘arrow’).css(‘left’, 20);

$(this).tooltip(‘tip’).css(‘left’, $(this).offset().left);

onUpdate: function(cc){

cc.panel({

width: 500,

height: ‘auto’,

border: false,

href: ‘common/_content.html’

});

}

“>到我这来</a> 显示AJAX加载的提示信息.

四，提示信息对话框

<h2>提示信息对话框</h2>

<p><a id=”dd” href=”javascript:void(0)”>点这里</a> 来显示一个提示信息对话框.

</div>

$(function(){

$(‘#dd’).tooltip({

content: $(‘<div></div>’),

showEvent: ‘click’,

onUpdate: function(content){

content.panel({

width: 200,

border: false,

title: ‘登录’,

href: ‘common/_dialog.html’

});

onShow: function(){

var t = $(this);

t.tooltip(‘tip’).unbind().bind(‘mouseenter’, function(){

t.tooltip(‘show’);

}).bind(‘mouseleave’, function(){

t.tooltip(‘hide’);

});

}

});

</script>

Window 组件

一，基本窗体组件

窗体内容。

</div>

二，定制窗体工具

</div>

</body>

窗体

</div>

<a href=”javascript:void(0)” class=”icon-add”

onclick=”javascript:alert(‘add’)”></a> <a href=”javascript:void(0)”

class=”icon-edit” onclick=”javascript:alert(‘edit’)”></a> <a

href=”javascript:void(0)” class=”icon-cut”

onclick=”javascript:alert(‘cut’)”></a> <a href=”javascript:void(0)”

class=”icon-help” onclick=”javascript:alert(‘help’)”></a>

</div>

三，内部窗体

<a href=”javascript:void(0)” class=”easyui-linkbutton”

onclick=”$(‘#w’).window(‘open’)”>打开</a> <a href=”javascript:void(0)”

class=”easyui-linkbutton” onclick=”$(‘#w’).window(‘close’)”>关闭</a>

</div>

<div

style=”position: relative; width: 500px; height: 300px; border: 1px solid #ccc; overflow: auto;”>

<div id=”w” class=”easyui-window”

data-options=”title:’内部窗体’,inline:true”

style=”width: 250px; height: 150px; padding: 10px”>窗体在它的父层里面。</div>

</div>

四，模态窗体

</div>

窗体内容

</div>

一，窗体布局

</div>

jQuery EasyUI框架能够让你轻松构建Web页面.

</div>

</div>

Dialog 组件

一，基本对话窗体组件

</div>

对话窗体内容。

</div>

二，工具栏和按钮

</div>

<div id=”w” class=”easyui-dialog” title=”工具栏和按钮” data-options=”

iconCls:’icon-save’,

toolbar:[{

text:’添加’,

iconCls:’icon-add’,

handler:function(){

alert(‘添加’);

}

},’-‘,{

text:’保存’,

iconCls:’icon-save’,

handler:function(){

alert(‘保存’)

}

}],

buttons: [{

text:’确定’,

iconCls:’icon-ok’,

handler:function(){

alert(‘确定’);

}

},{

text:’关闭’,

handler:function(){

alert(‘关闭’);;

}

}]

” style=”width:400px;height:200px;padding:10px”>

对话窗体内容。

</div>

三，对话窗体上的复杂工具栏

<h2>对话窗体上的复杂工具栏</h2>

</div>

<div id=”dlg” class=”easyui-dialog” title=”对话窗体上的复杂工具栏” style=”width:400px;height:200px;padding:10px”

data-options=”

iconCls: ‘icon-save’,

toolbar: ‘#dlg-toolbar’,

buttons: ‘#dlg-buttons’

“>

对话窗体内容.

</div>

<tr>

</td>

</td>

</tr>

</table>

</div>

</div>

Tabs 组件

一，基本选项卡组件

<p style=”font-size:14px”>jQuery EasyUI框架能够让你轻松构建Web页面.</p>

<ul>

<li>easyui是一套基于JQuery的用户界面插件集合.</li>

<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>

<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能够有效地节省你的开发时间.</li>

<li>easyui很简单但是很强大.</li>

</ul>

</div>

</div>

这是帮助内容.

</div>

二，选项卡自适应高度

三，选项卡自动切换

<h2>选项卡自动切换</h2>

<p style=”font-size:14px”>jQuery EasyUI框架能够让你轻松构建Web页面.</p>

<ul>

<li>easyui是一套基于JQuery的用户界面插件集合.</li>

<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>

<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能够有效地节省你的开发时间.</li>

<li>easyui很简单但是很强大.</li>

</ul>

</div>

</div>

这是帮助内容.

</div>

$(function(){

var tabs = $(‘#tt’).tabs().tabs(‘tabs’);

for(var i=0; i<tabs.length; i++){

tabs[i].panel(‘options’).tab.unbind().bind(‘mouseenter’,{index:i},function(e){

$(‘#tt’).tabs(‘select’, e.data.index);

});

}

});

</script>

四，选项卡嵌套

<h2>选项卡嵌套</h2>

</div>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

五，选项卡片工具

<h2>选项卡片工具</h2>

<p style=”font-size:14px”>jQuery EasyUI框架能够让你轻松构建Web页面.</p>

<ul>

<li>easyui是一套基于JQuery的用户界面插件集合.</li>

<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>

<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能够有效地节省你的开发时间.</li>

<li>easyui很简单但是很强大.</li>

</ul>

</div>

这是帮助内容.

</div>

</div>

二，选项卡工具

<h2>选项卡工具</h2>

</div>

</div>

var index = 0;

function addPanel(){

index++;

$(‘#tt’).tabs(‘add’,{

title: ‘选项卡’+index,

content: ‘<div style=”padding:10px”>内容’+index+'</div>’,

closable: true

});

}

function removePanel(){

var tab = $(‘#tt’).tabs(‘getSelected’);

if (tab){

var index = $(‘#tt’).tabs(‘getTabIndex’, tab);

$(‘#tt’).tabs(‘close’, index);

}

</script>

三，选项卡位置

<h2>选项卡位置</h2>

</select>

</div>

<p style=”font-size:14px”>jQuery EasyUI框架能够让你轻松构建Web页面.</p>

<ul>

<li>easyui是一套基于JQuery的用户界面插件集合.</li>

<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>

<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>

<li>完美支持HTML5.</li>

<li>easyui能够有效地节省你的开发时间.</li>

<li>easyui很简单但是很强大.</li>

</ul>

</div>

</div>

这是帮助内容.

</div>

Accordion 组件

一，基本可折叠面板组件

<h2>基本可折叠面板</h2>

<h3 style=”color:#0099FF;”>可折叠面板</h3>

<p>可折叠面板是jquery easyui框架的一部分. 他可以让你轻松地在Web页面上定义可折叠元素.</p>

</div>

<p>可折叠面板允许你同时显示多个面板，每个面板支持展开和折叠，点击面板头部展开和折叠面板体，面板内容可以通过AJAX加载，用户能够定义某一个面板默认选中，如果没有指定，则第一个面板默认选中。</p>

</div>

<li>

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

二，可折叠面板工具

<h2>可折叠面板工具</h2>

<h3 style=”color:#0099FF;”>可折叠面板</h3>

<p>可折叠面板是jquery easyui框架的一部分. 他可以让你轻松地在Web页面上定义可折叠元素.</p>

</div>

</div>

<div title=”数据表格” style=”padding:10px” data-options=”

selected:true,

tools:[{

iconCls:’icon-reload’,

handler:function(){

$(‘#dg’).datagrid(‘reload’);

}

}]”>

<table id=”dg” class=”easyui-datagrid”

data-options=”url:’common/datagrid_data1.json’,fit:true,fitColumns:true,singleSelect:true”>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

三，通过AJAX 加载内容

<h2>通过AJAX加载内容</h2>

<h3 style=”color:#0099FF;”>可折叠面板</h3>

<p>可折叠面板是jquery easyui框架的一部分. 他可以让你轻松地在Web页面上定义可折叠元素.</p>

</div>

<p>可折叠面板允许你同时显示多个面板，每个面板支持展开和折叠，点击面板头部展开和折叠面板体，面板内容可以通过AJAX加载，用户能够定义某一个面板默认选中，如果没有指定，则第一个面板默认选中.</p>

</div>

</div>

四，可折叠面板相关操作

<h2>可折叠面板相关操作</h2>

</div>

<h3 style=”color:#0099FF;”>可折叠面板</h3>

<p>可折叠面板是jquery easyui框架的一部分. 他可以让你轻松地在Web页面上定义可折叠元素.</p>

</div>

function selectPanel(){

$.messager.prompt(‘系统提示’,’请输入面板标题:’,function(s){

if (s){

$(‘#aa’).accordion(‘select’,s);

}

});

}

var idx = 1;

function addPanel(){

$(‘#aa’).accordion(‘add’,{

title:’标题’+idx,

content:'<div style=”padding:10px”>内容’+idx+'</div>’

});

idx++;

}

function removePanel(){

var pp = $(‘#aa’).accordion(‘getSelected’);

if (pp){

var index = $(‘#aa’).accordion(‘getPanelIndex’,pp);

$(‘#aa’).accordion(‘remove’,index);

}

</script>

Layout 组件

一，基本布局组件

<table class=”easyui-datagrid”

data-options=”url:’common/datagrid_data1.json’,border:false,singleSelect:true,fit:true,fitColumns:true”>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

二，全屏

<div data-options=”region:’west’,split:true,title:’西'” style=”width:150px;padding:10px;”>西部区域内容</div>

</body>

三，嵌套布局

</div>

四，布局中无折叠按钮

<h2>布局中无折叠按钮</h2>

<table id=”tt” class=”easyui-propertygrid”

data-options=”

url: ‘common/propertygrid_data1.json’,

showGroup: true,

fit: true,

border: false

“>

</table>

</div>

</div>

一，添加和删除布局组件

<h2>添加和删除布局组件</h2>

<span>选择一个区域面板:</span>

</select>

</div>

</div>

function addPanel(){

var region = $(‘#region’).val();

var options = {

region: region

};

if (region==’north’ || region==’south’){

options.height = 50;

} else {

options.width = 100;

options.split = true;

options.title = $(‘#region option:selected’).text();

}

$(‘#cc’).layout(‘add’, options);

}

function removePanel(){

$(‘#cc’).layout(‘remove’, $(‘#region’).val());

}

</script>

二，复杂布局

</div>

内容一

</div>

内容二

</div>

内容三

</div>

<table class=”easyui-datagrid”

data-options=”url:’common/datagrid_data1.json’,singleSelect:true,fit:true,fitColumns:true”>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

Menu 组件

一，基本菜单组件

<h2>基本菜单组件</h2>

<div>

<div>Excel</div>

<div>PowerPoint</div>

<div>

<div>

</div>

</div>

<div>

<span>Window Demos</span>

<div data-options=”href:’window.html'”>Window</div>

<div data-options=”href:’dialog.html'”>Dialog</div>

<div><a href=”http://www.jeasyui.com” target=”_blank”>EasyUI</a></div>

</div>

</div>

$(function(){

$(document).bind(‘contextmenu’,function(e){

e.preventDefault();

$(‘#mm’).menu(‘show’, {

left: e.pageX,

top: e.pageY

});

</script>

二，定制菜单组件

<div>

<div style=”font-weight:bold;font-size:16px”>选择一种语言:</div>

<li><a href=”javascript:void(0)”>Basic</a></li>

<li><a href=”javascript:void(0)”>Fortran</a></li>

<li>

<input>

</li>

</ul>

</div>

</div>

$(function(){

$(document).bind(‘contextmenu’,function(e){

e.preventDefault();

$(‘#mm’).menu(‘show’, {

left: e.pageX,

top: e.pageY

});

</script>

三，菜单事件

</div>

function menuHandler(item){

alert(item.name);

}

$(function(){

$(document).bind(‘contextmenu’,function(e){

e.preventDefault();

$(‘#mm’).menu(‘show’, {

left: e.pageX,

top: e.pageY

});

</script>

LinkButton 组件

一，基本链接按钮组件

</div>

二，普通链接按钮

</div>

三，按钮图标对齐方式

</div>

<span>选择图标对齐位置: </span>

</select>

</div>

一，开关按钮

</div>

五，按钮组

</div>

</div>

MenuButton 组件

一，基本菜单按钮

</div>

<div>

<div>导航工具条</div>

<div>书签工具条</div>

<div>新建工具条…</div>

</div>

</div>

</div>

<p style=”font-size:14px;color:#444;”>EasyUI就是好.</p>

</div>

二，菜单按钮相关操作

<h2>菜单按钮相关操作</h2>

</div>

</div>

<div>

<div>导航工具条</div>

<div>书签工具条</div>

<div>新建工具条…</div>

</div>

</div>

</div>

<p style=”font-size:14px;color:#444;”>EasyUI就是好.</p>

</div>

SplitButton 组件

一，基本分隔按钮

<h2>基本分隔按钮</h2>

</div>

<div>

<div>导航工具条</div>

<div>书签工具条</div>

<div>新建工具条…</div>

</div>

</div>

</div>

<div>

<p style=”font-size:14px;color:#444″>EasyUI就是好.</p>

</div>

二，分隔按钮的相关操作

</div>

</div>

<div>

<div>导航工具条</div>

<div>书签工具条</div>

<div>新建工具条…</div>

</div>

</div>

</div>

<div>

<p style=”font-size:14px;color:#444″>EasyUI就是好.</p>

</div>

DataGrid 组件

一，基本数据表格

<table class=”easyui-datagrid” title=”基本数据表格” style=”width:700px;height:250px”

data-options=”singleSelect:true,collapsible:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

二，Table 转换数据表格

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>

</tr>

<tr>

<td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>

</tr>

<tr>

<td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>

</tr>

<tr>

<td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>

</tr>

<tr>

<td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>

</tr>

</tbody>

</table>

三，数据表格行边框

.lines-both .datagrid-body td{

}

.lines-no .datagrid-body td{

border-right:1px dotted transparent;

border-bottom:1px dotted transparent;

}

.lines-right .datagrid-body td{

border-bottom:1px dotted transparent;

}

.lines-bottom .datagrid-body td{

border-right:1px dotted transparent;

}

</style>

<h2>数据表格中的行边框</h2>

</select>

</div>

<table id=”dg” class=”easyui-datagrid” title=”数据表格中的行边框” style=”width:705px;height:250px”

data-options=”singleSelect:true,fitColumns:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

function changeBorder(cls){

$(‘#dg’).datagrid(‘getPanel’).removeClass(‘lines-both lines-no lines-right lines-bottom’).addClass(cls);

}

</script>

四，数据表格选择模型

<h2>数据表格选择模型</h2>

<a href=”#” class=”easyui-linkbutton” onclick=”getSelected()”>获取单选数据</a>

<a href=”#” class=”easyui-linkbutton” onclick=”getSelections()”>获取多选数据</a>

</div>

<table id=”dg” class=”easyui-datagrid” title=”数据表格选择模型” style=”width:705px;height:250px”

data-options=”singleSelect:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

</select>

</div>

function getSelected(){

var row = $(‘#dg’).datagrid(‘getSelected’);

if (row){

$.messager.alert(‘系统提示’, row.itemid+”:”+row.productid+”:”+row.attr1);

}

function getSelections(){

var ss = [];

var rows = $(‘#dg’).datagrid(‘getSelections’);

for(var i=0; i<rows.length; i++){

var row = rows[i];

ss.push(‘<span>’+row.itemid+”:”+row.productid+”:”+row.attr1+'</span>’);

}

$.messager.alert(‘系统提示’, ss.join(‘<br/>’));

}

</script>

二，数据表格工具条

<h2>数据表格工具条</h2>

<table class=”easyui-datagrid” title=”数据表格工具条” style=”width:705px;height:250px”

data-options=”rownumbers:true,singleSelect:true,url:’common/datagrid_data1.json’,toolbar:toolbar”>

<thead>

<tr>

</tr>

</thead>

</table>

var toolbar = [{

text:’添加’,

iconCls:’icon-add’,

handler:function(){alert(‘添加’)}

},{

text:’剪切’,

iconCls:’icon-cut’,

handler:function(){alert(‘剪切’)}

},’-‘,{

text:’保存’,

iconCls:’icon-save’,

handler:function(){alert(‘保存’)}

}];

</script>

六，数据表格复杂工具条

<table class=”easyui-datagrid” title=”数据表格复杂工具条” style=”width:705px;height:250px”

data-options=”rownumbers:true,singleSelect:true,url:’common/datagrid_data1.json’,toolbar:’#tb'”>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

<div>

日期从: <input class=”easyui-datebox” style=”width:80px”>

到: <input class=”easyui-datebox” style=”width:80px”>

语言:

<option value=”basic”>Basic</option>

<option value=”python”>Python</option>

</select>

</div>

七，定制数据表格分页

<table id=”dg” class=”easyui-datagrid” title=”定制数据表格分页” style=”width:705px;height:250px”

data-options=”rownumbers:true,singleSelect:true,pagination:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

$(function(){

var pager = $(‘#dg’).datagrid(‘getPager’); // get the pager of datagrid

pager.pagination({

buttons:[{

iconCls:’icon-search’,

handler:function(){

alert(‘搜索’);

}

},{

iconCls:’icon-add’,

handler:function(){

alert(‘添加’);

}

},{

iconCls:’icon-edit’,

handler:function(){

alert(‘编辑’);

}

}]

});

})

</script>

八，列组合

<table class=”easyui-datagrid” title=”列组合” style=”width:705px;height:250px”

data-options=”rownumbers:true,singleSelect:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

<th colspan=”4″>产品详细信息</th>

</tr>

<tr>

</tr>

</thead>

</table>

九，数据表格列对齐

<table class=”easyui-datagrid” title=”数据表格列对齐” style=”width:700px;height:250px”

data-options=”singleSelect:true,collapsible:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

十，数据表格中冻结列

<table class=”easyui-datagrid” title=”数据表格中冻结列” style=”width:700px;height:250px”

data-options=”rownumbers:true,singleSelect:true,url:’../datagrid/datagrid_data1.json'”>

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

</thead>

</table>

十一，格式化数据表格列

<table class=”easyui-datagrid” title=”格式化数据表格列” style=”width:700px;height:250px”

data-options=”rownumbers:true,singleSelect:true,iconCls:’icon-ok’,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

十二，数据表格中冻结行

<table class=”easyui-datagrid” title=”数据表格中冻结” style=”width:700px;height:250px”

data-options=”

singleSelect: true,

collapsible: true,

rownumbers: true,

url: ‘common/datagrid_data1.json’,

onLoadSuccess: function(){

$(this).datagrid(‘freezeRow’,0).datagrid(‘freezeRow’,0);

}

“>

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

</thead>

</table>

function formatPrice(val,row){

if (val < 30){

return ‘<span style=”color:red;”>(‘+val+’)</span>’;

} else {

return val;

}

</script>

十三，数据表格中的行编辑

<table id=”dg” class=”easyui-datagrid” title=”数据表格中的行编辑” style=”width:700px;height:auto”

data-options=”

iconCls: ‘icon-edit’,

singleSelect: true,

toolbar: ‘#tb’,

url: ‘common/datagrid_data1.json’,

onClickRow: onClickRow

“>

<thead>

<tr>

<th data-options=”field:’productid’,width:100,

formatter:function(value,row){

return row.productname;

editor:{

type:’combobox’,

options:{

valueField:’productid’,

textField:’productname’,

url:’common/products.json’,

required:true

}

}”>产品</th>

</tr>

</thead>

</table>

</div>

var editIndex = undefined;

function endEditing(){

if (editIndex == undefined){return true}

if ($(‘#dg’).datagrid(‘validateRow’, editIndex)){

var ed = $(‘#dg’).datagrid(‘getEditor’, {index:editIndex,field:’productid’});

var productname = $(ed.target).combobox(‘getText’);

$(‘#dg’).datagrid(‘getRows’)[editIndex][‘productname’] = productname;

$(‘#dg’).datagrid(‘endEdit’, editIndex);

editIndex = undefined;

return true;

} else {

return false;

}

function onClickRow(index){

if (editIndex != index){

if (endEditing()){

$(‘#dg’).datagrid(‘selectRow’, index)

.datagrid(‘beginEdit’, index);

editIndex = index;

} else {

$(‘#dg’).datagrid(‘selectRow’, editIndex);

}

function append(){

if (endEditing()){

$(‘#dg’).datagrid(‘appendRow’,{status:’P’});

editIndex = $(‘#dg’).datagrid(‘getRows’).length-1;

$(‘#dg’).datagrid(‘selectRow’, editIndex)

.datagrid(‘beginEdit’, editIndex);

}

function remove(){

if (editIndex == undefined){return}

$(‘#dg’).datagrid(‘cancelEdit’, editIndex)

.datagrid(‘deleteRow’, editIndex);

editIndex = undefined;

}

function accept(){

if (endEditing()){

$(‘#dg’).datagrid(‘acceptChanges’);

}

function reject(){

$(‘#dg’).datagrid(‘rejectChanges’);

editIndex = undefined;

}

function getChanges(){

var rows = $(‘#dg’).datagrid(‘getChanges’);

alert(rows.length+’ rows are changed!’);

}

</script>

十四，数据表格行样式

<table class=”easyui-datagrid” title=”数据表格行样式” style=”width:700px;height:250px”

data-options=”

singleSelect: true,

iconCls: ‘icon-save’,

url: ‘common/datagrid_data1.json’,

rowStyler: function(index,row){

if (row.listprice < 30){

return ‘background-color:#6293BB;color:#fff;font-weight:bold;’;

}

“>

<thead>

<tr>

</tr>

</thead>

</table>

十五，数据表格单元格样式

<table class=”easyui-datagrid” title=”数据表格单元格样式” style=”width:700px;height:250px”

data-options=”

singleSelect: true,

iconCls: ‘icon-save’,

url: ‘common/datagrid_data1.json’

“>

<thead>

<tr>

</tr>

</thead>

</table>

function cellStyler(value,row,index){

if (value < 30){

return ‘background-color:#ffee00;color:red;’;

}

</script>

十六，数据表格页脚行

<table class=”easyui-datagrid” title=”数据表格页脚行” style=”width:700px;height:220px”

data-options=”

url: ‘common/datagrid_data2.json’,

fitColumns: true,

singleSelect: true,

rownumbers: true,

showFooter: true

“>

<thead>

<tr>

</tr>

</thead>

</table>

十七，数据表格客户端分页

<table id=”dg” title=”客户端分页” style=”width:700px;height:300px” data-options=”

rownumbers:true,

singleSelect:true,

autoRowHeight:false,

pagination:true,

pageSize:10″>

<thead>

<tr>

</tr>

</thead>

</table>

function getData(){

var rows = [];

for(var i=1; i<=800; i++){

var amount = Math.floor(Math.random()*1000);

var price = Math.floor(Math.random()*1000);

rows.push({

inv: i+’月’,

date: $.fn.datebox.defaults.formatter(new Date()),

amount: amount,

price: price,

cost: amount*price,

note: ‘备注 ‘+i

});

}

return rows;

}

function pagerFilter(data){

if (typeof data.length == ‘number’ && typeof data.splice == ‘function’){ // is array

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>

十八，数据表格复选框选择模型

<h2>数据表格复选框选择模型</h2>

<table id=”dg” class=”easyui-datagrid” title=”数据表格复选框选择模型” style=”width:705px;height:250px”

data-options=”rownumbers:true,singleSelect:true,url:’common/datagrid_data1.json'”>

<thead>

<tr>

</tr>

</thead>

</table>

</select><br/>

选择联动复选框: <input type=”checkbox” checked onchange=”$(‘#dg’).datagrid({selectOnCheck:$(this).is(‘:checked’)})”><br/>

复选框联动选择: <input type=”checkbox” checked onchange=”$(‘#dg’).datagrid({checkOnSelect:$(this).is(‘:checked’)})”>

</div>

十九，数据表格右键菜单

$(function(){

$(‘#dg’).datagrid({

url: ‘common/datagrid_data1.json’,

title: ‘数据表格右键菜单’,

iconCls: ‘icon-save’,

width: 700,

height: 250,

fitColumns: true,

singleSelect: true,

columns:[[

{field:’itemid’,title:’编号’,width:80},

{field:’productid’,title:’产品编号’,width:120},

{field:’listprice’,title:’市场价’,width:80,align:’right’},

{field:’unitcost’,title:’成本价’,width:80,align:’right’},

{field:’attr1′,title:’描述’,width:250},

{field:’status’,title:’状态’,width:60,align:’center’}

]],

onHeaderContextMenu: function(e, field){

e.preventDefault();

if (!cmenu){

createColumnMenu();

}

cmenu.menu(‘show’, {

left:e.pageX,

top:e.pageY

});

}

});

var cmenu;

function createColumnMenu(){

cmenu = $(‘<div/>’).appendTo(‘body’);

cmenu.menu({

onClick: function(item){

if (item.iconCls == ‘icon-ok’){

$(‘#dg’).datagrid(‘hideColumn’, item.name);

cmenu.menu(‘setIcon’, {

target: item.target,

iconCls: ‘icon-empty’

});

} else {

$(‘#dg’).datagrid(‘showColumn’, item.name);

cmenu.menu(‘setIcon’, {

target: item.target,

iconCls: ‘icon-ok’

});

}

});

var fields = $(‘#dg’).datagrid(‘getColumnFields’);

for(var i=0; i<fields.length; i++){

var field = fields[i];

var col = $(‘#dg’).datagrid(‘getColumnOption’, field);

cmenu.menu(‘appendItem’, {

text: col.title,

iconCls: ‘icon-ok’

});

}

</script>

二十，数据表格合并单元格

<table class=”easyui-datagrid” title=”数据表格合并单元格” style=”width:700px;height:250px”

data-options=”

rownumbers: true,

singleSelect: true,

iconCls: ‘icon-save’,

url: ‘../datagrid/datagrid_data1.json’,

onLoadSuccess: onLoadSuccess

“>

<thead>

<tr>

</tr>

</thead>

</table>

function onLoadSuccess(data){

var merges = [{

index: 2,

rowspan: 2

},{

index: 5,

rowspan: 2

},{

index: 7,

rowspan: 2

}];

for(var i=0; i<merges.length; i++){

$(this).datagrid(‘mergeCells’,{

index: merges[i].index,

field: ‘productid’,

rowspan: merges[i].rowspan

});

}

</script>

PropertyGrid 组件

一，基本属性表格

</div>

<table id=”pg” class=”easyui-propertygrid” style=”width:300px”

data-options=”url:’common/propertygrid_data1.json’,showGroup:true,scrollbarSize:0″></table>

function showGroup(){

$(‘#pg’).propertygrid({

showGroup:true

});

}

function hideGroup(){

$(‘#pg’).propertygrid({

showGroup:false

});

}

function showHeader(){

$(‘#pg’).propertygrid({

showHeader:true

});

}

function hideHeader(){

$(‘#pg’).propertygrid({

showHeader:false

});

}

function getChanges(){

var s = ”;

var rows = $(‘#pg’).propertygrid(‘getChanges’);

for(var i=0; i<rows.length; i++){

s += rows[i].name + ‘:’ + rows[i].value + ‘,’;

}

alert(s)

}

</script>

二，属性表格定制列

<table class=”easyui-propertygrid” style=”width:300px” data-options=”

url: ‘common/propertygrid_data1.json’,

showGroup: true,

scrollbarSize: 0,

columns: mycolumns

“>

</table>

var mycolumns = [[

{field:’name’,title:’名称’,width:100,sortable:true},

{field:’value’,title:’值’,width:100,resizable:false}

]];

</script>

三，分组格式化

<table class=”easyui-propertygrid” style=”width:300px” data-options=”

url: ‘common/propertygrid_data1.json’,

showGroup: true,

scrollbarSize: 0,

groupFormatter: groupFormatter

“>

</table>

function groupFormatter(fvalue, rows){

return fvalue + ‘ – <span style=”color:red”>’ + rows.length + ‘ 行</span>’;

}

</script>

Tree 组件

一，基本树组件

<li>

<span>My Documents</span>

<ul>

<span>Photos</span>

<ul>

<li>

<span>Friend</span>

</li>

<li>

</li>

<li>

<span>Company</span>

</li>

</ul>

</li>

<li>

<span>Program Files</span>

<ul>

<li>Intel</li>

<li>Microsoft Office</li>

<li>Games</li>

</ul>

</li>

<li>index.html</li>

<li>about.html</li>

<li>welcome.html</li>

</ul>

</li>

</ul>

二，动画效果树

三，复选框树

<a href=”#” class=”easyui-linkbutton” onclick=”getChecked()”>获取选中值</a>

<br/>

<input type=”checkbox” checked onchange=”$(‘#tt’).tree({cascadeCheck:$(this).is(‘:checked’)})”>级联选中

<input type=”checkbox” onchange=”$(‘#tt’).tree({onlyLeafCheck:$(this).is(‘:checked’)})”>只有叶子节点有复选框

</div>

function getChecked(){

var nodes = $(‘#tt’).tree(‘getChecked’);

var s = ”;

for(var i=0; i<nodes.length; i++){

if (s != ”) s += ‘,’;

s += nodes[i].text;

}

alert(s);

}

</script>

四，树结构线

五，树节点图标

六，树相关操作

<a href=”#” class=”easyui-linkbutton” onclick=”getSelected()”>获取选中节点</a>

</div>

function collapseAll(){

$(‘#tt’).tree(‘collapseAll’);

}

function expandAll(){

$(‘#tt’).tree(‘expandAll’);

}

function expandTo(){

var node = $(‘#tt’).tree(‘find’,113);

$(‘#tt’).tree(‘expandTo’, node.target).tree(‘select’, node.target);

}

function getSelected(){

var node = $(‘#tt’).tree(‘getSelected’);

if (node){

var s = node.text;

if (node.attributes){

s += “,”+node.attributes.p1+”,”+node.attributes.p2;

}

alert(s);

}

</script>

七，树右键菜单

<ul id=”tt” class=”easyui-tree” data-options=”

url: ‘common/tree_data1.json’,

animate: true,

onContextMenu: function(e,node){

e.preventDefault();

$(this).tree(‘select’,node.target);

$(‘#mm’).menu(‘show’,{

left: e.pageX,

top: e.pageY

});

}

“></ul>

</div>

function append(){

var t = $(‘#tt’);

var node = t.tree(‘getSelected’);

t.tree(‘append’, {

parent: (node?node.target:null),

data: [{

text: ‘new item1’

},{

text: ‘new item2’

}]

});

}

function remove(){

var node = $(‘#tt’).tree(‘getSelected’);

$(‘#tt’).tree(‘remove’, node.target);

}

function collapse(){

var node = $(‘#tt’).tree(‘getSelected’);

$(‘#tt’).tree(‘collapse’,node.target);

}

function expand(){

var node = $(‘#tt’).tree(‘getSelected’);

$(‘#tt’).tree(‘expand’,node.target);

}

</script>

三，可编辑树

<ul id=”tt” class=”easyui-tree” data-options=”

url: ‘../tree/tree_data1.json’,

animate: true,

onClick: function(node){

$(this).tree(‘beginEdit’,node.target);

}

“></ul>

四，拖放树节点

TreeGrid 组件

一，基本树行表格

<table title=”文件浏览” class=”easyui-treegrid” style=”width:700px;height:250px”

data-options=”

url: ‘common/treegrid_data1.json’,

rownumbers: true,

idField: ‘id’,

treeField: ‘name’

“>

<thead>

<tr>

</tr>

</thead>

</table>

二，树形表格相关操作

</div>

<table id=”tg” class=”easyui-treegrid” title=”树形表格相关操作” style=”width:700px;height:250px”

data-options=”

iconCls: ‘icon-ok’,

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: ‘common/treegrid_data2.json’,

idField: ‘id’,

treeField: ‘name’

“>

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s = ‘<div style=”width:100%;border:1px solid #ccc”>’ +

‘<div style=”width:’ + value + ‘%;background:#cc0000;color:#fff”>’ + value + ‘%’ + ‘</div>’

‘</div>’;

return s;

} else {

return ”;

}

function collapseAll(){

$(‘#tg’).treegrid(‘collapseAll’);

}

function expandAll(){

$(‘#tg’).treegrid(‘expandAll’);

}

function expandTo(){

$(‘#tg’).treegrid(‘expandTo’,21).treegrid(‘select’,21);

}

</script>

三，树形表格右键菜单

<table id=”tg” class=”easyui-treegrid” title=”树形表格右键菜单” style=”width:700px;height:250px”

data-options=”

iconCls: ‘icon-ok’,

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: ‘common/treegrid_data2.json’,

idField: ‘id’,

treeField: ‘name’,

onContextMenu: onContextMenu

“>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

function formatProgress(value){

if (value){

var s = ‘<div style=”width:100%;border:1px solid #ccc”>’ +

‘<div style=”width:’ + value + ‘%;background:#cc0000;color:#fff”>’ + value + ‘%’ + ‘</div>’

‘</div>’;

return s;

} else {

return ”;

}

function onContextMenu(e,row){

e.preventDefault();

$(this).treegrid(‘select’, row.id);

$(‘#mm’).menu(‘show’,{

left: e.pageX,

top: e.pageY

});

}

var idIndex = 100;

function append(){

idIndex++;

var d1 = new Date();

var d2 = new Date();

d2.setMonth(d2.getMonth()+1);

var node = $(‘#tg’).treegrid(‘getSelected’);

$(‘#tg’).treegrid(‘append’,{

parent: node.id,

data: [{

id: idIndex,

persons: parseInt(Math.random()*10),

begin: $.fn.datebox.defaults.formatter(d1),

end: $.fn.datebox.defaults.formatter(d2),

progress: parseInt(Math.random()*100)

}]

})

}

function removeIt(){

var node = $(‘#tg’).treegrid(‘getSelected’);

if (node){

$(‘#tg’).treegrid(‘remove’, node.id);

}

function collapse(){

var node = $(‘#tg’).treegrid(‘getSelected’);

if (node){

$(‘#tg’).treegrid(‘collapse’, node.id);

}

function expand(){

var node = $(‘#tg’).treegrid(‘getSelected’);

if (node){

$(‘#tg’).treegrid(‘expand’, node.id);

}

</script>

四，可编辑树形表格

</div>

<table id=”tg” class=”easyui-treegrid” title=”可编辑树形表格” style=”width:700px;height:250px”

data-options=”

iconCls: ‘icon-ok’,

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: ‘common/treegrid_data2.json’,

idField: ‘id’,

treeField: ‘name’,

showFooter: true

“>

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s = ‘<div style=”width:100%;border:1px solid #ccc”>’ +

‘<div style=”width:’ + value + ‘%;background:#cc0000;color:#fff”>’ + value + ‘%’ + ‘</div>’

‘</div>’;

return s;

} else {

return ”;

}

var editingId;

function edit(){

if (editingId != undefined){

$(‘#tg’).treegrid(‘select’, editingId);

return;

}

var row = $(‘#tg’).treegrid(‘getSelected’);

if (row){

editingId = row.id

$(‘#tg’).treegrid(‘beginEdit’, editingId);

}

function save(){

if (editingId != undefined){

var t = $(‘#tg’);

t.treegrid(‘endEdit’, editingId);

editingId = undefined;

var persons = 0;

var rows = t.treegrid(‘getChildren’);

for(var i=0; i<rows.length; i++){

var p = parseInt(rows[i].persons);

if (!isNaN(p)){

persons += p;

}

var frow = t.treegrid(‘getFooterRows’)[0];

frow.persons = persons;

t.treegrid(‘reloadFooter’);

}

function cancel(){

if (editingId != undefined){

$(‘#tg’).treegrid(‘cancelEdit’, editingId);

editingId = undefined;

}

</script>

五，树形表格底部行

$(function(){

$(‘#tg’).treegrid({

title:’树形表格底部行’,

iconCls:’icon-ok’,

width:700,

height:250,

rownumbers: true,

animate:true,

collapsible:true,

fitColumns:true,

url:’common/treegrid_data2.json’,

idField:’id’,

treeField:’name’,

showFooter:true,

columns:[[

{title:’任务名称’,field:’name’,width:180},

{title:’人员’,field:’persons’,width:60,align:’right’},

{title:’开始日期’,field:’begin’,width:80},

{title:’结束日期’,field:’end’,width:80},

{title:’进度’,field:’progress’,width:120,

formatter:function(value){

if (value){

var s = ‘<div style=”width:100%;border:1px solid #ccc”>’ +

‘<div style=”width:’ + value + ‘%;background:#cc0000;color:#fff”>’ + value + ‘%’ + ‘</div>’

‘</div>’;

return s;

} else {

return ”;

}

]]

});

})

</script>

六，树形表格报表

<table title=”树形表格报表” class=”easyui-treegrid” style=”width:750px;height:250px”

data-options=”

url: ‘common/treegrid_data3.json’,

rownumbers: true,

showFooter: true,

idField: ‘id’,

treeField: ‘region’

“>

<tr>

</tr>

</thead>

<thead>

<tr>

</tr>

<tr>

</tr>

</thead>

</table>

八，树形表格客户端分页

<table id=”tg” class=”easyui-treegrid” title=”客户端分页” style=”width:700px;height:250px”

data-options=”

iconCls: ‘icon-ok’,

rownumbers: true,

animate: true,

collapsible: true,

fitColumns: true,

url: ‘common/treegrid_data2.json’,

idField: ‘id’,

treeField: ‘name’,

loadFilter: pagerFilter,

pagination: true,

pageSize: 2,

pageList: [2,5,10]

“>

<thead>

<tr>

</tr>

</thead>

</table>

function formatProgress(value){

if (value){

var s = ‘<div style=”width:100%;border:1px solid #ccc”>’ +

‘<div style=”width:’ + value + ‘%;background:#cc0000;color:#fff”>’ + value + ‘%’ + ‘</div>’

‘</div>’;

return s;

} else {

return ”;

}

function pagerFilter(data){

if ($.isArray(data)){ // is array

data = {

total: data.length,

rows: data

}

var dg = $(this);

var state = dg.data(‘treegrid’);

var opts = dg.treegrid(‘options’);

var pager = dg.treegrid(‘getPager’);

pager.pagination({

onSelectPage:function(pageNum, pageSize){

opts.pageNumber = pageNum;

opts.pageSize = pageSize;

pager.pagination(‘refresh’,{

pageNumber:pageNum,

pageSize:pageSize

});

dg.treegrid(‘loadData’,data);

}

});

if (!data.topRows){

data.topRows = [];

data.childRows = [];

for(var i=0; i<data.rows.length; i++){

var row = data.rows[i];

row._parentId ? data.childRows.push(row) : data.topRows.push(row);

}

data.total = (data.topRows.length);

}

var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

var end = start + parseInt(opts.pageSize);

data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows));

return data;

}

</script>

Java 后台交互（1）

一，简单架构搭建

二，Json 开发包引入

三，JsonUtil 实现

四，分页实现

五，分页显示所有用户信息

Java 后台交互（2）

一，实现用户信息的添加，删除，修改操作

Java 后台交互（3）

一，引入Easyui 的可编辑数据表格Edatagrid

二，使用Edatagrid 来是实现用户的CRUD 操作

Java 后台交互（4）

一，引入Easyui 的]datagrid-detailview.js

二，使用datagrid-detailview.js 来是实现用户的CRUD 操作

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/12109.html

前端开发之easyUI（下）[通俗易懂]

相关推荐

发表回复