![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery EasyUI
文章平均质量分 70
智慧浩海
源码资源仅供个人研究参考学习,不得将内容资源用于商业或者非法用途,否则,一切后果请用户自负,暂不提供安装服务和技术支持。文档资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。
展开
-
jQuery EasyUI 扩展
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原创 2023-05-16 08:46:15 · 105 阅读 · 0 评论 -
jQuery EasyUI 表单 - 过滤下拉数据网格
下拉数据网格(Combogrid)组件应该定义 'idField' 和 'textField' 属性。下拉数据网格(Combogrid)组件可以以 'local' 或 'remote' 模式过滤记录。在远程(remote)模式中,当用户输入字符到 input 文本框中,下拉数据网格(Combogrid)将发送 'q' 参数到远程服务器。下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid)的。原创 2023-05-16 08:44:02 · 263 阅读 · 0 评论 -
jQuery EasyUI 表单 - 格式化下拉框
本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项。您可以在下拉框(combobox)上使用 formatter 函数来告诉它如何格式化每一个条目。创建图像下拉框(Combobox)原创 2023-05-15 09:11:13 · 181 阅读 · 0 评论 -
jQuery EasyUI 表单 - 创建树形下拉框
从上面的代码可以看到,我们为一个名为 'city' 的树形下拉框(ComboTree)字段设置了一个 url 属性,这个字段可以从远程服务器检索树形结构(Tree)数据。在本教程中,我们将要创建一个注册表单,带有 name、address、city 字段。city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市。树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox)。创建表单(Form)原创 2023-05-15 09:10:31 · 368 阅读 · 0 评论 -
jQuery EasyUI 表单 - 表单验证
本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox 插件来验证表单。我们添加一个样式名为 easyui-validatebox 到 input 标记,所以 input 标记将根据 validType 属性应用验证。当用户点击表单的 submit 按钮时,如果表单是无效的,我们应该阻止表单提交。如果表单是无效的,将显示一个提示信息。当表单无效时阻止表单提交。创建表单(form)原创 2023-05-15 09:08:55 · 242 阅读 · 0 评论 -
jQuery EasyUI 表单 - 创建异步提交表单
本教程向您展示如何通过 easyui 提交一个表单(Form)。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面。我们接收返回数据,并将它显示出来。改变为 Ajax 表单。创建表单(Form)原创 2023-05-15 09:09:19 · 148 阅读 · 0 评论 -
jQuery EasyUI 表单 - 创建异步提交表单
本教程向您展示如何通过 easyui 提交一个表单(Form)。我们创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面。我们接收返回数据,并将它显示出来。改变为 Ajax 表单。创建表单(Form)原创 2023-05-13 08:36:41 · 204 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
有时我们已经得到充分的分层树形网格(TreeGrid)的数据。我们还想让树形网格(TreeGrid)按层次惰性加载节点。首先,只加载顶层节点。然后点击节点的展开图标来加载它的子节点。本教程展示如何创建带有惰性加载特性的树形网格(TreeGrid)。为了放置加载子节点,我们需要为每个节点重命名 'children' 属性。正如下面的代码所示,'children' 属性重命名为 'children1'。当展开一个节点时,我们调用 'append' 方法来加载它的子节点数据。'loadFilter' 代码。原创 2023-05-13 08:37:03 · 191 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形网格添加分页
启用树形网格(TreeGrid)的分页特性,必须添加 'pagination:true' 属性,这样页面加载时就会向服务器发送 'page' 和 'rows' 参数。当展开一个行节点时,'id' 值是大于 0 的。当改变页码时,'id' 值应该被设置为 0 来放置加载子行。本教程展示如何向带有动态加载特性的树形网格(TreeGrid)添加分页。创建树形网格(TreeGrid)原创 2023-05-13 08:35:38 · 245 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形网格动态加载
动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid)。创建树形网格(TreeGrid)原创 2023-05-13 08:36:00 · 267 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 创建复杂树形网格
正如您所看到的,树形网格(Treegrid)的使用和数据网格(Datagrid)一样。请使用 'frozen' 属性来定义冻结列,列的 'colspan' 和 'rowspan' 属性来定义多行表头。树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共同的数据。创建树形网格(TreeGrid)原创 2023-05-12 14:18:23 · 157 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 创建基础树形网格
树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系。许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中。为了使用树形网格(TreeGrid),用户必须定义 'treeField' 属性,指明哪个字段作为树节点。本教程将向您展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览。创建树形网格(TreeGrid)原创 2023-05-12 14:16:59 · 267 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
通常表示一个树节点的方式就是在每一个节点存储一个 parentid。这个也被称为邻接列表模型。直接加载这些数据到树形菜单(Tree)是不允许的。但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单(Tree)数据格式。树(Tree)插件提供一个 'loadFilter' 选项函数,它可以实现这个功能。它提供一个机会来改变任何一个进入数据。本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单(Tree)。使用 'loadFilter' 创建树形菜单(Tree)原创 2023-05-12 14:17:14 · 194 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形菜单拖放控制
当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置。启用拖拽(drag)和放置(drop)操作,所有您需要做的就是把树(Tree)插件的 'dnd' 属性设置为 true。当在一个树节点上发生放置操作,'onDrop' 事件将被触发,您应该做一些或更多的操作,例如保存节点状态到远程服务器端,等等。创建树形菜单(Tree)原创 2023-05-12 14:15:47 · 155 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
easyui 的树(Tree)插件允许您创建一个复选框树。如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承。例如:点击 'tomato' 节点的复选框,您将会看见 'Vegetables' 节点现在仅仅选中部分。原创 2023-05-10 08:38:17 · 279 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 树形菜单添加节点
target 属性是一个 DOM 对象,引用选中节点,它的 append 方法将用于附加子节点。本教程向您展示如何附加节点到树形菜单(Tree)。我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。请注意,树(Tree)组件是定义在 标记中,树节点数据从 URL "tree_data.json" 加载。然后我们通过点击节点选择水果节点,我们将添加一些其他的水果数据。正如您所看到的,使用 easyui 的树(Tree)插件去附加节点不是那么的难。原创 2023-05-10 08:37:41 · 181 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 创建异步树形菜单
为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据。创建树形菜单(Tree)原创 2023-05-10 08:36:11 · 99 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在 元素中。无序列表的 元素提供一个基础的树(Tree)结构。每一个 元素将产生一个树节点,子 元素将产生一个父树节点。创建树形菜单(Tree)原创 2023-05-10 08:35:38 · 117 阅读 · 0 评论 -
jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在 元素中。无序列表的 元素提供一个基础的树(Tree)结构。每一个 元素将产生一个树节点,子 元素将产生一个父树节点。创建树形菜单(Tree)原创 2023-05-09 08:42:05 · 140 阅读 · 0 评论 -
jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。请注意,对话框(dialog)的工具栏(toolbar)和按钮(buttons)属性也可以通过 string 值指定,它将充当作为一个选择器去选择一个适当的 DIV 元素,并追加到工具栏(toolbar)或者按钮(buttons)的位置。原创 2023-05-09 08:42:16 · 292 阅读 · 0 评论 -
jQuery EasyUI 窗口 - 创建对话框
对话框(Dialog)是一个特殊的窗口(window),可以包含在顶部的工具栏和在底部的按钮。默认情况下,对话框(Dialog)不能改变大小,但是用户可以设置 resizable 属性为 true,使其可以改变大小。上面的代码我们创建了一个带有工具栏(toolbar)和按钮(button)的对话框(dialog)。这是对话框(dialog)、工具栏(toolbar)、内容(content)和按钮(buttons)的标准配置。准备工具栏(Toolbar)和按钮(Button)创建对话框(Dialog)原创 2023-05-09 08:40:54 · 195 阅读 · 0 评论 -
jQuery EasyUI 窗口 - 窗口与布局
作为一个实例,我们创建一个窗口(window),它包含两个部分,一个放置在左边一个放置在右边。在窗口(window)的左边我们创建一个树形菜单(tree),在窗口(window)的右边我们创建一个 tabs 容器。Layout 组件可以内嵌在窗口(window)中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码。jquery-easyui 框架帮我们在后台做渲染和调整尺寸。请看上面的代码,我们仅仅使用了 HTML 标记,一个复杂的布局窗口(window)将显示。原创 2023-05-09 08:40:19 · 208 阅读 · 0 评论 -
jQuery EasyUI 窗口 - 自定义窗口工具栏
如需自定义工具,设置该工具为 true 或者 false。比如我们希望定义一个窗口(window),仅仅拥有一个可关闭的工具。您应该设置任何其他工具为 false。我们可以在标记中或者通过 jQuery 代码定义 tools 属性。默认情况下,窗口(window)有四个工具:collapsible、minimizable、maximizable 和 closable。如果我们希望添加自定义的工具到窗口(window),我们可以使用 tools 属性。原创 2023-05-08 08:54:28 · 164 阅读 · 0 评论 -
jQuery EasyUI 窗口 - 创建简单窗口
现在运行测试页面,您会看见一个窗口(window)显示在您的屏幕上。我们不需要写任何的 javascript 代码。原创 2023-05-08 08:53:56 · 139 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
当滚动垂直滚动条时,数据网格(datagrid)执行 ajax 请求来加载和刷新现有的记录。在本教程中,我们将创建一个数据网格(datagrid),并运用虚拟滚动特性从服务器加载数据。为数据网格(datagrid)运用虚拟滚动特性,'view' 属性应该设置为 'scrollview'。请注意,这里我们不需要使用 pagination 属性,但 pageSize 属性是必需的,这样执行 ajax 请求时,数据网格(datagrid)将从服务器获取指定数量的记录。创建数据网格(DataGrid)原创 2023-05-08 08:52:06 · 389 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 创建子网格
当用户点击展开按钮('+')时,'onExpandRow' 事件将被触发。我们创建一个新的带有三列的子网格。当子网格数据加载成功时或者改变尺寸大小时,请记得对主网格调用 'fixDetailRowHeight' 方法。使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细,子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。为了使用详细视图,请记得在页面头部引用视图脚本文件。步骤 2:设置详细视图来显示子网格。步骤 1:创建主网格。原创 2023-05-05 08:42:36 · 149 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 扩展行显示细节
我们定义 'detailFormatter' 函数,告诉数据网格(datagrid)如何渲染详细视图。在这种情况下,我们返回一个简单的 '' 元素,它将充当详细内容的容器。请注意,详细信息为空。当用户点击展开按钮('+')时,onExpandRow 事件将被触发。数据网格(datagrid)可以改变它的视图(view)来显示不同的效果。使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-")。步骤 2:为数据网格(DataGrid)设置详细视图。原创 2023-05-05 08:41:59 · 259 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 创建属性网格
属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组。您可以简单地创建一个可编辑属性的分层(hierarchical)列表。正如您所看到的,属性网格(property grid)的创建不需要任何的 javascript 代码。您可以简单地继承扩展 editor 类型。准备 json 数据。原创 2023-05-05 08:41:53 · 150 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 创建页脚摘要
为了显示页脚行,您应该设置 showFooter 属性为 true,然后准备定义在数据网格(datagrid)数据中的页脚行。在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行。页脚行和显示数据行一样,所以您可以在页脚显示不止一个摘要信息。创建数据网格(DataGrid)原创 2023-05-04 08:56:20 · 161 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 创建自定义视图
在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说,卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据。从数据网格(datagrid)的默认视图继承,是个创建自定义视图的不错方法。我们将要创建一个卡片视图(Card View)来为每行显示一些信息。现在我们使用视图创建数据网格(datagrid)。创建卡片视图(Card View)原创 2023-05-04 08:55:48 · 137 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 合并单元格
为了合并数据网格(datagrid)单元格,只需简单地调用 'mergeCells' 方法,并传入合并信息参数,告诉数据网格(datagrid)如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被隐藏。当数据加载之后,我们合并数据网格(datagrid)中的一些单元格,所以放置下面的代码在 onLoadSuccess 回调函数中。数据网格(datagrid)经常需要合并一些单元格。本教程将向您展示如何在数据网格(datagrid)中合并单元格。创建数据网格(DataGrid)原创 2023-05-04 08:55:51 · 432 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 列运算
首先,创建一个可编辑的数据网格(datagrid)。这里我们创建了一些可编辑列,'listprice'、'amount' 和 'unitcost' 列定义为 numberbox 编辑类型。运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果。在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。为了在一些列之间创建运算关系,我们应该得到当前的 editors,并绑定一些事件到它们上面。原创 2023-05-04 08:54:41 · 82 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 扩展编辑器
一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据。所有的编辑器(editor)都定义在 $.fn.datagrid.defaults.editors 对象中,这个可以继承扩展以便支持新的编辑器(editor)。本教程将向您展示如何添加一个新的 numberspinner 编辑器到数据网格(datagrid)。我们分配 numberspinner 编辑器到 'unit cost' 字段。当开始编辑一行,用户可以通过 numberspinner 编辑器来编辑数据。原创 2023-04-29 08:15:05 · 213 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 启用行内编辑
为了启用数据网格行内编辑,您应该添加一个 editor 属性到列中。编辑器(editor)会告诉数据网格(datagrid)如何编辑字段及如何保存字段值。正如您所看到的,我们定义的三个编辑器(editor):text、combobox 和 checkbox。可编辑的功能是最近添加到数据网格(datagrid)的。它可以使用户添加一个新行到数据网格(datagrid)。用户也可以更新一个或多个行。本教程向您展示如何创建一个数据网格(datagrid)和内联编辑器。创建数据网格(DataGrid)原创 2023-04-29 08:14:32 · 450 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 自定义分页
数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单。在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上添加一些自定义按钮。正如您所看到的,我们首先得到数据网格(datagrid)的 pager 对象,然后重新创建分页(pagination)。我们隐藏页面列表,并添加三个新的按钮。请记得,设置 'pagination' 属性为 true,这样才会生成分页工具栏。创建数据网格(DataGrid)原创 2023-04-29 08:13:56 · 191 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 添加复选框
以上代码添加了一个带有 checkbox 属性的列,所以它将成为复选框列。如果 idField 属性已设置,数据网格(DataGrid)的选择集合将在不同的页面保持。本实例演示如何放置一个复选框列到数据网格(DataGrid)。通过复选框,用户将可以选择 选中/取消选中 网格行数据。为了添加一个复选框列,我们仅仅需要添加一个列的 checkbox 属性,并设置它为 true。原创 2023-04-29 08:12:58 · 507 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 创建列组合
为了创建列组合,您应该定义数据网格(datagrid)插件的 columns 数据。列的每个元素是定义一组可使用 rowspan 或 colspan 属性来进行组合的单元格。在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 listprice、unitcost、addr1、status 列组合在一个单一的列下。原创 2023-04-27 08:32:47 · 180 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 自定义排序
您可以从这段代码中看到,我们为 date 列创建了自定义的 sorter。日期的格式是 'dd/mm/yyyy',可以轻松的按年月日排序。最基础的,用户可以在列上定义一个排序函数,函数名是 sorter。如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为。valueA < valueB => 返回 -1。valueA > valueB => 返回 1。原创 2023-04-27 08:32:18 · 188 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 设置排序
我们定义一些可排序的列,包含 itemid、productid、listprice、unitcost 等等。'attr1' 列和 'status' 列不能排序。数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 sortable 属性为 true。本实例演示如何通过点击列表头来排序数据网格(DataGrid)。创建数据网格(DataGrid)原创 2023-04-27 08:29:33 · 441 阅读 · 0 评论 -
jQuery EasyUI 数据网格 - 格式化列
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色。为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。请注意,'listprice' 字段有一个 'formatter' 属性,用来指明格式化函数。创建数据网格(DataGrid)原创 2023-04-27 08:28:38 · 275 阅读 · 0 评论