EasyUI
EasyUI
杨林伟
像火箭科学家一样思考!
展开
-
65EasyUI 表单 - 过滤下拉数据网格
下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid)的。下拉数据网格(Combogrid)组件可以过滤、分页,并具有其他一些数据网格(Datagrid)的功能。 本教程向您展示如何在一个下拉数据网格(Combogrid)组件中过滤数据记录。创建下拉数据网格(Combogrid)<input ...原创 2019-04-18 11:14:34 · 393 阅读 · 0 评论 -
64EasyUI 表单 - 格式化下拉框
下面展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项。您可以在下拉框(combobox)上使用 formatter 函数来告诉它如何格式化每一个条目。创建图像下拉框(Combobox) <input id="cc" style="width:100px" url="data/combobox_data.json" ...原创 2019-04-18 11:07:16 · 456 阅读 · 0 评论 -
63EasyUI 表单 - 创建树形下拉框
树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox)。它可以作为一个表单字段进行使用,可以提交给远程服务器。现在需要创建一个注册表单,带有 name、address、city 字段。city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市。创建表单(Form) <di...原创 2019-04-18 11:03:49 · 469 阅读 · 0 评论 -
62EasyUI 表单 - 表单验证
easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。创建表单(form)让我们创建一个简单的联系表单,带有 name、email、subject 和 message 字段: <div style="padding:3px 2px;bor...原创 2019-04-18 11:01:24 · 278 阅读 · 0 评论 -
61EasyUI 表单 - 创建异步提交表单
创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面。我们接收返回数据,并将它显示出来。创建表单(Form)<div style="padding:3px 2px;border-bottom:1px...原创 2019-04-18 10:58:22 · 365 阅读 · 0 评论 -
60EasyUI 树形菜单- 树形网格惰性加载节点
有时我们已经得到充分的分层树形网格(TreeGrid)的数据。 我们还想让树形网格(TreeGrid)按层次惰性加载节点。首先,只加载顶层节点。 然后点击节点的展开图标来加载它的子节点。 本教程展示如何创建带有惰性加载特性的树形网格(TreeGrid)。创建树形网格(TreeGrid) <table id="test" title="Folder Browser" class="e...原创 2019-04-18 10:51:05 · 404 阅读 · 0 评论 -
59EasyUI 树形菜单- 树形网格添加分页
本教程展示如何向带有动态加载特性的树形网格(TreeGrid)添加分页。创建树形网格(TreeGrid)启用树形网格(TreeGrid)的分页特性,必须添加 ‘pagination:true’ 属性,这样页面加载时就会向服务器发送 ‘page’ 和 ‘rows’ 参数。 <table title="Products" class="easyui-treegrid" style=...原创 2019-04-18 10:46:43 · 650 阅读 · 0 评论 -
58EasyUI 树形菜单- 树形网格动态加载
动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网格(TreeGrid)。创建树形网格(TreeGrid) <table title="Products" class="easyui-treegrid" style="width:700px;height:300px" url="t...原创 2019-04-18 10:43:39 · 529 阅读 · 0 评论 -
57EasyUI 树形菜单- 创建复杂树形网格
树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共同的数据。创建树形网格(TreeGrid) <table title="Complex TreeGrid" class="easyui-treegrid" style="width:550px;height:250px" ...原创 2019-04-18 10:41:21 · 383 阅读 · 0 评论 -
56EasyUI 树形菜单- 创建基础树形网格
树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系。许多属性继承至数据网格(DataGrid),可以用在树形网格(TreeGrid)中。为了使用树形网格(TreeGrid),用户必须定义 ‘treeField’ 属性,指明哪个字段作为树节点。下面展示如何使用树形网格(TreeGrid)组件设置一个文件夹浏览。创建树形网格(TreeGrid)...原创 2019-04-18 10:29:57 · 391 阅读 · 0 评论 -
55EasyUI 树形菜单- 树形菜单加载父/子节点
通常表示一个树节点的方式就是在每一个节点存储一个 parentid。 这个也被称为邻接列表模型。 直接加载这些数据到树形菜单(Tree)是不允许的。 但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单(Tree)数据格式。 树(Tree)插件提供一个 ‘loadFilter’ 选项函数,它可以实现这个功能。 它提供一个机会来改变任何一个进入数据。 下面展示如何使用 ‘loadFilter...原创 2019-04-18 09:59:44 · 546 阅读 · 0 评论 -
54EasyUI 树形菜单- 树形菜单拖放控制
当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置。启用拖拽(drag)和放置(drop)操作,所有您需要做的就是把树(Tree)插件的 ‘dnd’ 属性设置为 true。创建树形菜单(Tree)$('#tt').tree({ dnd: true, url: 'tree_data.json' });当在一...原创 2019-04-18 09:51:58 · 444 阅读 · 0 评论 -
53EasyUI 树形菜单- 创建带复选框的树形菜单
easyui 的树(Tree)插件允许您创建一个复选框树。如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承。例如:点击 ‘tomato’ 节点的复选框,您将会看见 ‘Vegetables’ 节点现在仅仅选中部分。创建复选框树 <ul id="tt" class="easyui-tree" url="data/tree_data.json" ...原创 2019-04-18 09:48:29 · 1057 阅读 · 0 评论 -
52EasyUI 树形菜单- 树形菜单添加节点
创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点。创建食品树首先,我们创建食品树,代码如下所示: <div style="width:200px;height:auto;border:1px solid #ccc;"> <ul id="tt" class="easyui-tree" url="tree_data.json"&g...原创 2019-04-18 09:47:00 · 602 阅读 · 0 评论 -
51EasyUI 树形菜单- 创建异步树形菜单
为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 ‘id’ 属性,这个将提交回服务器去检索子节点数据。创建树形菜单(Tree) <ul id="tt" class="easyui-tree" url="tree2_getdata.php"> </ul>服务器端代码 $id = isset($_POST['id']...原创 2019-04-18 09:40:25 · 359 阅读 · 0 评论 -
50EasyUI 树形菜单- 使用标记创建树形菜单
一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在 <ul> 元素中。无序列表的 <ul>元素提供一个基础的树(Tree)结构。每一个<li>元素将产生一个树节点,子 <ul>元素将产生一个父树节点。创建树形菜单(Tree): <ul class="easyui-tree"> &l...原创 2019-04-18 09:28:20 · 474 阅读 · 2 评论 -
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。创建对话框(Dialog) <div id="dd" class="easyui-dialog" title="My Dialog"...原创 2019-04-17 20:26:30 · 545 阅读 · 0 评论 -
48EasyUI 窗口- 创建对话框
对话框(Dialog)是一个特殊的窗口(window),可以包含在顶部的工具栏和在底部的按钮。默认情况下,对话框(Dialog)不能改变大小,但是用户可以设置 resizable 属性为 true,使其可以改变大小。创建对话框(Dialog)对话框(Dialog)非常简单,可以从 DIV 标记创建,如下所示: <div id="dd" class="easyui-dialog" ...原创 2019-04-17 20:23:48 · 365 阅读 · 0 评论 -
47EasyUI 窗口- 窗口与布局
Layout 组件可以内嵌在窗口(window)中。我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码。jquery-easyui 框架帮我们在后台做渲染和调整尺寸。作为一个实例,我们创建一个窗口(window),它包含两个部分,一个放置在左边一个放置在右边。在窗口(window)的左边我们创建一个树形菜单(tree),在窗口(window)的右边我们创建一个 tabs 容器。 ...原创 2019-04-17 20:21:32 · 347 阅读 · 0 评论 -
46EasyUI 窗口- 自定义窗口工具栏
默认窗口默认情况下,窗口(window)有四个工具:collapsible、minimizable、maximizable 和 closable。比如我们定义以下窗口(window): <div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;"...原创 2019-04-17 20:19:06 · 334 阅读 · 0 评论 -
45EasyUI 窗口- 创建简单窗口
创建一个窗口(window)非常简单,我们创建一个 DIV 标记:<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> Some Content.</div>如果您希望创建一个隐藏的窗口(window),记得设...原创 2019-04-17 20:15:56 · 316 阅读 · 0 评论 -
44EasyUI 数据网格- 添加分页组件
本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid)。创建数据网格(DataGrid)为了从远程服务器端加载数据,您应该设置 ‘url’ 属性,在您的服务器端应该返回 JSON 格式数据。请看数据网格(datagrid)文档得到更多关于它的数据格式信息。 <table id="tt" class="easyui-datagrid...原创 2019-04-17 19:44:20 · 354 阅读 · 0 评论 -
43EasyUI 数据网格- 使用虚拟滚动视图显示海量数据
数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页。 当滚动垂直滚动条时,数据网格(datagrid)执行 ajax 请求来加载和刷新现有的记录。 整个刷新的行为过程是平稳的没有闪烁。 在本教程中,我们将创建一个数据网格(datagrid),并运用虚拟滚动特性从服务器加载数据。创建数据网格(DataGrid)为数据网格(datagrid)运用虚拟滚动特性,‘vie...原创 2019-04-17 19:42:06 · 479 阅读 · 0 评论 -
42EasyUI 数据网格- 创建子网格
本文将向您展示如何在主网格上创建一个子网格。步骤 1:创建主网格<table id="dg" style="width:700px;height:250px" url="datagrid22_getdata.php" title="DataGrid - SubGrid" singleSelect="true" fitColumns="t...原创 2019-04-17 19:35:36 · 503 阅读 · 0 评论 -
41EasyUI 数据网格- 扩展行显示细节
数据网格(datagrid)可以改变它的视图(view)来显示不同的效果。使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 “-”)。用户可以展开行来显示附加的详细信息。步骤 1:创建数据网格(DataGrid) <table id="dg" style="width:500px;height:250px" url="da...原创 2019-04-17 19:17:06 · 576 阅读 · 0 评论 -
40EasyUI 数据网格- 创建属性网格
属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组。您可以简单地创建一个可编辑属性的分层(hierarchical)列表。设置 HTML <table id="tt" class="easyui-propertygrid" style="width:300px" url="prope...原创 2019-04-17 17:58:18 · 377 阅读 · 0 评论 -
39EasyUI 数据网格- 条件设置行背景颜色
当 listprice 值大于 50 时,我们将为该行设置不同的颜色。数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式。以下代码展示如何改变行样式: <table id="tt" title="DataGrid" style="width:600px;height:250px" url="data/datagrid_dat...原创 2019-04-17 17:55:27 · 405 阅读 · 0 评论 -
38EasyUI 数据网格- 创建页脚摘要
在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行。为了显示页脚行,您应该设置 showFooter 属性为 true,然后准备定义在数据网格(datagrid)数据中的页脚行。以下是示例数据: {"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total",...原创 2019-04-17 17:52:10 · 323 阅读 · 0 评论 -
37EasyUI 数据网格- 创建自定义视图
在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局。对于用户来说,卡片视图(Card View)是个不错的选择。这个工具可以在数据网格(datagrid)中迅速获取和显示数据。在数据网格(datagrid)的头部,您可以仅仅通过点击列的头部来排序数据。本教程将向您展示如何创建自定义卡片视图(Card View)。创建卡片视图(Card View)从数据网格(datag...原创 2019-04-17 17:49:20 · 445 阅读 · 0 评论 -
36EasyUI 数据网格- 合并单元格
为了合并数据网格(datagrid)单元格,只需简单地调用 ‘mergeCells’ 方法,并传入合并信息参数,告诉数据网格(datagrid)如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被隐藏。创建数据网格(DataGrid) <table id="tt" title="Merge Cells" style="width:550px;height:...原创 2019-04-17 17:46:00 · 323 阅读 · 0 评论 -
35EasyUI 数据网格- 列运算
一个运算列通常包含一些从一个或多个其他列运算的值。首先,创建一个可编辑的数据网格(datagrid)。这里我们创建了一些可编辑列,‘listprice’、‘amount’ 和 ‘unitcost’ 列定义为 numberbox 编辑类型。运算列是 ‘unitcost’ 字段,将是 listprice 乘以 amount 列的结果。 <table id="tt" style="widt...原创 2019-04-17 17:40:50 · 291 阅读 · 0 评论 -
34EasyUI 数据网格- 扩展编辑器
一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据。 所有的编辑器(editor)都定义在 $.fn.datagrid.defaults.editors 对象中,这个可以继承扩展以便支持新的编辑器(editor)。本教程将向您展示如何添加一个新的 numberspinner 编辑器到数据网格(datagrid)。继承扩展 numberspinner 编辑器...原创 2019-04-17 17:36:43 · 336 阅读 · 0 评论 -
33EasyUI 数据网格- 启用行内编辑
可编辑的功能是最近添加到数据网格(datagrid)的。它可以使用户添加一个新行到数据网格(datagrid)。用户也可以更新一个或多个行。创建数据网格(DataGrid)$(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit...原创 2019-04-17 17:32:07 · 456 阅读 · 0 评论 -
32EasyUI 数据网格- 自定义分页
数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单。在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上添加一些自定义按钮。创建数据网格(DataGrid) <table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px" ...原创 2019-04-17 17:26:33 · 393 阅读 · 0 评论 -
31EasyUI 数据网格- 添加复选框
本实例演示如何放置一个复选框列到数据网格(DataGrid)。通过复选框,用户将可以选择 选中/取消选中 网格行数据。为了添加一个复选框列,我们仅仅需要添加一个列的 checkbox 属性,并设置它为 true。代码如下所示: <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550...原创 2019-04-17 17:22:30 · 809 阅读 · 0 评论 -
30EasyUI 数据网格- 创建列组合
easyui 的数据网格(DataGrid)可以创建列组合,如下所示:在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 listprice、unitcost、addr1、status 列组合在一个单一的列下。为了创建列组合,您应该定义数据网格(datagrid)插件的 columns 数据。列的每个元素是定义一组可使用 rowspan 或 colspan 属性来进行...原创 2019-04-17 17:17:33 · 444 阅读 · 0 评论 -
29EasyUI 数据网格- 自定义排序
如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为。最基础的,用户可以在列上定义一个排序函数,函数名是 sorter。这个函数将接受两个值,返回值将如下:valueA > valueB => 返回 1valueA < valueB => 返回 -1自定义排序代码<table id="tt"></table&...原创 2019-04-17 17:14:38 · 436 阅读 · 0 评论 -
28EasyUI 数据网格- 设置排序
本实例演示如何通过点击列表头来排序数据网格(DataGrid)。数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 sortable 属性为 true。创建数据网格(DataGrid) <table id="tt" class="easyui-datagrid" style="width:600px;heig...原创 2019-04-17 17:12:13 · 504 阅读 · 0 评论 -
27EasyUI 数据网格- 格式化列
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色。为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。这个格式化函数包含三个参数:value:当前列对应字段值。row:当前的行记录数据。index:当前的行下标。创建数据网格(DataGrid) ...原创 2019-04-17 17:09:26 · 298 阅读 · 0 评论 -
26EasyUI 数据网格- 动态改变列
数据网格(DataGrid)列可以使用 ‘columns’ 属性简单地定义。如果您想动态地改变列,那根本没有问题。为了改变列, 您可以重新调用datagrid 方法,并传递一个新的 columns 属性。创建数据网格(DataGrid)代码:<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="wid...原创 2019-04-17 17:06:45 · 319 阅读 · 0 评论