没有合适的资源？快使用搜索试试~ 我知道了~

首页jQuery_EasyUI_中文教程 pdf

jQuery_EasyUI_中文教程 pdf

jQuery

EasyUI

中文教程

pdf

4星 · 超过85%的资源需积分: 10 155 浏览量更新于2023-05-27 评论 1 收藏 903KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

130页

在DataGrid上的复选框本教程显示了你如何放置checkbox列。使用checkbox，用户可以选定/取消数据行。添加checkbox列，我们简单的添加列的checkbox属性，并且设置为true。代码像这样： <table id="tt"></table> $('#tt').datagrid({ title:'Checkbox Select', iconCls:'icon-ok', width:600, height:250, url:'datagrid_data.json', idField:'itemid', columns:[[ {field:'ck',checkbox:true}, {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:80}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]], pagination:true }); 上面的代码，我们可以添加列的checkbox属性，然后他就会出现选择列。如果idField属性被设置，DataGrid的选择会被不同的页保持。自定义DataGrid分页 DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

资源详情

资源评论

资源推荐

jquery easyui 教程

概述

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

< link rel = "stylesheet" type = "text/css"

href = "../themes/default/easyui.css" >

< script type = "text/javascript"

src = "../jquery-1.4.2.min.js" ></ script >

< script type = "text/javascript"

src = "../jquery.easyui.min.js" ></ script >

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

包含：

< link rel = "stylesheet" type = "text/css"

href = "../themes/icon.css" >

内容

1. 拖放

o 基本拖放

o 创建购物车式拖放

o 创建课程表

基本拖放

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

。

首先，创建三个 DIV 元素：

< div id = "dd1" class = "dd-demo" ></ div >

< div id = "dd2" class = "dd-demo" ></ div >

< div id = "dd3" class = "dd-demo" ></ div >

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

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

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

$( '#dd2' ).draggable({

proxy: 'clone'

});

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

$( '#dd3' ).draggable({

proxy: function (source){

var p = $( '<div class="proxy">proxy</div>' );

p.appendTo( 'body' );

return p;

}

});

构建购物车型拖放

使用 jQuery easyui ，我们在 web 应用中就有了拖放的能力。这个教程显示了如何构建购物车页，

它使用户拖放他们希望购买的产品，更新购物篮的物品和价格。

显示产品页：

< ul class = "products" >

< li >

< a href = "#" class = "item" >

< img src = "shirt1.gif" />

< div >

< p >Balloon</ p >

< p >Price:$25</ p >

</ div >

</ a >

</ li >

< li >

< a href = "#" class = "item" >

< img src = "shirt2.gif" />

< div >

< p >Feeling</ p >

< p >Price:$25</ p >

</ div >

</ a >

</ li >

</ ul >

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

创建购物车：

< div class = "cart" >

< h1 >Shopping Cart</ h1 >

< table id = "cartcontent"

style = "width:300px;height:auto;" >

< thead >

< tr >

< th field = "name" width = 140 >Name</ th >

< th field = "quantity" width = 60

align = "right" >Quantity</ th >

< th field = "price" width = 60

align = "right" >Price</ th >

</ tr >

</ thead >

</ table >

< p class = "total" >Total: $0</ p >

< h2 >Drop here to add to cart</ h2 >

</ div >

使用 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 函数更新购物篮。

创建课程表

本教程显示了如何使用 jQuery easyui 创建课程表。我们创建两个表：在左面的课程列表和右面的

时间表。你可以拖课程到时间表的单元格中。课程是 <div class='item'> 元素，时间格是 <td

class='drop'> 元素。

显示课程

< div class = "left" >

< table >

< tr >

< td >< div class = "item" >English</ div ></ td >

</ tr >

剩余129页未读，继续阅读

山东张军伟

2019-01-17

谢谢，谢谢谢谢

粉丝: 6
资源: 35

上传资源快速赚钱

我的内容管理收起

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

会员权益专享

jQuery_EasyUI_中文教程 pdf

评论20

会员权益专享

最新资源

jQuery_EasyUI_中文教程 pdf

评论20

jQuery_EasyUI教程.doc

jQuery_EasyUI中文教程

jquery_easyui_cn文档

jQuery_UI全教程之一_dialog以及Datepicker使用说明

jQuery+EasyUI+1.2.4+API+中文文档.pdf

jquery easyui 中文帮助文档(最完整的API).docx

jquery easyui中文培训文档（原创）

jQuery EasyUI 1.2.4 API 中文文档（完整）

easyloader - jQuery EasyUI中文帮助手册

easyui treegrid 懒加载

Easyui更换皮肤使用方法

jQuery easy ui学习教程

easyui datagrid-export

easyui 上传文件

EasyUI Datagrid 中文排序的问题

easyui实现手机端

easyui1.3.1 文档

会员权益专享

最新资源