`
huoyunshen888
  • 浏览: 83489 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

ExtJs表格点击超链接获取行的值

 
阅读更多
grid双击事件，并得到单元格的值，以上我试了下好像不行，最终我这样写了

grid.addListener('rowdblclick', function (sm, rowIndex, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
alert(record.data['UserName']);
});

menuDisabled:true表示单列不可排序
enableHenu:true所有列不可排序
renderer:function(v)
{
    return v.link(v);
}


ExtJs表格
2009年11月09日 星期一 00:48
行选择模式：

Js代码
var rowcount = grid.getSelectionNode().getSelections();

var rowcount = grid.getSelectionNode().getSelections();
可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下

Js代码
var strsex = rowcount[i].get(‘sex’);

var strsex = rowcount[i].get(‘sex’);
单元格选择模式


如果在GridPanel的配置属性增加sm属性如下

Js代码
sm:new Ext.grid.CellSelectionModel();

sm:new Ext.grid.CellSelectionModel();
则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下

Js代码
var cell = grid.getSelectionNode().getSelectedCell();

var cell = grid.getSelectionNode().getSelectedCell();
得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据

Js代码
var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据

var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据
getStore():获取表格的数据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据


2） 为表格增加链接



有时我们需要为表格中的某一列添加一个链接。可以利用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。

----------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'MyJsp.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <script type="text/javascript" src="<%=path%>/js/ext-base.js"></script>
    <script type="text/javascript" src="<%=path%>/js/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/resources/css/ext-all.css">
    <script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am']
    ];

    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'company',    renderer:getHideValue},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });

    store.loadData(myData);
   
    function getHideValue(value)
    {
        return "<a href=javascript:show></a>"
    }
   
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'company',
                header   : 'Company',
                width    : 160,
                sortable : true,
                dataIndex: 'company'
            },
            {
                id       :'p',
                header   : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                header   : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                header   : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                header   : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            },
            {
                xtype: 'actioncolumn',
                width: 50,
                items: [{
                    icon   : 'resources/delete.gif',  // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                    var rowcount = grid.getSelectionNode().getSelections();
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }]
            }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        stateful: true,
        stateId: 'grid'
    });

    grid.render('grid-example');
});
    function show(value)
    {
        alert("jj");
    }
    </script>
  </head>
 
  <body>
   <div id='grid-example' align="center"></div>
  </body>
</html>

分享到：
| EXTjs中 怎么用超链接的方式弹出窗口
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    获取ExtjS表格的值_ExtJS_3.4cellSelectModel

    资源名称：获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。

    ExtJs grid多选时获取选中的所有值

    ### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中，ExtJs 是一款非常强大的JavaScript框架，它能够帮助开发者快速构建复杂的用户界面。其中，Grid Panel（简称 Grid）是ExtJs中最常用的一个...

    Extjs表格合并代码

    在本文中，我们将深入探讨如何在ExtJS框架中实现表格单元格的合并，以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库，用于构建富客户端应用程序，其表格组件是功能丰富的数据展示工具...

    EXTJS 选下拉框，并取得下拉框的值

    本篇文章将详细讲解如何在EXTJS中操作下拉框，以及如何获取用户选定的值。 首先，创建一个基本的EXTJS下拉框需要定义`Ext.form.field.ComboBox`对象。以下是一个简单的示例： ```javascript Ext.application({ ...

    Extjs如何获取文本框的值

    Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值

    一个extjs表格的实例

    extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性；2、一个简单的页面布局。供参考。

    ExtJs获取表单元素的值

    在本篇文章中，我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值，并结合提供的代码示例进行详细解析。对于前端开发者来说，掌握如何高效地操作表单元素是必不可少的一项技能，尤其是在使用像ExtJs这样的强大...

    给Extjs的GridPanel增加“合计”行

    在EXTJS中，GridPanel是一种常用的组件，用于展示表格数据。在实际应用中，我们经常需要在GridPanel底部显示一行“合计”行，以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    extjs表格Grid比较全面的功能

    ExtJS Grid提供行编辑器插件，使得用户可以直接在表格中编辑单元格。同时，可以将Grid与表单组件结合，创建复杂的数据输入界面。 7. **选择模式（Selection Models）** Grid有多种选择模式，如单选、多选和行选择...

    Extjs 表格

    编辑数据涉及到选中要修改的行，获取并修改记录的字段值，然后通知Store数据已更改。例如： ```javascript var selectedRow = grid.getSelectionModel().getSelection()[0]; selectedRow.set('name', 'Edited ...

    EXTjs4.0以下合并表格

    在EXTjs 4.0以下的版本中，开发人员可能会遇到合并表格单元格的需求，这在展示复杂数据或者组织信息时非常有用。EXTjs提供了强大的表格网格组件（GridPanel），允许自定义布局和样式，包括单元格的合并。 在EXTjs中...

    extjs 简单表格

    ExtJS 是一个强大的...在实际开发中，数据通常从服务器异步获取，使用JSON格式，并且可以使用ExtJS的API和事件系统来实现交互性和用户界面的动态更新。理解并熟练掌握这些概念，对于构建复杂的Web应用程序至关重要。

    extjs 动态表格完整版

    5. **表格编辑**：ExtJS提供两种编辑模式，行编辑和单元格编辑。`Ext.grid.plugin.RowEditing`和`Ext.grid.plugin.CellEditing`插件可以轻松启用这些功能。 6. **排序和过滤**：通过设置`sortable`属性，用户可以...

    extjs模拟excel表格

    在本文中，我们将深入探讨如何使用ExtJS来模拟Excel表格，以及实现Excel的各种功能。 首先，ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据，并提供了诸如排序、过滤、分页等...

    extjs表格(表格后台数据读，分页)，树（后台数据读取，复选框联动）的基本操作示例

    1. **GridPanel**：GridPanel是ExtJS中用于展示表格数据的组件，它提供了丰富的功能，如排序、筛选、编辑等。在这个例子中，GridPanel被用来从后台动态加载数据，并实现分页。后台数据读取通常涉及Ajax请求，通过Ext...

    EXT GridPanel获取某一单元格的值

    总结来说，EXT GridPanel通过监听`cellclick`事件可以获取用户点击的单元格的值。同时，结合选择模型，我们可以获取当前选中行的数据。通过Record对象的get方法，可以根据字段名获取具体的单元格值。这些基本操作...

    Extjs4.2入门详细文档以及表格初级制作

    ### Extjs4.2 入门详细文档及表格初级制作 #### 一、Extjs4.2 下载与安装 **1.1 Extjs4.2 文件结构介绍** 初次接触到Extjs4.2的同学可能会对下载下来的文件夹结构感到困惑。下面我们将详细解释各个目录的作用： ...

    ExtJs Filter 表格过滤

    在"ExtJs Filter 表格过滤"中，我们主要关注以下几个关键知识点： 1. **数据网格（Data Grid）**：ExtJs的数据网格是一种显示大量结构化数据的组件，它支持分页、排序、筛选等多种功能。数据网格通过绑定到数据源...

    Extjs 实现多行合并(rowspan)效果

    在ExtJS中实现多行合并（rowspan）的效果，通常是为了在数据表格中展示具有层次结构的数据，或者在某些特定情况下需要对表格行进行合并，以优化数据的展示。这通常涉及到对表格（GridPanel）的配置和自定义。下面...

Magicbox
Global site tag (gtag.js) - Google Analytics