JQuery Easy Ui dataGrid 数据表格

Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults.

The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich. Cell merging, multi-column headers, frozen columns and footers are just a few of its features.

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法示例

Create datagrid from an existing table element, defining columns, rows, and data in html.

  1. <table class="easyui-datagrid">
  2. <thead>
  3. <tr>
  4. <th data-options="field:‘code‘">Code</th
  5. <th data-options="field:‘name‘">Name</th
  6. <th data-options="field:‘price‘">Price</th
  7. </tr
  8. </thead
  9. <tbody>
  10. <tr>
  11. <td>001</td<td>name1</td<td>2323</td
  12. </tr
  13. <tr>
  14. <td>002</td<td>name2</td<td>4612</td
  15. </tr
  16. </tbody
  17. </table

Create datagrid via <table> markup. The nested <th> tags define the columns on the table.

  1. <table class="easyui-datagrid" style="width:400px;height:250px"
  2. data-options="url:‘datagrid_data.json‘,fitColumns:true,singleSelect:true">
  3. <thead>
  4. <tr>
  5. <th data-options="field:‘code‘,width:100">Code</th
  6. <th data-options="field:‘name‘,width:100">Name</th
  7. <th data-options="field:‘price‘,width:100,align:‘right‘">Price</th
  8. </tr
  9. </thead
  10. </table

Create datagrid using javascript is also allowed.

  1. <table id="dg"></table
  1. $(‘#dg‘).datagrid({
  2. url:‘datagrid_data.json‘,
  3. columns:[[
  4. {field:‘code‘,title:‘Code‘,width:100},
  5. {field:‘name‘,title:‘Name‘,width:100},
  6. {field:‘price‘,title:‘Price‘,width:100,align:‘right‘}
  7. ]]
  8. });

Query data with some parameters.

  1. $(‘#dg‘).datagrid(‘load‘, {
  2. name: ‘easyui‘,
  3. address: ‘ho‘
  4. });

After changing data to server, refresh the front data.

  1. $(‘#dg‘).datagrid(‘reload‘); // reload the current page data

表格属性

The properties extend from panel. below is the added properties for datagrid.

名称 类型 描述 默认值
columns array The datagrid columns config object, see column properties for more details. undefined
frozenColumns array Same as the columns property, but the these columns will be frozen on left. undefined
fitColumns boolean True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. false
resizeHandle string Resizing column position, Available value are: ‘left‘,‘right‘,‘both‘. When ‘right‘, users can resize columns by dragging the right edge of column headers, etc.
This property is available since version 1.3.2.		 right
autoRowHeight boolean Defines if set the row height based on the contents of that row. Set to false can improve loading performance. true
toolbar array,selector The top toolbar of datagrid panel. Possible values:
1) an array, each tool options are same as linkbutton.
2) a selector that indicate the toolbar.

Define toolbar within a <div> tag:

$(‘#dg‘).datagrid({
	toolbar: ‘#tb‘
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘,plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-help‘,plain:true"/a>
</div>

Define toolbar via array:

$(‘#dg‘).datagrid({
	toolbar: [{
		iconCls: ‘icon-edit‘,
		handler: function(){alert(‘edit‘)}
	},‘-‘,{
		iconCls: ‘icon-help‘,
		handler: function(){alert(‘help‘)}
	}]
});
null
striped boolean True to stripe the rows. false
method string The method type to request remote data. post
nowrap boolean True to display data in one line. Set to true can improve loading performance. true
idField string Indicate which field is an identity field. null
url string A URL to request data from remote site. null
data array,object The data to be loaded. This property is available since version 1.3.2.

Code example:

