文档章节

编辑 Ext 表格(一)——— 动态添加删除行列

丶大灰狼灬
 丶大灰狼灬
发布于 2016/07/14 09:35
字数 488
阅读 57
收藏 1

1. 在 ext 表格中,

动态添加行主要和表格绑定的 store 有关,

通过对 store 数据集进行添加或删除,

就能实现表格行的动态添加删除。

 

(1) 动态添加表格的行 

gridStore.add({});

 

(2) 动态删除表格的行 

gridStore.removeAt(gridStore.count() - 1);

 

2. 在 ext 表格中,

动态添加列主要通过修改表格绑定的 column 元素,

通过对 column 元素集进行添加或删除,

然后重新渲染表格,

就能实现表格行的动态添加删除。

(1)动态添加表格的列

>> 定义表格

var gridTable = Ext.create('Ext.grid.Panel', {

    id: 'gridTable',

    region: 'center',

    layout: 'fit',

    columns: cols,

    store: gridStore,

    autoScroll: true,

});

 

>> 添加列

cols.push({  

    text: '列',

    dataIndex: 'col',

    width: 120,

    sortable: false,

    menuDisabled: true,

});

gridTable.reconfigure(gridStore, cols);  // 调用该方法重新配置的时候,会重新载入 store

 

(2)动态删除表格的列

cols.pop();

gridTable.reconfigure(gridStore, cols);

 

下面附上完整的 js 代码:

<!-- 数据定义 -->
<script type="text/javascript">
  var data;  // 表格数据
  var cols;   // 表格列

  var gridStore = Ext.create('Ext.data.Store', {
    fields: ['Name']
  });
</script>

<!-- 事件定义 -->
<script type="text/javascript">
  // 初始化整个页面
  function onInit() {
    onLoadData();
    onInitVar();
    onInitColumn();
  };

  // 请求加载表格数据
  function onLoadData() {
    data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];
      gridStore.loadData(data);
    };

  // 初始化页面的变量参数
  function onInitVar() {
    cols = [
      {
        xtype: 'rownumberer',
        text: '序号',
        align: 'center',
        minWidth: 50,
        maxWidth: 50,
      },      
      {      
        text: '姓名',
        dataIndex: 'Name',
        minWidth: 85,
        maxWidth: 85,
        sortable: false,
        menuDisabled: true,
      }
    ];
  };

  // 初始化列
  function onInitColumn() {
    gridTable.reconfigure(gridStore, cols);
  };

  // 添加行
  function onAddRow() {
    gridStore.add({});
  };
  // 删除行
  function onDelRow() { 
    gridStore.removeAt(gridStore.count() - 1);
  };
  // 添加列
  function onAddColumn() {
    cols.push({
      text: '列',
      dataIndex: 'col',
      width: 120,
      sortable: false,
      menuDisabled: true,
    });

    gridTable.reconfigure(gridStore, cols);
  };
  // 删除列
  function onDelColumn() {
    cols.pop();
    gridTable.reconfigure(gridStore, cols);
  };
</script>

<!-- 面板定义 -->
<script type="text/javascript">
  var toolbar = Ext.create('Ext.form.Panel', {
    id: 'tool-bar',
    region: 'north',
    bbar: [
      {
        xtype: 'button',
        text: '添加行',
        handler: onAddRow
      },
      {
        xtype: 'button',
        text: '删除行',
        handler: onDelRow
      },
      {
        xtype: 'button',
        text: '添加列',
        handler: onAddColumn
      },
      {
        xtype: 'button',
        text: '删除列',
        handler: onDelColumn
      }
    ]
  });
  
  var gridTable = Ext.create('Ext.grid.Panel', {
    id: 'gridTable',
    region: 'center',
    layout: 'fit',
    columns: cols,
    store: gridStore,
    autoScroll: true,
  });
</script>

<!-- 脚本入口 -->
<script type="text/javascript">
  Ext.onReady(function () {
    Ext.create('Ext.Viewport', {
      id: 'iframe',
      layout: 'border',
      items: [
        toolbar,
        gridTable,
      ]
    });

    onInit();
  });
</script>

 

© 著作权归作者所有

丶大灰狼灬
粉丝 0
博文 2
码字总数 1238
作品 0
广州
程序员
私信 提问
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.8K
1
UEditor 1.2.5 正式版发布!

百度开源富文本编辑器UEditor1.2.5正式发布。 1.2.5版本除修复已知bug及优化性能之外,最主要的特点是表格及列表功能的大幅度优化改进。从这两个功能角度来说,UEditor几可媲美office word中...

taoqili
2013/01/31
5.4K
15
BootStrap中的JavaScript

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利) 前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧...

myy629464
2017/11/12
0
0
[ExtJs]Grid合计(三)

一、方法一     通过修改JsonReader并使用插件GroupSummary,文章:ExtJs Grid 合计 [Ext | GridPanel | GridSummary] 二、方法二     先在后台 (C#服务端)统计好,然后添加DataTab...

walb呀
2017/12/06
0
0
Jquery创建表格、填充表格数据、重置表格

1.Jquery创建表格 附:label和data的数据结构 2.Jquery填充表格数据 填充表格数据前提是:已经创建好了html表格行列元素。 如:table.html 附:table_data.json...

LittleNewbie
2016/10/28
521
0

没有更多内容

加载失败,请刷新页面

加载更多

P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
4
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
4
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
2
0
系统监控-与应用高度耦合的Javamelody监控工具

1. 为什么不使用Javamelody? 与应用高度耦合,需要在项目中配置相关的配置文件和引入对应的依赖jar、能监控的功能有限,主要功能如下: 系统信息 可通过pdf下载监控信息 内存、CPU、磁盘、H...

秋日芒草
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部