jQuery EasyUI 数据网格 - 动态改变列

  数据网格(DataGrid)列可以使用 'columns' 属性简单地定义。如果您想动态地改变列,那根本没有问题。为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性。

  创建数据网格(DataGrid)

  

  url="data/datagrid_data.json"

  singleSelect="true" iconCls="icon-save">

  

  $('#tt').datagrid({

  columns:[[

  {field:'itemid',title:'Item ID',width:80},

  {field:'productid',title:'Product ID',width:80},

  {field:'attr1',title:'Attribute',width:200},

  {field:'status',title:'Status',width:80}

  ]]

  });

  运行网页,您将看见:

  可是有时候您想改变列,所以您需要写一些代码:

  $('#tt').datagrid({

  columns:[[

  {field:'itemid',title:'Item ID',width:80},

  {field:'productid',title:'Product ID',width:80},

  {field:'listprice',title:'List Price',width:80,align:'right'},

  {field:'unitcost',title:'Unit Cost',width:80,align:'right'},

  {field:'attr1',title:'Attribute',width:100},

  {field:'status',title:'Status',width:60}

  ]]

  });

  请记住,我们已经定义了其他属性,比如:url、width、height 等等。我们不需要再一次定义它们,我们定义那些我们需要改变的。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid6.zip

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

雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列的更多相关文章

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

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

  2. 扩展jQuery easyui datagrid增加动态改变列编辑的类型

    $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...

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

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

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

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

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

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

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

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

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

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

随机推荐

  1. libpng warning: iCCP: known incorrect sRGB profile

    参考  http://www.cocos2d-x.org/forums/6/topics/49093 解决 I got the following warnings in console when r ...

  2. Python生成器的原理及使用

    '''1,什么是生成器? 函数内但凡有一个yield关键字, 再调用函数就不会执行函数代码,得到的返回值就是一个生成器对象 生成器本身就是一种迭代器 next(g)过程: 会触发生成器g所对应的函数的 ...

  3. 《ASP.NET Core In Action》读书笔记系列二 ASP.NET Core 能用于什么样的应用,什么时候选择ASP.NET Core

    ASP.NET Core 能用于什么样的应用 ASP.NET Core 可以用作传统的web服务.RESTful服务.远程过程调用(RPC)服务.微服务,这归功于它的跨平台支持和轻量级设计.如下图所示 ...

  4. Delphi使用两种不同方法获取系统端口信息--(装载)

    Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...

  5. angular 4 实战开发--安卓兼容问题(1)

    首先我强调下我只是个菜鸟,大神不喜勿喷. 先介绍下项目背景,主要是公司的官网h5 ,架构用的是angular4 有点大材小用的赶脚,but ,公司要求. 在项目主功能做的差不多了.交给测试,这时候发现 ...

  6. JavaScript笔记1———js的一些常识

    一.什么是js? js是一种运行于解释器中的解释型脚本语言. 二.js的组成部分? 1.ECMAScript-----这是js的核心 2.DOM-----让js可以对网页进行操作(例:对页面元素的增. ...

  7. Java8-Map

    1.Staff实体 public class Staff { private String name; private int age; private String address; public ...

  8. pyautogui

    pip install PyGetWindow==0.0.1 pip install pyautogui https://www.cnblogs.com/dcb3688/p/4607980.html

  9. Spark大型电商项目实战-及其改良(4) 单独运行程序发现的问题

    之前的运行结果比对发现,有1个函数的作用在2个job里面是相同的,但是对应的计算时间却差太远 于是把4个job分开运行.虽说使用的数据不同,但是生成数据的生成器是相同的,数据排布差距不大,数据量也是相 ...

  10. Py 最全的常用正则表达式大全 ZZ

    很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们做个参考. ...