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. Qt QLabel QTextBrowser 实现网址链接

    勾选属性: 并且编辑网址链接: QLabel--点击text属性的...:  QTextBrowser--双击控件

  2. PHPexcel(2)

    //导出 public function export(){ $xlsData = Db('ent_apply')->select(); Vendor('PHPExcel.PHPExcel'); ...

  3. 关于信号打断正在读取终端的read与select来监视0文件描述符的问题

    首先说一下对于这个问题外的一些话: 我觉得我们应该有种质疑的态度,因为接下来的这个问题就和我们平常所想的不一样. 介绍一下问题: 曾经一直听说信号可以打断一个正在阻塞的进程,但是今天我试了一下关于信号 ...

  4. 深入理解虚拟机之Java内存区域

    1 概述 对于Java程序员来说,在虚拟机自动内存管理机制下,不再需要像C/C++程序开发程序员这样为内一个new 操作去写对应的delete/free操作,不容易出现内存泄漏和内存溢出问题.正是因为 ...

  5. 在Ubuntu中,vi命令编辑异常

    在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由于Ubuntu预装的是vim-tiny,而我们需要使用的是vim-full, ...

  6. 304. Range Sum Query 2D - Immutable(动态规划)

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  7. 论文阅读(Lukas Neumann——【ICCV2017】Deep TextSpotter_An End-to-End Trainable Scene Text Localization and Recognition Framework)

    Lukas Neumann——[ICCV2017]Deep TextSpotter_An End-to-End Trainable Scene Text Localization and Recogn ...

  8. 如何在linux上查看tomcat的端口号

    1.先到tomcat配置文件查看tomcat的端口是什么,配置文件一般是:$CATALINA_HOME/conf/server这个文件,查找<Connector port="8080& ...

  9. C博客作业06--结构体&文件

    1.本章学习总结 1.1思维导图 1.2本章学习体会 学习了结构和文件,又是懵懵的课了,我的天啊.结构还好,题目集一出就做了,不是很难,感觉掌握的还可以,不过这只是感觉而已,等到真正来写大作业的时候又 ...

  10. [dart学习]第一篇:windows下安装配置dart编译环境,写出helloworld

    前言 博主非科班出身,平时多用C语言,最近想了解学习一门第二语言,看上了可用于移动开发的目前还小众一点dart,准备用一段比较长的时间来慢慢学习.理解. 关于dart语言不再详细介绍了,大家可以访问  ...