jQuery EasyUI 数据网格 - 创建复杂工具栏

  数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件。 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 DIV 标签将成为数据网格(datagrid)工具栏的内容。 本教程将向您展示如何创建数据网格(datagrid)组件的复杂工具栏。

  创建工具栏(Toolbar)

  

  

  

  

  

  

  

  

  

  Date From:

  To:

  Language:

  

  url="data/combobox_data.json"

  valueField="id" textField="text">

  Search

  

  

  创建数据网格(DataGrid)

  

  url="data/datagrid_data.json"

  title="DataGrid - Complex Toolbar" toolbar="#tb"

  singleSelect="true" fitColumns="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Address Status

  正如您所看到的,数据网格(datagrid)的工具栏域对话框(dialog)相似。我们不需要写任何的 javascript 代码,就能创建带有复杂工具栏的数据网格(datagrid)。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid19.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要

    jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建子网格

    jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

随机推荐

  1. http协议状态码及其意义

    什么是状态码? 状态码的作用是:服务器告诉客户端,发生了什么事. 在http协议中状态码出现在http response 的第一行.它会返回一个三位数的状态码和状态信息.状态码为了便于程序进行处理,而 ...

  2. JDK8 HashMap--removeNode()移除节点方法

    /*删除节点*/ final Node<K,V> removeNode(int hash, Object key, Object value, boolean matchValue, bo ...

  3. runTime动态给类添加属性

    #项目中需要给系统类添加属性 #需要注意的地方就是.m中   set 和 get  ,get方法中方法名和添加的属性名一致,set中可以用驼峰 #import <UIKit/UIKit.h> ...

  4. Go 初体验 - 反射

    首先,反射虽强大, 但不可乱用,会有性能损耗 直接上代码: 输出: 代码并不难理解,不做解释

  5. es6 遍历总结

    1.for in / for of for in --> index是key值 var array = [1,2,3,4,5]; for(let index in array) { consol ...

  6. cycle标签和random两种方式美化表格

    一:cycle标签实现给表格变色 1. <style>标签里写好需要的颜色 2. 在要变色的地方(行/列)加固定的语句,按照顺序依次执行 代码: <!DOCTYPE html> ...

  7. 2017-2018-2 20155228 《网络对抗技术》 实验五:MSF基础应用

    2017-2018-2 20155228 <网络对抗技术> 实验五:MSF基础应用 1. 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需 ...

  8. SSM框架下 Failed to load resource: the server responded with a status of 404 (Not Found)错误

    这个错误提示的是js的引用路径有错: 1.检查应用路径是否正确(我的问题是路径是正确的但是去到页面就会提示404错误) 引用路径,最好都使用绝对路径 <script type="tex ...

  9. EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用

    EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用 在不想变的单元格前加$符号(列标和列数,两个都要加$),变成绝对引用,默认情况是相对引用 L4固定不变的方式:$L$4 M4固定不 ...

  10. SynchronousQueueDemo

    1.ArrayDeque, (数组双端队列) 2.PriorityQueue, (优先级队列) 3.ConcurrentLinkedQueue, (基于链表的并发队列) 4.DelayQueue, ( ...