unber的博客

Portal（制作图表、列表、球形图等）数据网格视图（DataGrid View）可编辑的数据网格（Editable DataGrid）可编辑的树（Editable Tree）数据网格行过滤（DataGrid Filter Row）数据网格行拖放（Drag and Drop Rows in DataGrid）树形网格行拖放（Drag and Drop Rows in TreeGrid）主题（Themes）DWR 加载器（DWR Loader）RTL 支持（RTL support）Ribbon

下拉数据网格（Combogrid）组件应该定义 'idField' 和 'textField' 属性。下拉数据网格（Combogrid）组件可以以 'local' 或 'remote' 模式过滤记录。在远程（remote）模式中，当用户输入字符到 input 文本框中，下拉数据网格（Combogrid）将发送 'q' 参数到远程服务器。下拉数据网格（Combogrid）组件和下拉框（Combobox）组件的共同点是，除了都具有下拉面板以外，它们都是基于数据网格（Datagrid）的。

本教程向您展示如何创建一个简单的下拉框（Combobox），让它在下拉框中显示图片项。您可以在下拉框（combobox）上使用 formatter 函数来告诉它如何格式化每一个条目。创建图像下拉框（Combobox）

从上面的代码可以看到，我们为一个名为 'city' 的树形下拉框（ComboTree）字段设置了一个 url 属性，这个字段可以从远程服务器检索树形结构（Tree）数据。在本教程中，我们将要创建一个注册表单，带有 name、address、city 字段。city 字段是一个树形下拉框（ComboTree）字段，在里面用户可以下拉树面板（tree panel），并选择一个特定的城市。树形下拉框（ComboTree）是一个带有下列树形结构（Tree）的下拉框（ComboBox）。创建表单（Form）

本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中，我们将创建一个联系表单，并应用 validatebox 插件来验证表单。我们添加一个样式名为 easyui-validatebox 到 input 标记，所以 input 标记将根据 validType 属性应用验证。当用户点击表单的 submit 按钮时，如果表单是无效的，我们应该阻止表单提交。如果表单是无效的，将显示一个提示信息。当表单无效时阻止表单提交。创建表单（form）

本教程向您展示如何通过 easyui 提交一个表单（Form）。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。改变为 Ajax 表单。创建表单（Form）

本教程向您展示如何通过 easyui 提交一个表单（Form）。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单（form）插件来改变表单（form）为 ajax 表单（form）。表单（form）提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。改变为 Ajax 表单。创建表单（Form）

有时我们已经得到充分的分层树形网格（TreeGrid）的数据。我们还想让树形网格（TreeGrid）按层次惰性加载节点。首先，只加载顶层节点。然后点击节点的展开图标来加载它的子节点。本教程展示如何创建带有惰性加载特性的树形网格（TreeGrid）。为了放置加载子节点，我们需要为每个节点重命名 'children' 属性。正如下面的代码所示，'children' 属性重命名为 'children1'。当展开一个节点时，我们调用 'append' 方法来加载它的子节点数据。'loadFilter' 代码。

启用树形网格（TreeGrid）的分页特性，必须添加 'pagination:true' 属性，这样页面加载时就会向服务器发送 'page' 和 'rows' 参数。当展开一个行节点时，'id' 值是大于 0 的。当改变页码时，'id' 值应该被设置为 0 来放置加载子行。本教程展示如何向带有动态加载特性的树形网格（TreeGrid）添加分页。创建树形网格（TreeGrid）

动态加载树形网格有助于从服务器上加载部分的行数据，避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格（TreeGrid）。创建树形网格（TreeGrid）

正如您所看到的，树形网格（Treegrid）的使用和数据网格（Datagrid）一样。请使用 'frozen' 属性来定义冻结列，列的 'colspan' 和 'rowspan' 属性来定义多行表头。树形网格（TreeGrid）可以展示有限空间上带有多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中，以便组织共同的数据。创建树形网格（TreeGrid）

