ExtJs获取GridPanel选中行的详细信息
这一节，我们将学习如何获取Grid当前选中行的信息
1.xml数据源内容:
<?xml version="1.0" encoding="UTF-8"?> <Data> <Items> <TotalResults>203</TotalResults> <TotalPages>21</TotalPages> <Item> <ASIN>0446355453</ASIN> <Author>Jimmy.Yang</Author> <Manufacturer>Warner Books</Manufacturer> <ProductGroup>Book</ProductGroup> <Title>Master of the Game</Title> </Item> <Item> <ASIN>0446613657</ASIN> <Author>Sidney Sheldon</Author> <Manufacturer>Warner Books</Manufacturer> <ProductGroup>Book</ProductGroup> <Title>Are You Afraid of the Dark?</Title> </Item> </Items> </Data>
2.静态页内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ext-all.js"></script>
<style type="text/css">
*{font-size:12px;line-height:130%;}
</style>
<title>ExtJs_Grid_Xml</title>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var store = new Ext.data.Store({
url: 'GridData.xml',
reader: new Ext.data.XmlReader(
{ record: 'Item' },
["ASIN", "Author", "Manufacturer", "ProductGroup", "Title"])
});
function SeeDetail(ID) {
return '<a href="Book.aspx?id=' + ID + '" target="_blank">' + ID + '</span>';
}
var grid = new Ext.grid.GridPanel({
store: store,
frame: true,
columns: [
{ id: "ASIN", header: "出版号", width: 120, renderer: SeeDetail, dataIndex: 'ASIN', sortable: true },
{ header: "作者", width: 120, dataIndex: 'Author', sortable: true },
{ header: "书名", width: 180, dataIndex: 'Title', sortable: true },
{ header: "制作商", width: 115, dataIndex: 'Manufacturer', sortable: false },
{ header: "产品组", width: 100, dataIndex: 'ProductGroup', sortable: false}],
renderTo: 'example-grid',
viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
width: 660,
height: 100,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
// 定义详细信息的显示模板
var bookTplMarkup = [
'出版号: <a href="http://www.baidu.com/{ASIN}" target="_blank">{ASIN}</a><br/>',
'作者: {Author}<br/>',
'书名: {Title}<br/>',
'产品组: {ProductGroup}<br/>'
];
var bookTpl = new Ext.Template(bookTplMarkup); //ExtJs的模板组件
var p = new Ext.Panel({
id: "detailPanel",
title: '详细情况', //标题
collapsible: true, //右上角上的那个收缩按钮，设为false则不显示
renderTo: 'example-grid', //这个panel显示在html中id为container的层中
width: 660,
height: 100,
html: "请在上面网格中选择一行数据"//panel主体中的内容，可以执行html代码
});
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
Ext.MessageBox.alert("提示","您选择的出版号是：" + r.data.ASIN);
});
store.load();
});
</script>
<div id="example-grid" style="margin:10px 0 0 10px"></div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