`
Action-人生
  • 浏览: 104055 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ExtJs--EditorGrid可编辑的表格控件

ext 
阅读更多
http://www.360doc.com/content/12/0531/14/8072791_214975686.shtml
可编辑表格控件:
------------------------------------------------------------------
<!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" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="../Adapter.js"></script>
<script type="text/javascript">
//可编辑表格控件EditorGrid
//制作一个可编辑表格
//添加一行
//删除一行
//保存修改结果
//验证editorGrid中的数据
//限制输入数据的类型
Ext.onReady(function(){

var data=[
[1,1,new Date(),true],
[2,2,new Date(),false],
[3,2,new Date(),false],
[4,0,new Date(),true]
];
//选择列
var comboData=[
['0','新版ext教程'],
['1','ext在线支持'],
['2','ext扩展']
];

var comboStore=new Ext.data.SimpleStore({
data:comboData,
fields:['value','text']
});

var comboBox=new Ext.form.ComboBox({
store:comboStore,
triggerAction:'all',
displayField:'text',
valueField:'value',
mode:'local',
//readOnly:true,
emptyText:'请选择'
});


//注意:每一列都多加了一个editor属性
//第一列:数字
//第二列:选择列
//第三列:时间列
//第四列:判断列
var cm=new Ext.grid.ColumnModel([
{
header:'数字列',
dataIndex:'number',
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank:false,
allowNegative:false,
maxValue:10

}))
},{
//如果comboBox无法正常显示,考虑是不是没有写渲染函数.当没写这个函数时,显示的数据时value值,而不是text.
//bijing EditorGrid里的编辑器在实际编辑时起作用,表格与editor之间共享的是数据,显示层都要依靠各自的实现.不过,这样做
//更灵活,不需要两者都使用一样的显示方式
header:'选择列',
dataIndex:'comboBox',
editor:new Ext.grid.GridEditor(comboBox),
renderer:function(value){
return comboData[value][1];
}
},{
header:'日期列',
dataIndex:'date',
editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format:'Y-m-d',
minValue:'2007-12-14',
disabledDays:[0,6],
allowBlank:false,
disabledDaysText:'只能选择工作日...'

})),
renderer:function(value){
return value.format('Y-m-d');
}

},{
header:'判断列',
dataIndex:'check',
editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({
allowBlank:false
})),
renderer:function(value){//什么叫渲染,就是显示的时候,如何显示,这里面现实的时候,就是显示是和否
return value?'是':'否';
}
}

]);

var store=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'number'},
{name:'comboBox'},
{name:'date'},
{name:'check'}
]),
pruneModifiedRecords:true//如果为true,每次进行remove和load操作时,store会自动清除modified标记.可以避免出现下次提交时还会把上次那些modified信息都带上的现象

});
store.load();

//这里定义一个MyRecord类
var MyRecord=new Ext.data.Record.create([
{name:'number',type:'string'},
{name:'comboBox',type:'string'},
{name:'date',type:'string'},
{name:'check',type:'string'}
]);

btn_add=function(){
//单击添加按钮,添加一个空行(首先新建一个MyRecord,记得给里面的属性赋值,否则EditorGrid最后显示的内容会混乱)
var p=new MyRecord({
number:'',
comboBox:'',
date:'',
check:''
});
grid.stopEditing();//关闭表格的编辑状态
store.insert(0,p);//把我们刚才创建的MyRecord放到表格的第一行
grid.startEditing(0,0);//激活第一行第一列的编辑状态
}

btn_delete=function(){
Ext.Msg.confirm('提示','确定要删除?',function(btn){
if(btn=='yes'){
var sm=grid.getSelectionModel();//获取表格的选择模型
var cell=sm.getSelectedCell();//从选择模型中获取选中的单元格,这个单元格有两个属性,一个是行号,一个是列号
var record=store.getAt(cell[0]);//通过行号得到store这一行对应的Record,然后移除即可
store.remove(record);
}
});
}

btn_save=function(){
//简单介绍slice(start,[end])方法,该方法返回一个新数组,包含了源函数从start到end所指定的元素,但不包括end元素.如果start为负,
//则将它作为length+start处理,length为数组长度,如果end为负,则将它作end+length处理,如果end在start之前,不做任何复制.
//store.modified.slice(0)作用就是复制store.modified,保证store.modified中的原始数据不受影响.

var m=store.modified.slice(0);//获取store中修改过的数据,放到jsonArra数组中
var jsonArray=[];
<!--把这些数据组装成简单的数组.两种方发:第一种.因为数组m里保存的是Record,而不是简单的对象,只需要去除Record的data属性即可,
//然后使用循环将data添加到数组中 第二种.使用each()函数.each()的作用是遍历array,并对每项分别调用fn函数,如果array不是数组,
//则只执行一次.如果某项调用fn后结果返回false,那么遍历将结束并退出.
-->
Ext.each(m,function(item){
jsonArray.push(item.data);
})

Ext.Ajax.request({
url:'../success.jsp',
success:function(response,opt){
var obj= Ext.decode(response.responseText);
Ext.Msg.alert("成功", obj.msg);
},
failure:function(){
Ext.Msg.alert("失败","提交失败");
},
params:{
data:encodeURIComponent(Ext.encode(jsonArray))
}
});

}

//这里不是GridPanel,而是EditorGridPanel
var grid=new Ext.grid.EditorGridPanel({
cm:cm,
store:store,
autoHeight:true,
renderTo:'grid',
tbar:[{
xtype:'buttongroup',
defaults:{
scale:'small'
},
layoutConfig:{
columns:5
},
items:[
{
xtype:'button',
text:'添加一行',
handler:btn_add
},{
xtype:'button',
text:'删除一行',
handler:btn_delete
} ,{
xtype:'button',
text:'保存',
handler:btn_save
}    
]
}
 
 
]
 
});


});
</script>
</head>

<body>
<div id="grid"></div>
</body>
</html>
--------------------------------------------------------------------------









分享到:
评论

相关推荐

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs-4.1.1.zip

    ExtJS的GridPanel提供了高度可配置的表格视图,支持行编辑、分页、排序、过滤、拖放等功能。其强大的功能包括但不限于:行级锁定,用于冻结列;行合并,用于显示复杂的数据结构;以及灵活的数据源绑定,可以对接不同...

    extjs extjs-basex.js

    extjs-basex.js extjs-basex.js extjs-basex.js

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    extjs-4.1.1 ExtJs所有文档及库文件

    extjs-4.1.1 ExtJs所有文档及库文件,在官网下的,这个版本很好,放在这方便大家下载!

    extjs-4.0.2框架

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台...无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。

    extjs-653-docs.zip

    extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!

    extjs-core 3.0 beta版

    extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版

    extjs2.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    ExtJS-4.2.6-src-926个类源码

    Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926

    extjs-theme-bootstrap-master.zip

    1. **ExtJS**: ExtJS 提供了一个完整的MVC(模型-视图-控制器)架构,包含了大量的可重用UI组件,如表格、树形视图、图表、窗体等。它还支持数据绑定、Ajax通信、拖放操作等特性,使开发者能够创建功能丰富的桌面级...

    extjs-basex.js

    在实际开发中,开发者可以利用`extjs-basex.js`将ExtJS应用与BaseX数据库集成,实现XML数据的实时查询、编辑和展示,提升Web应用的数据处理能力。这需要对ExtJS的API和BaseX的查询语法有深入理解,以便有效利用这个...

    ExtJS--Windows.rar_extjs_extjs CSharp_extjs windows

    这个名为"ExtJS--Windows.rar"的压缩包显然是关于如何使用ExtJS来模仿Windows桌面应用的示例或教程。让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**:ExtJS是由Sencha公司开发的一个...

    extjs-4.1.1官方免费版

    extjs-4.1.1为extjs官方免费版,解压之后引入对应的css和js即可使用

    ExtJS-6.2.0离线API文档

    ExtJS-6.2.0官方离线API文档

    ExtJs-3.2.0.rar

    这个"ExtJs-3.2.0.rar"压缩包包含了ExtJS 3.2.0版本的所有资源,允许开发者利用其强大的组件库和丰富的功能来创建交互式、数据驱动的网页应用。 1. **ExtJS框架介绍** ExtJS提供了一套完整的UI组件,包括表格、树...

    extjs-4.0.7的源码

    extjs-4.0.7的源码 和大家分享

Global site tag (gtag.js) - Google Analytics