`
诸葛蛋疼
  • 浏览: 36900 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext 表格的操作

阅读更多
行选择模式:
var rowcount = grid.getSelectionNode().getSelections();   

可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下
var strsex = rowcount[i].get(‘sex’);   

单元格选择模式:
如果在GridPanel的配置属性增加sm属性如下:
sm:new Ext.grid.CellSelectionModel();   

则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格,而不是默认的选择某一行。选择方式如下
var cell = grid.getSelectionNode().getSelectedCell();   

得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据
var colname = grid.getColumnModel().getDataIndex(cell[1]);  //获取列名    
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据

getStore():获取表格的数据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据
为表格增加链接
有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如下:{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法



Js代码
function DomUrl(value){   
return "<a href=>"+value+"</a>";   
}  
function DomUrl(value){ return "<a href=>"+value+"</a>"; }

如果表格内的数据是一个链接如:www.sina.com这样写法自然没有问题,但是大多数时候我们在表格中不会直接写一个链接,如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的,而且表格初始化之后这个属性无法改变,也就是只读属性。


处理方法如下:
定义一个全局变量,初始值为0;DomUrl函数如下

Js代码
function DomUrl(value){   
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行   
var rownum = grid.getSelectionModel().getSelected();//获取当前行   
startrow ++;   
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串   
return "<a href='"+strurl+"'>"+value+"</a>";   
}  
function DomUrl(value){ var row = grid.getSelectionModel().selectRow(startrow);//选中当前行 var rownum = grid.getSelectionModel().getSelected();//获取当前行 startrow ++; var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串 return "<a href='"+strurl+"'>"+value+"</a>"; }

不过不要忘记在下次提交的时候将startrow赋值为0。


3) 表格的属性


        表格的属性分为配置属性(在操作表格时无法修改),以及其他可读写属性,方法,以及事件。如下:


配置属性




a) activeItem:渲染布局时激活的子元素。
b) applyTo:指定渲染对象。
c) autoDestroy:当容器的子元素从容器中移除时是否自动销毁。
d) autoExpandColumn:指定自动填充表格剩余区域的列id
e) autoExpandMax:可自动扩张的最大宽度。
f) autoExpandMin:可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow:是否自动显示
i) autoWidth:自动扩充宽度
j) bbar/tbar:底部/顶部状态栏
k) bufferResize:容器再布局的缓冲频率
l) colModel/cm:列模式
m) cls:组件的额外css格式。
n) collapsible:是否显示快捷隐藏按钮
o) defaults:指定默认配置。
p) disableSelection:是否禁止选择表格行或列
q) enableDragDrop:是否允许表格列的拖放操作。
r) enableHdMenu:是否显示表格列的菜单。
s) frame:边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm:表格选择模式
v) store:表格数据集
w) stripeRows:是否显示分隔线。
x) title:表格标题


方法


a) getColumnModel():得到表格列模型
b) getGridEl():得到表格下的元素
c) getPosition():得到组件的当前位置,返回一个数组
d) getSelectionModel():得到选中模型
e) getSize():得到组件大小
f) getStore():得到组件的数据集
g) getView():得到表格的GridView对象。
h) hide():隐藏当前组件
i) isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k) un():解除组件的监听
l) on():为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。


分享到:
评论

相关推荐

    基于EXT2.0.2表格间数据拖拽

    EXT2.0.2是EXT库的一个较早版本,它提供了一套完整的组件系统,包括表格(Grid)、面板(Panel)、窗口(Window)等,用于创建复杂的Web界面。在这个特定的场景中,我们将探讨“基于EXT2.0.2表格间数据拖拽”的实现...

    ext表格布局小例子

    其表格组件(`Ext.grid.GridPanel`)是其最具特色的功能之一,广泛应用于数据展示和管理。 #### 二、代码分析 在本例中,我们首先引入了必要的 ExtJS 相关文件,包括样式表、脚本等资源。 ```html ...

    Ext表格中增删改查实例

    在"增删改查"实例中,我们将利用`Ext.grid.Panel`的配置项和事件来实现对表格数据的操作。 1. **创建表格(Create)** 创建数据通常涉及到在表格中添加新行。在Ext JS中,我们可以使用`store`对象的`add()`方法来...

    Ext教程表单表格的使用

    EXT表格GridPanel是EXT JS中的另一种重要组件,用于显示和编辑结构化的数据。在示例中,`sampleGridNoPageing`是一个GridPanel实例,用于展示JSON数据。 1. GridPanel的配置项包括但不限于`frame`, `title`, `store...

    Jquery仿Ext表格flexigrid

    **jQuery仿Ext表格Flexigrid详解** Flexigrid是一款基于jQuery的开源表格插件,它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性,深受Web开发者喜爱,尤其适用于需要展示大量...

    Ext表格列锁定+多表头插件

    在本文中,我们将深入探讨"Ext表格列锁定+多表头插件"这一主题,它在Ext3.4版本中的实现及其相关技术。这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效...

    Ext 编辑表格视频教程

    本视频教程将深入讲解如何使用Ext来创建可编辑的表格。 1. **Ext Grid Panel**: Ext的核心组件之一是Grid Panel,它用于显示二维数据集,通常用于数据展示和操作。Grid Panel可以配置多种列类型,如文本、数字、...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    ext 双层表格 grid(附带图片)

    在EXT JS框架中,双层表格,也称为嵌套表格或多级表格,是一种用于展示层次数据的强大工具。EXT JS的Grid组件是实现这一功能的主要组件,它允许开发者以清晰、交互的方式展示复杂的数据结构。以下是对EXT JS双层表格...

    Ext左树有表格 增删改查

    在"Ext左树有表格 增删改查"这个主题中,我们主要关注的是ExtJS如何实现左侧树形结构与右侧表格的交互,以及在这样的布局中进行数据的增、删、改、查操作。 首先,ExtJS中的树形组件(TreePanel)可以用来展示层级...

    ext可编辑表格

    在这个例子中,所有与表格相关的代码都在这个函数内部,确保在操作表格之前DOM已经完全准备就绪。 2. **Ext.QuickTips.init()**:初始化快速提示功能,当鼠标悬停在表格元素上时,可以显示预设的提示信息。 3. **...

    表格Ext js源代码

    在本资源中,我们关注的是"表格Ext js gird源代码",这涉及到Ext JS中的Grid Panel组件,它是展示和操作数据集的主要工具。 Grid Panel是Ext JS中的核心组件之一,用于显示结构化的数据,通常以表格的形式。它支持...

    ext表格合并单元格的方法

    ### ext表格合并单元格的方法 #### 背景与概述 在进行Web开发时,特别是在使用Ext JS框架处理表格数据展示的过程中,经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性,还能增强数据的可读性和...

    ext3.3制作报表新功能,表格实现报表格式

    `ext3.3`是一个旧版本的EXT JS库,它提供了丰富的用户界面组件,用于构建交互式的Web应用程序,特别是对于数据展示和操作方面。EXT JS的报表功能尤其受到开发者欢迎,因为它能够帮助他们创建出专业且功能强大的报表...

    ext的表格行编辑(roweditor)实现(c#)

    本教程将重点讲解如何在C#环境下,结合EXT JS实现一个表格行编辑的解决方案。 首先,我们需要理解EXT JS中的GridPanel组件。GridPanel是用来展示二维数据的视图,它可以显示大量的数据并提供多种功能,如排序、分页...

    一个简单的Ext样例,实现了一个表格功能

    在这个“一个简单的Ext样例”中,我们看到它被用来实现了一个具有表格功能的应用。这个表格不仅展示了数据,还具备了动态操作的能力,如自动排序和增删列,这使得用户交互更加直观和高效。 首先,我们要理解ExtJS中...

    ext的表格控件使用方法

    EXT表格控件不仅提供了基础的表格操作,如单选、多选行、调整列宽、按列排序等,还包含了许多高级特性,如自动生成行号、支持复选框全选、动态选择显示列、本地及远程分页、单元格自定义渲染、可编辑网格、新增和...

    ext 多表头和锁定列结合的示例

    EXT JS允许开发者构建高度自定义的用户界面,尤其是在处理大量数据时,锁定列和多表头功能能显著提高数据可读性和操作性。 **多表头(复合表头)**在EXT JS中的实现,是指在一个表格中可以有多个水平或垂直的表头,...

    js实现Ext方式的将左表格中的数据移动至右表格

    这通常涉及到表格操作、数据处理和用户交互。 首先,我们需要了解Ext中的两个关键组件:`Ext.grid.Panel`(表格面板)和`Ext.data.Store`(数据存储)。`Ext.grid.Panel`是用于展示表格数据的视图组件,而`Ext.data...

    ext实例 ext操作步骤

    EXT实例通常涉及到一系列操作步骤,包括页面布局、窗口创建以及表格的使用。 **页面布局**是EXT的核心功能之一,它提供了多种布局模式来适应不同设计需求。常见的布局有: 1. **Accordion布局**:这种布局方式使得...

Global site tag (gtag.js) - Google Analytics