$(‘#dg‘).datagrid({
	data: [
		{f1:‘value11‘, f2:‘value12‘},
		{f1:‘value21‘, f2:‘value22‘}
	]
});
null
loadMsg string When loading data from remote site, show a prompt message. Processing, please wait …
pagination boolean True to show a pagination toolbar on datagrid bottom. false
rownumbers boolean True to show a row number column. false
singleSelect boolean True to allow selecting only one row. false
checkOnSelect boolean If true, the checkbox is checked/unchecked when the user clicks on a row. If false, the checkbox is only checked/unchecked when the user clicks exactly on the checkbox.
This property is available since version 1.3.		 true
selectOnCheck boolean If set to true, clicking a checkbox will always select the row. If false, selecting a row will not check the checkbox.
This property is available since version 1.3.		 true
pagePosition string Defines position of the pager bar. Available values are: ‘top‘,‘bottom‘,‘both‘.
This property is available since version 1.3.		 bottom
pageNumber number When set pagination property, initialize the page number. 1
pageSize number When set pagination property, initialize the page size. 10
pageList array When set pagination property, initialize the page size selecting list. [10,20,30,40,50]
queryParams object When request remote data, sending additional parameters also.

Code example:

$(‘#dg‘).datagrid({
	queryParams: {
		name: ‘easyui‘,
		subject: ‘datagrid‘
	}
});
{}
sortName string Defines which column can be sorted. null
sortOrder string Defines the column sort order, can only be ‘asc‘ or ‘desc‘. asc
multiSort boolean Defines if to enable multiple column sorting. This property is available since version 1.3.4. false
remoteSort boolean Defines if to sort data from server. true
showHeader boolean Defines if to show row header. true
showFooter boolean Defines if to show row footer. false
scrollbarSize number The scrollbar width(when scrollbar is vertical) or height(when scrollbar is horizontal). 18
rowStyler function Return style such as ‘background:red‘. The function take two parameter:
rowIndex: the row index, start with 0
rowData: the record corresponding to this row

Code example:

$(‘#dg‘).datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return ‘background-color:#6293BB;color:#fff;‘;
		}
	}
});
 
loader function Defines how to load data from remote server. Return false can abort this action. This function takes following parameters:
param: the parameter object to pass to remote server.
success(data): the callback function that will be called when retrieve data successfully.
error(): the callback function that will be called when failed to retrieve data.		 json loader
loadFilter function Return the filtered data to display. The function take one parameter ‘data‘ that indicate the original data. You can change original source data to standard data format. This function must return standard data object that contain ‘total‘ and ‘rows‘ properties.

Code example:

