V2AS问路
Jquery easyui 教程
阅读原文时间：2020年09月21日阅读：2

Jquery easyui教程

目  录

  • 1基本拖放… 4
  • 2构建购物车型拖放… 5
  • 3创建课程表… 8
  • 4菜单和按钮Menu and Button. 10

o     4.1创建简单菜单… 10

o     4.2创建连接按钮… 11

o     4.3建立菜单按钮… 12

o     4.4建立拆分按钮… 13

  • 5创建边框版面网页… 15

o     5.1面板上的复合版面… 16

o     5.2建立可折叠版面… 17

o     5.3建立TABS. 18

o     5.4动态添加tabs. 19

o     5.5创建XP式样左面板… 20

  • 6 DataGrid 数据格… 23

o     6.1 转换HTML表格到DataGrid. 23

o     6.2 给DataGrid添加分页… 25

o     6.3 得到DataGrid选择行… 27

o     6.4 添加工具栏到DataGrid. 28

o     6.5 DataGrid冻结列… 30

o     6.6 动态改变DataGrid列… 31

o     6.7 格式化DataGrid列… 32

o     6.8 添加排序到DataGrid. 33

o     6.9 在DataGrid上的复选框… 36

o     6.10 自定义DataGrid分页… 37

o     6.11使DataGrid能编辑… 38

o     6.12 DataGrid中合并单元格… 41

  • 7 窗口… 44

o     7.1 我第一个窗口… 44

o     7.2 自定义窗口工具… 45

o     7.3 Window和Layout 46

o     7.4 创建对话框… 47

  • 8 Tree. 50
  • 8.1从标记创建tree. 51
  • 8.2创建异步Tree. 52
  • 8.3 添加节点… 55
  • 8.4 创建带有checkbox节点的tree. 57
  • 9 表单… 58

o     9.1 Ajax方式发送表单… 58

o     9.2 给表单添加复合tree字段… 59

o     9.3 验证表单… 62

  • 10 Documentation文档… 65

o     10.1 Base. 65

§      10.1.1  EasyLoader 66

§      10.1.2 Draggable. 67

§      10.1.3 Droppable. 69

§      10.1.4 Resizable. 70

o     10.2  layout 71

§      10.2.1 Panel 71

§      10.2.2 tabs 76

§      10.2.3 accordion. 79

§      10.2.4 layout 82

o     10.3 Menu and button. 83

o     10.4 form.. 88

o     10.5 window.. 101

o     10.6 Datagrid and tree. 107

概述

这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：

easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：

·           1基本拖放

这个教程显示如何使HTML元素变得可拖放。这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：

让第一个DIV元素可拖放，使用默认的拖放样式。

$('#dd1').draggable();

让第二个DIV元素使用proxy来拖放，proxy:'clone'表示proxy使用原始元素的复制。

$('#dd2').draggable({

proxy:'clone'

});

让第三个DIV元素使用自定义proxy来拖放

$('#dd3').draggable({

proxy:function(source){

var p = $('

proxy
');

p.appendTo('body');

return p;

}

});

·          

2构建购物车型拖放

使用jQuery easyui，我们在web应用中就有了拖放的能力。这个教程显示了如何构建购物车页，它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：

ul元素包含一些li元素以显示产品。每一个产品的名称和单价属性在P元素中。

创建购物车：

Shopping Cart

Name Quantity Price

Total: $0

Drop here to add to cart

使用datagrid显示购物篮项目。

拖曳产品副本

$('.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';

}

});

我们设置draggable属性proxy为clone，所以拖曳元素使用clone效果。

将选择的产品放入购物车

$('.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('$')[1]));

}

});

var data = {"total":0,"rows":[]};

var totalCost = 0;

function addProduct(name,price){

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();

totalCost += price;

$('#cartcontent').datagrid('loadData', data);

$('div.cart .total').html('Total: $'+totalCost);

}

当放下产品时，我们得到产品的名称和单价，然后调用addProduct函数更新购物篮。

·          

3创建课程表

本教程显示了如何使用jQuery easyui创建课程表。我们创建两个表：在左面的课程列表和右面的时间表。你可以拖课程到时间表的单元格中。课程是

元素，时间格是元素。

显示课程

English
Science

显示时间表

Monday Tuesday Wednesday Thursday Friday
08:00

拖动左面的课程

$('.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

});

}

}

});

当用户拖动左面的课程到右面的时间表中，onDrop函数被调用。源元素的副本被从左面拖动并且附加到到时间表的单元格中。当放置课程到时间表的单元格到另一个单元格时，简单的移动它。

·          

4菜单和按钮Menu and Button

  • 4.1建立简单菜单
  • 4.2建立链接按钮
  • 4.3建立菜单按钮
  • 4.4建立分割按钮

在DIV标记中定义菜单。像这样：

   
New
   
        Open        
           
Word
           
Excel
           
PowerPoint
       
   
   
Save
   
   
Exit

建立菜单，你需要运行下列jQuery代码

$('#mm').menu();

//或者 $('#mm').menu(options);

当菜单被创建时是不可见的，可使用show方法显示或者hide方法隐藏：

$('#mm').menu('show', {

  left: 200,

  top: 100

});

现在，我们创建菜单并在（200,100）处显示。运行代码会得到：

通常使用