树形网格（TreeGrid）组件从数据网格（DataGrid）继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格（DataGrid），可以用在树形网格（TreeGrid）中。为了使用树形网格（TreeGrid），用户必须定义 'treeField' 属性，指明哪个字段作为树节点。本教程将向您展示如何使用树形网格（TreeGrid）组件设置一个文件夹浏览。创建树形网格（TreeGrid）

通常表示一个树节点的方式就是在每一个节点存储一个 parentid。这个也被称为邻接列表模型。直接加载这些数据到树形菜单（Tree）是不允许的。但是我们可以在加载树形菜单之前，把它转换为标准标准的树形菜单（Tree）数据格式。树（Tree）插件提供一个 'loadFilter' 选项函数，它可以实现这个功能。它提供一个机会来改变任何一个进入数据。本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单（Tree）。使用 'loadFilter' 创建树形菜单（Tree）

当在一个应用中使用树（Tree）插件，拖拽（drag）和放置（drop）功能要求允许用户改变节点位置。启用拖拽（drag）和放置（drop）操作，所有您需要做的就是把树（Tree）插件的 'dnd' 属性设置为 true。当在一个树节点上发生放置操作，'onDrop' 事件将被触发，您应该做一些或更多的操作，例如保存节点状态到远程服务器端，等等。创建树形菜单（Tree）

easyui 的树（Tree）插件允许您创建一个复选框树。如果您点击一个节点的复选框，这个点击的节点信息将向上和向下继承。例如：点击 'tomato' 节点的复选框，您将会看见 'Vegetables' 节点现在仅仅选中部分。

target 属性是一个 DOM 对象，引用选中节点，它的 append 方法将用于附加子节点。本教程向您展示如何附加节点到树形菜单（Tree）。我们将创建一个包含水果和蔬菜节点的食品树，然后添加一些其他水果到已存在的水果节点。请注意，树（Tree)组件是定义在 标记中，树节点数据从 URL "tree_data.json" 加载。然后我们通过点击节点选择水果节点，我们将添加一些其他的水果数据。正如您所看到的，使用 easyui 的树（Tree）插件去附加节点不是那么的难。

为了创建异步的树形菜单（Tree），每一个树节点必须要有一个 'id' 属性，这个将提交回服务器去检索子节点数据。创建树形菜单（Tree）

一个树形菜单（Tree）可以从标记创建。easyui 树形菜单（Tree）也可以定义在 元素中。无序列表的 元素提供一个基础的树（Tree）结构。每一个 元素将产生一个树节点，子 元素将产生一个父树节点。创建树形菜单（Tree）

一个树形菜单（Tree）可以从标记创建。easyui 树形菜单（Tree）也可以定义在 元素中。无序列表的 元素提供一个基础的树（Tree）结构。每一个 元素将产生一个树节点，子 元素将产生一个父树节点。创建树形菜单（Tree）

您可以创建一个带有工具栏（toolbar）和按钮（button）的对话框（dialog），可以从 HTML 标记创建。这个教程描述如何添加工具栏（toolbar）和按钮（button）到对话框（dialog），没有任何的 javascript 代码。请注意，对话框（dialog）的工具栏（toolbar）和按钮（buttons）属性也可以通过 string 值指定，它将充当作为一个选择器去选择一个适当的 DIV 元素，并追加到工具栏（toolbar）或者按钮（buttons）的位置。

对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。默认情况下，对话框（Dialog）不能改变大小，但是用户可以设置 resizable 属性为 true，使其可以改变大小。上面的代码我们创建了一个带有工具栏（toolbar）和按钮（button）的对话框（dialog）。这是对话框（dialog）、工具栏（toolbar）、内容（content）和按钮（buttons）的标准配置。准备工具栏（Toolbar）和按钮（Button）创建对话框（Dialog）

