Ext.onReady(function() {
//grid中的复选框
var sm = new Ext.grid.CheckboxSelectionModel();
//数据存储器
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : "../zdbnr.action?method=page",
method : "post"
}),
reader : new Ext.data.JsonReader({ //读取json数据
root : "newsList",
totalProperty : 'totalProperty' //总记录数
}, [{
name : "id"
}, {
name : "dataParamId"
}, {
name : "code"
}, {
name : "content"
}, {
name : "parentCode"
}])
});
//创建列
var cm = new Ext.grid.ColumnModel([
sm, //复选框
{
header : "编号",
dataIndex : "id",
sortable : true
}, {
header : "字典表编号",
dataIndex : "dataParamId",
width : 100
}, {
header : "代码",
dataIndex : "code",
width : 110
}, {
header : "内容",
dataIndex : "content",
width : 150
}, {
header : "父代码",
dataIndex : "parentCode",
width : 110
}]);
cm.defaultSortable = true;// 默认可排序
//grid中的工具条
var toolbar = new Ext.Toolbar([{
text : '添加参数',
icon : 'icons/add.gif',
handler : function(){
Ext.Msg.alert("提示","添加");
}
},{
text : '修改参数',
icon : 'icons/edit.gif',
handler : function(){
Ext.Msg.alert("提示","修改");
}
}, {
text : '删除参数',
icon : 'icons/delete.gif',
handler : function(){
//获取选中的对象
var list = grid.getSelectionModel().getSelections();
var str='';
if(list.length>0){
for(var i=0; i<list.length; i++){
str = str+list[i].get('code')+',';
}
}
Ext.Msg.alert("提示","删除"+str);
var idList = [];
for(var i=0; i<list.length; i++){
idList.push(list[i].get('id'));
}
for(var i=0; i < idList.length; i++){
var index = ds.find('id',idList[i]);
if(index != -1){
var rec = ds.getAt(index);
ds.remove(rec); // 移除
}
}
}
}, {
text : '重新加载',
icon : 'icons/plugin.gif',
handler : function(){
ds.reload();
}
}]);
//创建Grid
var grid = new Ext.grid.GridPanel({
el : "grid",
ds : ds,
title : "代码列表",
width : 600,
height : Ext.get("content").getHeight()/2+20,
cm : cm,
loadMask : {
msg : '正在加载数据，请稍侯……'
},
sm : sm,
tbar : toolbar,
// 下边
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : ' 显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : ' 没有记录'
})
});
grid.render(); //组件渲染之后触发
ds.load({params : {start : 0,limit : 10}}); //加载数据
//双击事件
grid.addListener("rowdblclick",function(grid, rowIndex, columnIndex, e){
var dataObj = grid.getStore().getAt(rowIndex); //说去选中的行的数据对象
var id = dataObj.get("id");
var content = dataObj.get("content");
Ext.Msg.alert("提示",id+content);
});
//单击事件
/*
grid.addListener("click",function(){
Ext.Msg.alert("提示","单击事件");
});
*/
/*
* 如果要动态加载grid数据则，在方法内加入 ds:数据存储器,propertyId为要传的参数
* ds.load({params:{start:0,limit:10,propertyId:propertyId}});
*
* */
});
<html>
<head>
<title>form.html</title>
<script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs3/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css"
href="../extjs3/resources/css/ext-all.css" />
<script type="text/javascript" src="js/form.js"></script>
</head>
<body>
<div id="content" style="width: 100%; height: 100%">
<div id="grid"></div>
</div>
</body>
</html>
/**
* 分页读取Grid内容
* @param request
* @param response
* @return
*/
@RequestMapping(params = "method=page")
public ModelAndView page(HttpServletRequest request,
HttpServletResponse response) {
int start;
try {
start = Integer.parseInt(request.getParameter("start"));
} catch (NumberFormatException e1) {
start = 0;
}
int limit;
try {
limit = Integer.parseInt(request.getParameter("limit"));
} catch (NumberFormatException e1) {
limit = 10;
}
SysDataParamContent nr = new SysDataParamContent();
nr.setDataParamId(10200);
List<SysDataParamContent> list = dataZxZdbnrService.findZdbnrByPage(nr,
start,limit);
int totalProperty = dataZxZdbnrService.findByCont(10200);
JSONArray jsonArray = new JSONArray();
Iterator ite = list.iterator();
while (ite.hasNext()) {
SysDataParamContent s = (SysDataParamContent) ite.next();
Map map = new HashMap();
map.put("id", s.getId());
map.put("dataParamId", s.getDataParamId());
map.put("code", s.getCode());
map.put("content", s.getContent());
map.put("parentCode", s.getParentCode());
map.put("levels",s.getLevels());
jsonArray.add(map);
}
String jsonStr = jsonArray.toString();
String jsonString = "{start:" + start + ",limit:" + limit
+ ",totalProperty:" + totalProperty + ",newsList:" + jsonStr
+ "}";
response.setContentType("text/html;charset=utf-8");
try {
response.getWriter().write(jsonString);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
1.为表格增加链接
有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法
function DomUrl(value){
return "<a href=>"+value+"</a>";
}
如果表格内的数据是一个链接如：www.google.cn 这样写法自然没有问题，
但是大多数时候我们在表格中不会直接写一个链接，
如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。
因为这个属性是在表格初始化的时候定义好的，
而且表格初始化之后这个属性无法改变，也就是只读属性。
处理方法如下：
定义一个全局变量，初始值为0；
DomUrl函数如下
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。
2.在grid怎么获取到所有的数据和列名！（列是动态的）！
在grid前没有checkbox的
var rowIndex = grid.getStore().getCount();//grid的行数
var colIndex = grid.getColumnModel().getColumnCount(); //grid的列数
这里面只知道是多少列和多少行，但得不到里面的数据
尝试：
var rowIndex = grid.getStore().getCount();//grid的行数
var colIndex = grid.getColumnModel().getColumnCount();
//grid的列数
alert(colIndex);
for(var i = 0; i< rowIndex ; i++){
record = grid.getStore().getAt(i);
var colname = grid.getColumnModel().getDataIndex(i); //获取列名
// var celldata = grid.getStore().getAt(cell[0]).get(colname);
//获取数据
Ext.MessageBox.alert("test",colname);
for (var j = 0; j < colIndex; colIndex++) {
Ext.MessageBox.alert("test",grid.getColumnModel().getDataIndex(j));
}
}
分享到：
相关推荐
ExtJS 是一个强大的...以上就是 ExtJS 中 GridPanel 的一些核心属性和方法，它们共同构建了一个功能强大的数据展示和交互界面。在实际开发中，可以根据需求灵活配置和使用这些组件，以实现各种复杂的数据管理功能。
ExtJS中的GridPanel是用于展示数据的组件，它是一个强大的数据网格，提供了丰富的功能和定制选项。以下是对GridPanel的一些主要属性和方法的详细说明： **属性总结：** 1. **store**: 这个属性定义了GridPanel所...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
在GridPanel中添加“合计”行，主要涉及到View的自定义和数据处理。 1. **创建自定义View**： - 首先，我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑，以便在表格...
GroupingView插件负责对GridPanel中的数据进行分组，并提供相应的用户界面元素以便用户可以通过组名展开或折叠数据。组名排序则涉及到Store中数据的排序规则，可以通过自定义GroupingStore来实现。 在示例中，定义...
EXTJS的GridPanel是其组件库中的核心组件之一，用于展示数据网格，广泛应用于Web应用的数据展示。在EXTJS中，ColumnModel是用来定义GridPanel列结构和行为的关键部分。这篇博客"EXTJS_GridPanel_ColumnModel_列的...
在深入探讨ExtJS.GridPanel中的日期格式设置之前，我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架，用于构建交互式的Web应用程序，它提供了丰富的UI组件和...
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件，并获取双击的行以及选中的复选框状态。 首先，我们要了解GridPanel的基本结构。GridPanel由Store（数据存储）和ColumnModel（列模型）组成，它们定义了...
EXTJS GridPanel 是EXTJS库中的核心组件之一，尤其在EXTJS 2.02版本中，它提供了强大的表格展示和交互功能，对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作，如单选、多选、排序、改变列宽等，还...
后来公司让改变一个Gridpanel的展现方式，要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久，也没有找到框架的相应控制方法，然后在网上找了很久，也没有找到有人给去示例，无奈就只能自己写JS来控制...
接下来，我们讨论一下GridPanel中的不同列类型。在实际应用中，我们可能需要处理不同类型的数据显示，例如： 1. **行号列**: 使用`Ext.grid.RowNumberer`，它可以自动为每一行生成序号。 2. **布尔值列**: 对于`...
GridPanel 是 ExtJS 中的核心组件之一，它能够展示表格数据，并提供了排序、分页、筛选等多种功能。在 ExtJS 2.0 中，GridPanel 的配置和使用涉及到以下知识点： 1. **创建 GridPanel**：首先，你需要定义数据源，...
在GridPanel中，当用户滚动到表格的底部或顶部时，延时加载会自动请求更多的数据。这种方式降低了初始页面加载时间，减少了服务器压力，同时提高了用户体验。实现延时加载通常需要设置Store的`autoLoad`属性为`false...
在ExtJs中，`GridPanel` 是一个非常重要的组件，用于展示数据表格。在实际的业务场景中，我们经常需要对表格内的文本进行格式化，例如使其垂直居中。本篇将详细介绍如何在ExtJs中设置`GridPanel`表格文本垂直居中。 ...
在本文中，我们将深入探讨ExtJS的核心特性，特别是其GridPanel组件。 首先，ExtJS的核心特性之一是组件化。它将网页元素抽象为可复用的组件，如按钮、表格、窗口等，每个组件都有自己的属性、方法和事件，可以方便...
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
代码如下:viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width;...