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

hiziqin 发表于 2011-12-22 08:54

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，比如想获取***列的数据，语句如下 Js代码 var str*** =
rowcount.get(‘***’); var str*** = rowcount.get(‘***’); 单
元格选择模式 如果在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)以
及列(cell).可以通过一下语句得到该单元格数据 Js代码 var colname =
grid.getColumnModel().getDataIndex(cell); //获取列名 var celldata =
grid.getStore().getAt(cell).get(colname); //获取数据 var colname =
grid.getColumnModel().getDataIndex(cell); //获取列名 var celldata =
grid.getStore().getAt(cell).get(colname); //获取数据 getStore():获取表格的数
据集 getAt():获取该数据集cell行 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, ) 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 '' +
val + '';         } else if (val < 0) {            
return '' + val + '';        
}         return val;     }     function pctChange(val) {        
if (val > 0) {             return '' + val + '%';         } else if
(val < 0) {             return '' +
val + '%';         }         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>

页: [1]

Chinaunix's Archiver

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