作为一个实例，我们创建一个窗口（window），它包含两个部分，一个放置在左边一个放置在右边。在窗口（window）的左边我们创建一个树形菜单（tree），在窗口（window）的右边我们创建一个 tabs 容器。Layout 组件可以内嵌在窗口（window）中。我们可以创建一个复杂的布局窗口，甚至不需要写任何的 js 代码。jquery-easyui 框架帮我们在后台做渲染和调整尺寸。请看上面的代码，我们仅仅使用了 HTML 标记，一个复杂的布局窗口（window）将显示。

如需自定义工具，设置该工具为 true 或者 false。比如我们希望定义一个窗口（window），仅仅拥有一个可关闭的工具。您应该设置任何其他工具为 false。我们可以在标记中或者通过 jQuery 代码定义 tools 属性。默认情况下，窗口（window）有四个工具：collapsible、minimizable、maximizable 和 closable。如果我们希望添加自定义的工具到窗口（window），我们可以使用 tools 属性。

现在运行测试页面，您会看见一个窗口（window）显示在您的屏幕上。我们不需要写任何的 javascript 代码。

当滚动垂直滚动条时，数据网格（datagrid）执行 ajax 请求来加载和刷新现有的记录。在本教程中，我们将创建一个数据网格（datagrid），并运用虚拟滚动特性从服务器加载数据。为数据网格（datagrid）运用虚拟滚动特性，'view' 属性应该设置为 'scrollview'。请注意，这里我们不需要使用 pagination 属性，但 pageSize 属性是必需的，这样执行 ajax 请求时，数据网格（datagrid）将从服务器获取指定数量的记录。创建数据网格（DataGrid）

当用户点击展开按钮（'+'）时，'onExpandRow' 事件将被触发。我们创建一个新的带有三列的子网格。当子网格数据加载成功时或者改变尺寸大小时，请记得对主网格调用 'fixDetailRowHeight' 方法。使用数据网格（datagrid）的详细视图，用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细，子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。为了使用详细视图，请记得在页面头部引用视图脚本文件。步骤 2：设置详细视图来显示子网格。步骤 1：创建主网格。

我们定义 'detailFormatter' 函数，告诉数据网格（datagrid）如何渲染详细视图。在这种情况下,我们返回一个简单的 '' 元素，它将充当详细内容的容器。请注意，详细信息为空。当用户点击展开按钮（'+'）时，onExpandRow 事件将被触发。数据网格（datagrid）可以改变它的视图（view）来显示不同的效果。使用详细视图，数据网格（datagrid）可以在数据行的左边显示展开按钮（"+" 或者 "-"）。步骤 2：为数据网格（DataGrid）设置详细视图。

属性网格（property grid）带有一个内置的 expand（展开）/collapse（合并） 按钮，可以简单地为行分组。您可以简单地创建一个可编辑属性的分层（hierarchical）列表。正如您所看到的，属性网格（property grid）的创建不需要任何的 javascript 代码。您可以简单地继承扩展 editor 类型。准备 json 数据。

为了显示页脚行，您应该设置 showFooter 属性为 true，然后准备定义在数据网格（datagrid）数据中的页脚行。在本教程中，我们将向您展示如何在数据网格（datagrid）页脚显示摘要信息行。页脚行和显示数据行一样，所以您可以在页脚显示不止一个摘要信息。创建数据网格（DataGrid）

在不同的情况下，您可能需要为数据网格（datagrid）运用更灵活的布局。对于用户来说，卡片视图（Card View）是个不错的选择。这个工具可以在数据网格（datagrid）中迅速获取和显示数据。在数据网格（datagrid）的头部，您可以仅仅通过点击列的头部来排序数据。从数据网格（datagrid）的默认视图继承，是个创建自定义视图的不错方法。我们将要创建一个卡片视图（Card View）来为每行显示一些信息。现在我们使用视图创建数据网格（datagrid）。创建卡片视图（Card View）

为了合并数据网格（datagrid）单元格，只需简单地调用 'mergeCells' 方法，并传入合并信息参数，告诉数据网格（datagrid）如何合并单元格。在所有合并的单元格中，除了第一个单元格，其它单元格在合并后被隐藏。当数据加载之后，我们合并数据网格（datagrid）中的一些单元格，所以放置下面的代码在 onLoadSuccess 回调函数中。数据网格（datagrid）经常需要合并一些单元格。本教程将向您展示如何在数据网格（datagrid）中合并单元格。创建数据网格（DataGrid）

