Learning Path
浏览 jQuery EasyUI 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
118
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中，我们将向您展示如何在数据网格（datagrid）页脚显示摘要信息行。 为了显示页脚行，您应该设置 showFooter 属性为 true，然后准备定义在数据网格（datagrid）数据中的页脚行。以下是示例数据： {'total':1,'rows':[{&..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格（datagrid）组件的行样式。当 listprice 值大于 50 时，我们将为该行设置不同的颜色。 数据网格（datagrid）的 rowStyler 函数的设计目的是允许您自定义行样式。以下代码展示如何改变行样式： Item ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格（datagrid）的工具栏（toolbar）可以包含按钮及其他组件。 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局，该 DIV 标签将成为数据网格（datagrid）工具栏的内容。 本教程将向您展示如何创建数据网格（datagrid）组件的复杂工具栏。 创建工具栏（Toolbar）..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据，如何添加分页组件（pagination）到数据网格（datagrid）。 创建数据网格（DataGrid） 为了从远程服务器端加载数据，您应该设置 'url' 属性，在您的服务器端应该返回 JSON 格式数据。请看数据网格（datagrid）文档得到更多关于..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建属性网格 属性网格（property grid）带有一个内置的 expand（展开）/collapse（合并） 按钮，可以简单地为行分组。您可以简单地创建一个可编辑属性的分层（hierarchical）列表。 设置 HTML 准备 json 数据 [ {'name':'Na..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 扩展行显示细节 数据网格（datagrid）可以改变它的视图（view）来显示不同的效果。使用详细视图，数据网格（datagrid）可以在数据行的左边显示展开按钮（'+' 或者 '-'）。用户可以展开行来显示附加的详细信息。 步骤 1：创建数据网格（DataGrid） ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建子网格 使用数据网格（datagrid）的详细视图，用户可以展开一行来显示附加的详细信息。 任何内容都可以加载作为行详细，子网格也可以动态加载。 本教程将向您展示如何在主网格上创建一个子网格。 步骤 1：创建主网格 Item ID Product ID List Price Un..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器（editor）添加到数据网格（datagrid），以便用户编辑数据。 所有的编辑器（editor）都定义在 $.fn.datagrid.defaults.editors 对象中，这个可以继承扩展以便支持新的编辑器（editor）。 本教程将向您展示如何添加一个新的 numberspinner 编辑..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据，并将它们显示在数据网格（datagrid）中。然后演示如何根据用户输入的搜索关键词搜寻显示结果。 创建数据网格（DataGrid） 创建带有分页功能的数据网格（datagrid），然后添加工具栏到其中。 Item ID Product ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格（datagrid）的虚拟滚动特性可以用来显示大数量的记录而不需要分页。 当滚动垂直滚动条时，数据网格（datagrid）执行 ajax 请求来加载和刷新现有的记录。 整个刷新的行为过程是平稳的没有闪烁。 在本教程中，我们将创建一个数据网格（datagrid），并运用虚拟滚动特性从服务器加..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 取得选中行数据 本实例演示如何取得选中行数据。 数据网格（datagrid）组件包含两种方法来检索选中行数据： getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。 getSelections：取得所有选中行数据，返回元素记录的数组数据。 创建数据网格（DataGrid） ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 添加工具栏 本实例演示如何添加工具栏（toolbar）到数据网格（datagrid）。 创建数据网格（DataGrid） Item ID Product ID List Price Unit Cost Attribute Stauts ..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列，当用户在网格上移动水平滚动条时，冻结列不能滚动到视图的外部。 为了冻结列，您需要定义 frozenColumns 属性。frozenColumn 属性和 columns 属性一样。 $('#tt').datagrid({ title:'Froze..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 动态改变列 数据网格（DataGrid）列可以使用 'columns' 属性简单地定义。如果您想动态地改变列，那根本没有问题。为了改变列，您可以重新调用datagrid 方法，并传递一个新的 columns 属性。 创建数据网格（DataGrid） $('#tt')...
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据，并使用自定义列的 formatter，如果价格小于 20 就将文本变为红色。 为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数： value：当前列对应字段值。 row：..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格（DataGrid）。 数据网格（DataGrid）的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的，列是不能排序的，除非您设置 sortable 属性为 true。 创建数据网格（DataGrid） Item ID P..
pre { white-space: pre-wrap; } jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格（DataGrid）可以创建列组合，如下所示： 在本实例中，我们使用平面数据来填充数据网格（DataGrid）的数据，并把 listprice、unitcost、addr1、status 列组合在一个单一的列下。 为了创建列组合，您应该定义数据网格（datagrid）插件的 columns..
pre { white-space: pre-wrap; } jQuery EasyUI 拖放 - 基本的拖动和放置 本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。 首先，我们创建三个 <div> 元素： 对于第一个 <div> 元素，我们通过默认值让其可以拖动。 $('#d..
pre { white-space: pre-wrap; } jQuery EasyUI 拖放 - 创建拖放的购物车 如果您能够通过您的 Web 应用简单地实现拖动和放置，您就会知道一些特别的东西。通过 jQuery EasyUI，我们在 Web 应用中可以简单地实现拖放功能。 在本教程中，我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面。购物篮中的物品和价格将更新。 显示页面上的商品 ..
pre { white-space: pre-wrap; } jQuery EasyUI 拖放 - 创建学校课程表 本教程将向您展示如何使用 jQuery EasyUI 创建一个学校课程表。 我们将创建两个表格：在左侧显示学校科目，在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个 <div class='item'> 元素，时间表单元格是一个 &..
pre { white-space: pre-wrap; } jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单（Form）。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们..
pre { white-space: pre-wrap; } jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框（ComboTree）是一个带有下列树形结构（Tree）的下拉框（ComboBox）。它可以作为一个表单字段进行使用，可以提交给远程服务器。 在本教程中，我们将要创建一个注册表单，带有 name、address、city 字段。city 字段是一个树形下拉框（ComboTree）字段，在里面用户可以下拉树面..
pre { white-space: pre-wrap; } jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。 创建表单（form） 让我们创建一个简单的联系表单，带有 name、email、sub..
pre { white-space: pre-wrap; } jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框（Combobox），让它在下拉框中显示图片项。您可以在下拉框（combobox）上使用 formatter 函数来告诉它如何格式化每一个条目。 创建图像下拉框（Combobox） $('#cc').combobox({ format..