// removing ‘d‘ object from asp.net web service json output
$(‘#dg‘).datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});
 
editors object Defines the editor when editing a row. predefined editors
view object Defines the view of datagrid. default view

列属性

The DataGrid Columns is an array object, which element is an array too. The element of element array is a config object, which defines every column field.

Code example:

  1. columns:[[
  2. {field:‘itemid‘,title:‘Item ID‘,rowspan:2,width:80,sortable:true},
  3. {field:‘productid‘,title:‘Product ID‘,rowspan:2,width:80,sortable:true},
  4. {title:‘Item Details‘,colspan:4}
  5. ],[
  6. {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘,sortable:true},
  7. {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘,sortable:true},
  8. {field:‘attr1‘,title:‘Attribute‘,width:100},
  9. {field:‘status‘,title:‘Status‘,width:60}
  10. ]]
名称 类型 描述 默认值
title string The column title text. undefined
field string The column field name. undefined
width number The width of column. If not defined, the width will auto expand to fit its contents. undefined
rowspan number Indicate how many rows a cell should take up. undefined
colspan number Indicate how many columns a cell should take up. undefined
align string Indicate how to align the column data. ‘left‘,‘right‘,‘center‘ can be used. undefined
halign string Indicate how to align the column header. Possible values are: ‘left‘,‘right‘,‘center‘. If not assigned, the header alignment is same as data alignment defined via ‘align‘ property. This property is available since version 1.3.2. undefined
sortable boolean True to allow the column can be sorted. undefined
order string The default sort order, can only be ‘asc‘ or ‘desc‘. This property is available since version 1.3.2. undefined
resizable boolean True to allow the column can be resized. undefined
fixed boolean True to prevent from adjusting width when ‘fitColumns‘ is set to true. undefined
hidden boolean True to hide the column. undefined
checkbox boolean True to show a checkbox. The checkbox column has fixed width. undefined
formatter function The cell formatter function, take three parameters:
value: the field value.
rowData: the row record data.
rowIndex: the row index.

Code example:

$(‘#dg‘).datagrid({
	columns:[[
		{field:‘userId‘,title:‘User‘, width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});
undefined
styler function The cell styler function, return style string to custom the cell style such as ‘background:red‘. The function take three parameter:
value: the field value.
rowData: the row record data.
rowIndex: the row index.

Code example:

$(‘#dg‘).datagrid({
	columns:[[
		{field:‘listprice‘,title:‘List Price‘, width:80, align:‘right‘,
			styler: function(value,row,index){
				if (value < 20){
					return ‘background-color:#ffee00;color:red;‘;
				}
			}
		}
	]]
});
undefined
sorter function The custom field sort function that used to do local sorting, take two parameters:
a: the first field value.
b: the second field value.

Code example:

$(‘#dg‘).datagrid({
	remoteSort: false,
	columns: [[
		{field:‘date‘,title:‘Date‘,width:80,sortable:true,align:‘center‘,
			sorter:function(a,b){
				a = a.split(‘/‘);
				b = b.split(‘/‘);
				if (a[2] == b[2]){
					if (a[0] == b[0]){
						return (a[1]>b[1]?1:-1);
					} else {
						return (a[0]>b[0]?1:-1);
					}
				} else {
					return (a[2]>b[2]?1:-1);
				}
			}
		}
	]]
});
undefined
editor string,object Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.		 undefined

编辑器

Override defaults with $.fn.datagrid.defaults.editors.

Every editor has following actions:

名称 参数列表 描述
init container, options Initialize the editor and return the target object.
destroy target Destroy the editor if necessary.
getValue target Get value from editor text.
setValue target , value Set value for editor.
resize target , width Resize the editor if necessary.

For example, the text editor is defined as following:

  1. $.extend($.fn.datagrid.defaults.editors, {
  2. text: {
  3. init: function(container, options){
  4. var input = $(‘<input type="text" class="datagrid-editable-input">‘).appendTo(container);
  5. return input;
  6. },
  7. destroy: function(target){
  8. $(target).remove();
  9. },
  10. getValue: function(target){
  11. return $(target).val();
  12. },
  13. setValue: function(target, value){
  14. $(target).val(value);
  15. },
  16. resize: function(target, width){
  17. $(target)._outerWidth(width);
  18. }
  19. }
  20. });

表格视图

Override defaults with $.fn.datagrid.defaults.view.

The view is an object that will tell datagrid how to render rows. The object must defines the following functions:

名称 参数列表 描述
render target, container, frozen Called when the data is loaded.
target: DOM object, the datagrid object.
container: the rows container.
frozen: indicate if to render the frozen container.
renderFooter target, container, frozen This is an option function to render row footer.
renderRow target, fields, frozen, rowIndex, rowData This is an option function and will be called by render function.
refreshRow target, rowIndex Defines how to refresh the specified row.
onBeforeRender target, rows Fires before the view is rendered.
onAfterRender target Fires after the view is rendered.

事件

The events extend from panel, below is the added events for datagrid.

名称 参数列表 描述
onLoadSuccess data Fires when data is loaded successfully.
onLoadError none Fires when some error occur to load remote data.
onBeforeLoad param Fires before a request is made to load data. If return false the load action will be canceled.
onClickRow rowIndex, rowData Fires when user click a row, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow rowIndex, rowData Fires when user dblclick a row, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onClickCell rowIndex, field, value Fires when user click a cell.
onDblClickCell rowIndex, field, value Fires when user dblclick a cell.

Code example:

// when double click a cell, begin editing and make the editor get focus
$(‘#dg‘).datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid(‘beginEdit‘, index);
		var ed = $(this).datagrid(‘getEditor‘, {index:index,field:field});
		$(ed.target).focus();
	}
});
onSortColumn sort, order Fires when user sort a column, the parameters contains:
sort: the sort column field name
order: the sort column order
onResizeColumn field, width Fires when user resize the column.
onSelect rowIndex, rowData Fires when user select a row, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect rowIndex, rowData Fires when user unselect a row, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onSelectAll rows Fires when user select all rows.
onUnselectAll rows Fires when user unselect all rows.
onCheck rowIndex,rowData Fires when user check a row, the parameters contains:
rowIndex: the checked row index, start with 0
rowData: the record corresponding to the checked row
This event is available since version 1.3.
onUncheck rowIndex,rowData Fires when user uncheck a row, the parameters contains:
rowIndex: the unchecked row index, start with 0
rowData: the record corresponding to the unchecked row
This event is available since version 1.3.
onCheckAll rows Fires when user check all rows. This event is available since version 1.3.
onUncheckAll rows Fires when user uncheck all rows. This event is available since version 1.3.
onBeforeEdit rowIndex, rowData Fires when user start editing a row, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit rowIndex, rowData, changes Fires when user finish editing, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit rowIndex, rowData Fires when user cancel editing a row, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onHeaderContextMenu e, field Fires when the header of datagrid is right clicked.
onRowContextMenu e, rowIndex, rowData Fires when a row is right clicked.

