extjs的gridPanel
Ext.onReady(function(){
//多选列
var sm = new Ext.grid.CheckboxSelectionModel();
//定义好模型
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //序列号栏
// sm,//多选框栏
{header:"姓名",width:50,dataIndex:"username",tooltip:"这个是你的名字",sortable:true},//是否排序
{header:"年龄",width:50,dataIndex:"age",align:"center",fixed:true},//是否固定宽
{header:"身高",width:80,dataIndex:"hight",align:"center",resizable:false},//是否可以改变宽度
{header:"体重",width:80,dataIndex:"weight",align:"center",menuDisabled:true},//点击时是否出现菜单栏
{header:"性别",width:80,dataIndex:"sex",align:"center"},//对齐方式
{header:"原籍",width:80,dataIndex:"provience",align:"center"},
{header:"是否独生子",width:120,dataIndex:"alone",align:"center"},
{id:"memo",header:"备注",width:80,dataIndex:"memo"},
{header:"操作",width:120,dataIndex:"",align:"center",renderer:function(v){
return "<span><a href='#' color='red'>编辑</a> <a href='#' color='red' id='delete'>删除</a></span>"
}}
]);
//定好模拟数据
var json = [
{
username:"1朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"2朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"3朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"4朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"5朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"6朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
}
,
{
username:"7朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"8朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"9朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"10朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
},
{
username:"11朱湘鄂",
age:"21",
hight:"170cm",
weight:"52kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
}
];
//创建代理
var proxy = new Ext.data.MemoryProxy(json);
//创建record记录集
var Record = new Ext.data.Record.create([
{name:"username",type:"String",mapping:"username"},
{name:"age",type:"String",mapping:"age"},
{name:"hight",type:"String",mapping:"hight"},
{name:"weight",type:"String",mapping:"weight"},
{name:"sex",type:"String",mapping:"sex"},
{name:"provience",type:"String",mapping:"provience"},
{name:"alone",type:"String",mapping:"alone"},
{name:"memo",type:"String",mapping:"memo"},
]);
//创建reader
var reader = new Ext.data.JsonReader({},Record);
//创建Store
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});
//显示加载
store.load();
//创建girdPanel对象
var gridPanel = new Ext.grid.GridPanel({
title:"人员详细资料",
width:1000,//宽度
autoHeight:true,
cm:cm,
//sm:sm,
store:store,
autoExpandColumn:true,
titleCollapse:true,//标题兰是否具备收缩功能
collapsible:true,//表示panel可以收缩
renderTo:Ext.getBody(),
buttons:[
{
text:"第一行",
handler:function(){
var rsm = gridPanel.getSelectionModel();
rsm.selectFirstRow();
}
},
{
text:"上一行",
handler:function(){
var rsm = gridPanel.getSelectionModel();
if(!rsm.hasPrevious()){
Ext.Msg.alert("提示","已经是第一行了");
}else{
rsm.selectPrevious();
}
}
},
{
text:"下一行",
handler:function(){
var rsm = gridPanel.getSelectionModel();
if(!rsm.hasNext()){
Ext.Msg.alert("提示","已经是最后一行了");
}else{
rsm.selectNext();
}
}
},
{
text:"最后一行",
handler:function(){
var rsm = gridPanel.getSelectionModel();
rsm.selectLastRow();
}
},
{
text:"全选",
handler:function(){
var view = gridPanel.getView();
var rsm = gridPanel.getSelectionModel();
rsm.selectAll();
//打印选中的行
var r="";
for(var i=0;i<view.getRows().length;i++){
if(rsm.isSelected(i)){
r+=gridPanel.getStore().getAt(i).get("username");
}
}
Ext.MessageBox.alert(r);
}
},
{
text:"反选",
handler:function(){
var rsm = gridPanel.getSelectionModel();
for(var i=gridPanel.getView().getRows().length; i>=0;i--){
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i,true);
}
}
}
},
{
text:"新增一行到首行",
handler:function(){
var view = gridPanel.getView();
var obj = {
username:"李理华",
age:"19",
hight:"170cm",
weight:"42kg",
sex:"男",
provience:"湖南",
alone:"no",
memo:"暂无备注"
};
var human = new Record(obj);
gridPanel.getStore().insert(0,human);
view.refresh();
}
} ,
{
text:"全部删除",
handler:function(){
var view = gridPanel.getView();
var store = gridPanel.getStore();
store.removeAll();
view.refresh();
}
}
]
});
//删除按钮
Ext.get('delete').on('click',function(){
var rsm = gridPanel.getSelectionModel();
var store1 = gridPanel.getStore();
var view = gridPanel.getView();
for(var i=view.getRows().length-1;i>=0;i--){
if(rsm.isSelected(i)){
store1.remove(store1.getAt(i));
}
}
view.refresh();
});
});