Learning Path
浏览 jQuery EasyUI 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
118
jQuery EasyUI 教程 jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。 jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。 现在开始学习 jQuery EasyUI！ jQuery EasyUI 离线版CHM下载！ 内容列表 Application（应用） jQuery EasyU..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 数据网格行拖放（Drag and Drop Rows in DataGrid） jQuery EasyUI 扩展 用法 包含 'datagrid-dnd.js' 文件 启用拖拽与放置 Item ID Product List Price Unit..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 数据网格行过滤（DataGrid Filter Row） jQuery EasyUI 扩展 用法 包含 'datagrid-filter.js' 文件 启用过滤（Filter） var dg = $('#dg'); dg.datagrid(); // create datag..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 数据网格视图（DataGrid View） jQuery EasyUI 扩展 数据网格详细视图（DataGrid DetailView） 用法 步骤 1：创建一个 HTML 页面 步骤 2：创建数据网格（DataGrid） $('#tt').datagrid({ ..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - DWR 加载器（DWR Loader） jQuery EasyUI 扩展 包含 'dwrloader.js' 文件 使用 DWR 来获取数据，首先要包含 'dwrloader.js' 文件。 把 DWR 方法分配给 'url' 属性 作为默认的 jso..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 可编辑的数据网格（Editable DataGrid） jQuery EasyUI 扩展 用法 在 html 标签中创建数据网格（datagrid） Item ID Product ID List Price Unit Cost Attribute ..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 可编辑的树（Editable Tree） jQuery EasyUI 扩展 用法 创建树（Tree） $('#tt').etree({ url: 'tree_data.json', createUrl: ..., updateUrl: ..., destroyU..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - Portal（制作图表、列表、球形图等） jQuery EasyUI 扩展 用法 步骤 1：创建一个 HTML 页面 步骤 2：创建 Portal $('#pp').portal(options); 步骤 3：向 Portal 添加面板（panel）部件 // ..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - Ribbon jQuery EasyUI 扩展 包含 Ribbon 文件 如需创建 Ribbon 组件，则要包含 'ribbon.css'、'ribbon-icon.css' 和 'jquery.ribbon.js' 文件。 创建 Ribbo..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - RTL 支持（RTL support） jQuery EasyUI 扩展 包含 RTL 文件 如需启用 RTL 功能，则要包含 'easyui-rtl.css' 和 'easyui-rtl.js' 文件。 添加 RTL 属性 请记得向 &..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 主题（Themes） jQuery EasyUI 扩展 主题（Themes）允许您改变站点的外观和感观。使用主题可以节省设计的时间，让您腾出更多的时间进行开发。您也可以创建一个已有主题的子主题。 主题生成器（Theme Builder） jQuery UI 主题 许多扩展的主题是基于 jQuery UI 主题创建的..
pre { white-space: pre-wrap; } jQuery EasyUI 扩展 - 树形网格行拖放（Drag and Drop Rows in TreeGrid） jQuery EasyUI 扩展 用法 包含 'treegrid-dnd.js' 文件 启用拖拽与放置 Name Size Modified Date ..
pre { white-space: pre-wrap; } jQuery EasyUI 应用 - 创建 CRUD 应用 数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件： datagrid：向用户展示列表数据。 dialog：创建或编辑一条单一的用户信息。 ..
pre { white-space: pre-wrap; } jQuery EasyUI 应用 - 创建 CRUD 数据网格（DataGrid） 在上一章节中，我们使用对话框（dialog）组件创建了 CRUD 应用来创建和编辑用户信息。本教程我们将告诉您如何创建一个 CRUD 数据网格（DataGrid）。 我们将使用 可编辑的数据网格（DataGrid）插件 来完成这些 CRUD 操作动作。 步骤 1：在 HTML 标..
pre { white-space: pre-wrap; } jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 当切换数据网格视图（datagrid view）到 'detailview'，用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板（panel）中的编辑表单（form）提供一些合适的布局（layout）。在本教程中，我们使用数据网格（datagr..
pre { white-space: pre-wrap; } jQuery EasyUI 应用 - 创建 RSS Feed 阅读器 在本教程中，我们将通过 jQuery EasyUI 框架创建一个 RSS 阅读器。 我们将使用以下插件: layout：创建应用的用户界面。 datagrid：显示 RSS Feed 列表。 tree：显示 feed 频道。 步骤 1：创建布局（Layout） jQue..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格 本实例演示如何转换表格（table）为数据网格（datagrid）。 数据网格（datagrid）的列信息是定义在 <thead> 标记中，数据是定义在 <tbody> 标记中。确保为所有的数据列设置 field 名称，请看下面的实例：..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格（DataGrid）。通过复选框，用户将可以选择 选中/取消选中 网格行数据。 为了添加一个复选框列，我们仅仅需要添加一个列的 checkbox 属性，并设置它为 true。代码如下所示： Item ID Product ID ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 自定义分页 数据网格（datagrid）内置一个很好特性的分页功能，自定义也相当简单。在本教程中，我们将创建一个数据网格（datagrid），并在分页工具栏上添加一些自定义按钮。 创建数据网格（DataGrid） Item ID Product ID List Price ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格（datagrid）的。它可以使用户添加一个新行到数据网格（datagrid）。用户也可以更新一个或多个行。 本教程向您展示如何创建一个数据网格（datagrid）和内联编辑器。 创建数据网格（DataGrid） $(function(){ $('#tt..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 合并单元格 数据网格（datagrid）经常需要合并一些单元格。本教程将向您展示如何在数据网格（datagrid）中合并单元格。 为了合并数据网格（datagrid）单元格，只需简单地调用 'mergeCells' 方法，并传入合并信息参数，告诉数据网格（datagrid）如何合并单元格。在所有合并的单元格中..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求，您可以自定义数据网格（datagrid）的排序行为。 最基础的，用户可以在列上定义一个排序函数，函数名是 sorter。这个函数将接受两个值，返回值将如下： valueA > valueB => 返回 1 valueA < valueB => 返回 -1 ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 列运算 在本教程中，您将学习如何在可编辑的数据网格（datagrid）中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。 首先，创建一个可编辑的数据网格（datagrid）。这里我们创建了一些可编辑列，'listprice'、'amount' 和 'uni..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下，您可能需要为数据网格（datagrid）运用更灵活的布局。对于用户来说，卡片视图（Card View）是个不错的选择。这个工具可以在数据网格（datagrid）中迅速获取和显示数据。在数据网格（datagrid）的头部，您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图（..