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. Cocos Creator 动态改变sprite图片

    首先将存放图片最外层文件夹命名为resources changeBj: function(){ var url = 'globalUI/video/gVideoPlayClick'; var _thi ...

  2. Mybatis下的sql注入

    以前只知道mybatis框架下,order by后面接的是列名是不能用#{},这样不起效果,只能用${},这样的话就可能产生sql注入.后来发现其实还有另外两种情况也是类似的: 1.order by ...

  3. linux----------fedora 27 如何启用输入法

    1.安装完成以后是自带了输入法的,但是需要启用. 一定要放到第一个位置,然后注销或者重启.

  4. unity组件路径自动生成

    unity 有时候找路径太麻烦 写了一个自动生成脚本的工具 using System.Collections.Generic; using System.IO; using System.Text; ...

  5. iOS深浅拷贝

    浅拷贝:你和你的影子,你改变,你的影子发生改变 深拷贝:你的克隆人,你改变,你的克隆人并不会发生变化 eg: NSString *string = @"我是一个小白鼠"; NSSt ...

  6. Python--Virtualenv简明教程(转载https://www.jianshu.com/p/08c657bd34f1)

    virtualenv is a tool to create isolated Python environments. virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本 ...

  7. 用Volume在主机和Docker容器文件传输

    1.使用Volume在主机和容器之间传输文件. 在官方文档中可以看到使用如下命令即可创建一个volume: Create a volume: $ docker volume create my-vol ...

  8. P1186 玛丽卡

    题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道从一个城市到另一个城 ...

  9. 【Codeforces Round】 #432 (Div. 2) 题解

    Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)  A. Arpa and a research in Mexi ...

  10. Simple Factory Pattern

    Question: How do you achieve the functions of calculator by Object-Oriented ? Analysis: 1,The functi ...