首先，创建一个可编辑的数据网格（datagrid）。这里我们创建了一些可编辑列，'listprice'、'amount' 和 'unitcost' 列定义为 numberbox 编辑类型。运算列是 'unitcost' 字段，将是 listprice 乘以 amount 列的结果。在本教程中，您将学习如何在可编辑的数据网格（datagrid）中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。为了在一些列之间创建运算关系，我们应该得到当前的 editors，并绑定一些事件到它们上面。

一些常见的编辑器（editor）添加到数据网格（datagrid），以便用户编辑数据。所有的编辑器（editor）都定义在 $.fn.datagrid.defaults.editors 对象中，这个可以继承扩展以便支持新的编辑器（editor）。本教程将向您展示如何添加一个新的 numberspinner 编辑器到数据网格（datagrid）。我们分配 numberspinner 编辑器到 'unit cost' 字段。当开始编辑一行，用户可以通过 numberspinner 编辑器来编辑数据。

为了启用数据网格行内编辑，您应该添加一个 editor 属性到列中。编辑器（editor）会告诉数据网格（datagrid）如何编辑字段及如何保存字段值。正如您所看到的，我们定义的三个编辑器（editor）：text、combobox 和 checkbox。可编辑的功能是最近添加到数据网格（datagrid）的。它可以使用户添加一个新行到数据网格（datagrid）。用户也可以更新一个或多个行。本教程向您展示如何创建一个数据网格（datagrid）和内联编辑器。创建数据网格（DataGrid）

数据网格（datagrid）内置一个很好特性的分页功能，自定义也相当简单。在本教程中，我们将创建一个数据网格（datagrid），并在分页工具栏上添加一些自定义按钮。正如您所看到的，我们首先得到数据网格（datagrid）的 pager 对象，然后重新创建分页（pagination）。我们隐藏页面列表，并添加三个新的按钮。请记得，设置 'pagination' 属性为 true，这样才会生成分页工具栏。创建数据网格（DataGrid）

以上代码添加了一个带有 checkbox 属性的列，所以它将成为复选框列。如果 idField 属性已设置，数据网格（DataGrid）的选择集合将在不同的页面保持。本实例演示如何放置一个复选框列到数据网格（DataGrid）。通过复选框，用户将可以选择 选中/取消选中 网格行数据。为了添加一个复选框列，我们仅仅需要添加一个列的 checkbox 属性，并设置它为 true。

为了创建列组合，您应该定义数据网格（datagrid）插件的 columns 数据。列的每个元素是定义一组可使用 rowspan 或 colspan 属性来进行组合的单元格。在本实例中，我们使用平面数据来填充数据网格（DataGrid）的数据，并把 listprice、unitcost、addr1、status 列组合在一个单一的列下。

您可以从这段代码中看到，我们为 date 列创建了自定义的 sorter。日期的格式是 'dd/mm/yyyy'，可以轻松的按年月日排序。最基础的，用户可以在列上定义一个排序函数，函数名是 sorter。如果默认的排序行为不满足您的需求，您可以自定义数据网格（datagrid）的排序行为。valueA < valueB => 返回 -1。valueA > valueB => 返回 1。

我们定义一些可排序的列，包含 itemid、productid、listprice、unitcost 等等。'attr1' 列和 'status' 列不能排序。数据网格（DataGrid）的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的，列是不能排序的，除非您设置 sortable 属性为 true。本实例演示如何通过点击列表头来排序数据网格（DataGrid）。创建数据网格（DataGrid）

以下实例格式化在 easyui DataGrid 里的列数据，并使用自定义列的 formatter，如果价格小于 20 就将文本变为红色。为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。请注意，'listprice' 字段有一个 'formatter' 属性，用来指明格式化函数。创建数据网格（DataGrid）