方法

名称 参数 描述
options none Return the options object.
getPager none Return the pager object.
getPanel none Return the panel object.
getColumnFields frozen Return the column fields. If frozen setted to true the frozen column fields is returned.
Code example:

var opts = $(‘#dg‘).datagrid(‘getColumnFields‘);	// get unfrozen columns
var opts = $(‘#dg‘).datagrid(‘getColumnFields‘, true); // get frozen columns
getColumnOption field Return the specified column option.
resize param Do resize and do layout.
load param Load and show the first page rows. If the ‘param‘ is specified, it will replace with the queryParams property. Usually do a query by passing some parameters, this method can be called to load new data from server.

$(‘#dg‘).datagrid(‘load‘,{
	code: ‘01‘,
	name: ‘name01‘
});
reload param Reload the rows. Same as the ‘load‘ method but stay on current page.
reloadFooter footer Reload the footer rows. Code examples:

// update footer row values and then refresh
var rows = $(‘#dg‘).datagrid(‘getFooterRows‘);
rows[0][‘name‘] = ‘new name‘;
rows[0][‘salary‘] = 60000;
$(‘#dg‘).datagrid(‘reloadFooter‘);

// update footer rows with new data
$(‘#dg‘).datagrid(‘reloadFooter‘,[
	{name: ‘name1‘, salary: 60000},
	{name: ‘name2‘, salary: 65000}
]);
loading none Display loading status.
loaded none Hide loading status.
fitColumns none Make columns auto expand/collapse to fit datagrid width.
fixColumnSize field Fix columns size. If ‘field‘ parameter is not assigned, all columns size will be fixed.

Code example:

$(‘#dg‘).datagrid(‘fixColumnSize‘, ‘name‘);  // fix the ‘name‘ column size
$(‘#dg‘).datagrid(‘fixColumnSize‘);  // fix all columns size
fixRowHeight index Fix the specified row height. If ‘index‘ parameter is not assigned, all rows height will be fixed.
freezeRow index Freeze the specify row that will always be displayed at the top when the datagrid is scrolled down. This method is available since version 1.3.2.
autoSizeColumn field adjusts the column width to fit the contents. This method is available since version 1.3.
loadData data Load local data, the old rows will be removed.
getData none Return the loaded data.
getRows none Return the current page rows.
getFooterRows none Return the footer rows.
getRowIndex row Return the specified row index, the row parameter can be a row record or an id field value.
getChecked none Return all rows where the checkbox has been checked. This method is available since version 1.3.
getSelected none Return the first selected row record or null.
getSelections none Return all selected rows, when no record selected, am empty array will return.
clearSelections none Clear all selections.
clearChecked none Clear all checked rows. This method is available since version 1.3.2.
scrollTo index Scroll to the specified row. This method is available since version 1.3.3.
highlightRow index Highlight a row. This method is available since version 1.3.3.
selectAll none Select all current page rows.
unselectAll none Unselect all current page rows.
selectRow index Select a row, the row index start with 0.
selectRecord idValue Select a row by passing id value parameter.
unselectRow index Unselect a row.
checkAll none Check all current page rows. This method is available since version 1.3.
uncheckAll none Uncheck all current page rows. This method is available since version 1.3.
checkRow index Check a row, the row index start with 0. This method is available since version 1.3.
uncheckRow index Uncheck a row, the row index start with 0. This method is available since version 1.3.
beginEdit index Begin editing a row.
endEdit index End editing a row.
cancelEdit index Cancel editing a row.
getEditors index Get the specified row editors. Each editor has the following properties:
actions: the actions that the editor can do, same as the editor definition.
target: the target editor jQuery object.
field: the field name.
type: the editor type, such as ‘text‘,‘combobox‘,‘datebox‘, etc.
getEditor options Get the specified editor, the options contains two properties:
index: the row index.
field: the field name.

Code example:

// get the datebox editor and change its value
var ed = $(‘#dg‘).datagrid(‘getEditor‘, {index:1,field:‘birthday‘});
$(ed.target).datebox(‘setValue‘, ‘5/4/2012‘);
refreshRow index Refresh a row.
validateRow index validate the specified row, return true when valid.
updateRow param Update the specified row, the param contains following properties:
index: the row index to be updated.
row: the new row data.

Code example:

$(‘#dg‘).datagrid(‘updateRow‘,{
	index: 2,
	row: {
		name: ‘new name‘,
		note: ‘new note message‘
	}
});
appendRow row Append a new row. The new row will be added to the last position:

$(‘#dg‘).datagrid(‘appendRow‘,{
	name: ‘new name‘,
	age: 30,
	note: ‘some messages‘
});
insertRow param Insert a new row, the param contains following properties:
index: the row index to insert into, if not defined, append the new row.
row: the row data. Code examples:

// insert a new row at second row position
$(‘#dg‘).datagrid(‘insertRow‘,{
	index: 1,	// index start with 0
	row: {
		name: ‘new name‘,
		age: 30,
		note: ‘some messages‘
	}
});
deleteRow index Delete a row.
getChanges type Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges none Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges none Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
mergeCells options Merge some cells to one cell, the options contains following properties:
index: the row index.
field: the field name.
rowspan: the rowspan count to be merged.
colspan: the colspan count to be merged.
showColumn field Display the specified column.
hideColumn field Hide the specified column.
时间： 2024-12-15 16:22:03

JQuery Easy Ui dataGrid 数据表格的相关文章

jQuery easy 之dataGrid数据列表

jQuery easy 中的dataGrid插件是一款非常优秀的数据展示插件,它可以动态绑定数据列,下面开始简单介绍: 第一步:首先对其进行初始化 $("#dg").datagrid({ url:'getSupervisionPlan.call', singleSelect: true, fitColumns: false, pagination: true, //需要传递的参数(如查询条件,类型为json) queryParams:, pageSize: 10, height:375

Jquery easy ui datagrid動態加載列問題

1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数 2.首先是后台组装数据,我采用的是循环并拼接DataTable数据,如下代码 //循環添加datagrid所需的表頭數據 for (int i = 0; i < table.Columns.Count; i++) { columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},", table.Columns[i].

jquery easy ui datagrid中遇到的坑爹的問題。。。

不說廢話,直接上代碼吧... //定義一個全局變量防止重複提交(百度了一下似乎很多人也遇到類似的問題) 1 var i = 0; 2 //修改 3 function Update() { 4 //獲取選中行 5 var selected = $("#dg1").datagrid('getSelected'); //判斷是否有選中行 6 if (selected != null) { 7 //顯示添加窗體 8 $('.theme-popover-mask').fadeIn(100); 9

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

JQuery Easy Ui （Tree树）详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui （Tree树）详解（转）

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

jQuery Easy UI整理笔记目录

jQuery Easy UI整理笔记目录 ps:最近对Easy UI比较感兴趣,打算系统的学习一下,前面基础部分的东西很简单,都是参照API去写的,例子也就是随便举的,没有列举项目中的实际应用. 打算基础部分后面的知识多投入点时间,多与项目中的实际相结合一些,也尽量多想象出一些应用场景. 计划最慢每周更新一篇文章. 一.基础组件部分 1. jQuery Easy UI的使用 2. jQuery Easy UI Draggable(拖动)组件 3. jQuery Easy UI Droppable