Extjs中的GridPanel
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));
}
}