<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可编辑的表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
.x-grid-record-red table{
color: #FF0000;
}
.allow-float {clear:none!important;} /* 允许该元素浮动 */
.all-field {
float:left;
padding:0 0 0 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script>
/****begin****/
Ext.grid.CheckColumn = function(config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype = {
init : function(grid) {
this.grid = grid;
this.grid.on('render', function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t) {
if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record) {
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col' + (v ? '-on' : '')
+ ' x-grid3-cc-' + this.id + '"> </div>';
}
};
/****end****/
function showUrl(value)
{
return "<a href='#'>"+value+"</a>";
}
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var tpl = '<tpl for="."><div class="x-combo-list-item" ext:qtitle="值" ext:qtip="{name}">{name}</div></tpl>';
var data = [
[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com','1900-5-6',66,'0',true],
[2, 'jfox', 'huihoo', 'www.huihoo.org','2009-5-6',11,'1',false],
[3, 'jdon', 'jdon', 'www.jdon.com','2009-5-6',22,'1',false],
[4, 'springside', 'springside', 'www.springside.org.cn','1992-5-6',33,'0',false],
[5, 'aaa', 'springside', 'www.easyjf.com','1999-5-6',45,'1',false],
[6, 'bbb', 'springside', 'www.easyjf.com','1992-5-6',55,'0',false],
[7, 'cccc', 'springside', 'www.easyjf.com','1992-5-6',66,'1',true],
[8, 'ddd', 'yahoo', 'www.easyjf.com','1992-5-6',77,'0',false],
[9, 'eee', 'ddddddddddddddd', 'www.springside.org.cn','1992-5-6',1230,'0',false],
[10, 'fff', 'fdfsdafsdfs', 'www.yahoo.com.cn','1992-5-6',32,'0',false],
[11, 'gggg', 'this is pen', 'www.yahoo.com.cn','1992-5-6',45,'0',true],
[12, 'hhhh', 'springside', 'www.baidu.com','1992-5-6',56,'1',false],
[13, 'as', 'springside', 'www.baidu.com','1992-5-6',756,'0',true],
[14, 'you', 'how are you', 'www.baidu.com','1992-5-6',4455,'1',false],
[15, 'hom', 'springside', 'www.springside.org.cn','1992-5-6',98,'0',false],
[16, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',676,'1',true],
[17, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',555,'0',false],
[18, 'fff', 'springside', 'www.yahoo.com.cn','1992-5-6',890,'1',false],
[19, 'gggg', 'springside', 'www.yahoo.com.cn','1992-5-6',1200,'1',true],
[20, 'fff', 'springside', 'www.jdon.com','1992-5-6',1566,'1',false],
[21, 'gggg', 'springside', 'www.jdon.com','1992-5-6',333,'0',true],
[22, 'gggg', 'springside', 'www.jdon.com','1255-5-6',333,'1',false],
[23, 'vvvvv', 'tttttt', 'www.jdon.com','1992-5-6',333,'0',false],
[24, 'sex', 'springside', 'www.jdon.com','2111-5-6',333,'1',true],
[25, 'zhangsan', 'springside', 'www.jdon.com','1988-5-6',333,'0',true]
];
/**
var store = new Ext.data.SimpleStore({
data : data,
fields : ["id", "name", "organization", "homepage",{
name : "beginDate",
type : "date",
dateFormat : "Y-n-j"
}]
});
**/
var sexData=[['女','1'],['男','0']];
var sexComStore = new Ext.data.SimpleStore({
fields: ['name', 'value'],
data : sexData,
sortInfo:{field:'name', direction:'ASC'} //指定排序字段
});
var sm=new Ext.grid.CheckboxSelectionModel();
var reader = new Ext.data.ArrayReader({},[
{name: 'id'},
{name: 'name',type: 'string'},
{name: 'organization'},
{name: 'homepage'},
{name: 'beginDate', type: 'date', dateFormat: 'Y-n-j'},
{name: 'price', type: 'float'},
{name: 'itemrslt'},
{name: 'married',type: 'bool'}
]);
var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupOnSort: false,
sortInfo:{field: 'price', direction: "ASC"},
groupField:'homepage'
});
// 自定义的字段
var checkColumn = new Ext.grid.CheckColumn({
header: "婚否?",
dataIndex: 'married',
width: 55
});
var colM = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header:"序号",width:60}),
sm,
{
header : "ID",
dataIndex : "id",
sortable : true
},
{
header : "项目名称",
dataIndex : "name",
fixed : true, //如果为真列宽不能被改变
hidden : true, //隐藏本列
width : 60,
editor : new Ext.form.TextField(),
sortable : true
}, {
header : "开发团队",
dataIndex : "organization",
editor : new Ext.form.TextField(),
//hidden:true,/*隐藏列*/
sortable : true
}, {
header : "开始日期",
dataIndex : "beginDate",
renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
editor : new Ext.form.DateField({
format : 'Y年m月d日'
}),
sortable : true
}, {
header : "网址",
dataIndex : "homepage",
editor : new Ext.form.TextField(),
renderer : showUrl
}, {
header : "金额",
dataIndex : "price",
//align: 'right',
editor : new Ext.form.NumberField({
allowNegative: false, // 不允许为负数
decimalPrecision: 1, // 默认的小数点位数
allowDecimals: false, // 不允许为负数
maxValue: 100000 // 最大值为10万
}),
css:'text-align:right;',
renderer : Ext.util.Format.usMoney
},
{
header : "性别",
dataIndex : 'itemrslt',
css : 'text-align: center;',
horizontal:true,
renderer: rend,
editor : new Ext.grid.GridEditor( new Ext.form.ComboBox({
displayField: 'name',
valueField: 'value',
typeAhead: true,
triggerAction: 'all',
style: 'width:30px',
width:100,
tpl :tpl,
hiddenName:'sex',
mode: 'local',
autoLoader:true,
selectOnFocus:true,
//lazyRender :true,
store: sexComStore
}))
},
checkColumn // 自定义的婚否列
]);
colM.defaultSortable = true;
function rend(value) {
if (value == '0') {
return "男";
} else {
return "女";
}
}
//Ext.util.Format.dateRenderer('m/d/Y')
// 创建数据源的记录,代表一个员工
var Employee = Ext.data.Record.create([
{
name : 'id',
type : 'int'
},
{
name : 'name',
type : 'string'
},
{name: 'organization'},
{name: 'homepage'},
{
name : 'beginDate',
mapping : 'birth',
type : 'date',
dateFormat : 'm/d/Y'
}, // 日期自动转换
{
name : 'price',
type : 'float'
},
{name: 'itemrslt'},
{
name : 'married',
type : 'bool'
}]);
var ptb=new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
height: 30,
width: 800,
items : [' 每页', new Ext.form.ComboBox({
width : 50,
store : new Ext.data.SimpleStore({
fields : ['Label', 'Value'],
data : [[10, 10], [15, 15], [20, 20], [30, 30], [40, 40],[50, 50],
[60, 60],[70, 70], [80, 80], [100, 100]]
}),
displayField : 'Label',
valueField : 'Value',
typeAhead : true,
mode : 'local',
value : 20,
listWidth: 50, /** 行宽 **/
triggerAction : 'all',
selectOnFocus : true,
listeners : {
change : {
fn : function(box, newValue, oldValue) {
grid.changePageSize(newValue);
}
},
select : {
fn : function(combo, value) {
}
}
}
})],
displayMsg: '显示第 {0} 条到 {1} 条记录， 共 {2} 条',
emptyMsg: '没有记录'
});
var view=new Ext.grid.GridView({forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
var grid = new Ext.grid.EditorGridPanel({
//renderTo : "hello",
title : "中国Java开源产品及团队",
width : 800,
frame: true,
cm : colM,
sm: sm,
store : store,
autoExpandColumn : 2, //默认自动扩展宽度的字段
clicksToEdit: 1, //属性定义点击几次进行编辑 clicksToEdit:1,//单击一次编辑
loadMask: true,
loadMask:{msg:'正在加载数据......'},
bodyStyle:'width:100%',
stripeRows:true,
autoHeight: true,
plugins: checkColumn,
viewConfig:{forceFit:true},
animCollapse: false,
view: new Ext.grid.GroupingView({
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显示/隐藏',
groupByText:'依本列分组',
showGroupsText:'分组显示',
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})',
getRowClass: function(record,rowIndex,rowParams,store){// 数据显示红色
if(record.data.price>200){
return 'x-grid-record-red';
}else{
return '';
}
}
}),
bbar: ptb,
tbar: [{ /** 顶部的工具栏 tools bar**/
text: '增加新员工',
handler : function(){
var p = new Employee({
id: '',
name: '输入员工姓名',
organization: '',
homepage: '',
beginDate: (new Date()).clearTime(),
price: 0,
itemrslt: '0',
married: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}],
listeners : {
'celldblclick' : function() {
//return false; //返回false将双击不能变成可编辑状态
},
'cellcontextmenu' : function(g, r, c, e) {
e.stopEvent();
var menu = new Ext.menu.Menu({
items : [{
text : '编辑',
handler : function() {
g.startEditing(r, c);
}
}]
});
menu.showAt(e.getXY());
}
},
changePageSize : function(pageSize) {
if (pageSize != null && pageSize != '' && pageSize > 0 && pageSize != pagetb.pageSize) {
pagetb.pageSize = parseInt(pageSize);
this.store.load({
params : {
start : 0,
limit : pagetb.pageSize
}
});
}
}
});
//store.load();
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
var selectionModel = grid.getSelectionModel(); //资源Grid表中取出选中行
var record = selectionModel.getSelected(); //取出对应记录
});
//grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('提示','当前选中的数据是'+data);
}
var win = new Ext.Window({
title : '可编辑表格',
modal : true,
width : 900,
autoScroll : true,
closable : true,
// resizable:true,
items : [grid],
x:200,
y:5,
buttons : [
new Ext.Button({
text:"保存",
minWidth:100,
id:"mybutton",
//点击事件
listeners:{
"click":function(){
var m = store.getModifiedRecords();
if (m.length == 0) {
alert("没有更新的数据");
return false;
}
var sSend = "["
for (var i = 0, len = m.length; i < len; i++) {//married
sSend = sSend + "{id:'" + m[i].data['id'] + "', married:'"+ m[i].data['married']+"'homepage:'"+ m[i].data['homepage']+ "',name:'"+m[i].data['name']+"',price:'"+m[i].data['price']+"', beginDate:'"+ m[i].data['beginDate'] +"'}";
if (i < len - 1)
sSend = sSend + ","
}
sSend = sSend + "]";
sSend = Ext.util.JSON.encode(sSend);
alert(sSend);
//win.hide();
win.close();
}
}
})
]
})
win.show();
});
</script>
</head>
<body>
<%-- <div id="hello"></div>--%>
</body>
</html>
分享到：
相关推荐
Ext.grid.EditorGridPanel是Ext JS库中的一个组件，主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能，是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架，尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本，它提供了丰富的用户界面组件...
在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
Ext3.0 API是Ext JS库的一个重要版本，它提供了丰富的JavaScript组件和接口，用于构建交互式的Web应用程序。这个API帮助文档包含了详细的功能说明、示例代码和类库结构，帮助开发者更好地理解和利用Ext3.0的功能。 ...
`Ext.grid.EditorGridPanel` 是一个扩展了 `Ext.grid.GridPanel` 的组件，允许直接在表格中编辑数据。它结合了表格视图和表单编辑功能，使得数据编辑变得更加直观。 #### 九、Ext.tree.TreePanel -- 树的使用 **...
在示例代码中，可以看到如何创建一个包含可编辑列的`EditorGridPanel`，并使用`Ext.form.TextField`作为编辑器。`formatDate`函数用于格式化日期，`CheckboxSelectionModel`用于设置多选模式，而`CheckColumn`则用于...
- **EditorGridPanel**: `Ext.grid.EditorGridPanel`，可编辑的表格组件。 - **GridPanel**: `Ext.grid.GridPanel`，表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`，分页工具栏。 - **Panel**: `Ext....
在ExtJS框架中，Grid是一个非常关键的组件，主要用于展示表格数据，并支持数据的增删改查等基本操作。对于大多数Web应用程序而言，这种功能几乎是不可或缺的。下面我们将详细介绍如何使用ExtJS来实现这些功能。 ###...
除了基本的 `GridPanel` 外，Ext JS 还提供了一个更为强大的表格组件——`EditorGridPanel`。这个组件允许用户直接在表格中进行数据编辑。下面是一个简单的使用 `EditorGridPanel` 的示例： ```javascript Ext....
开发者可能会使用`Ext.grid.EditorGridPanel`，并为每个列定义一个`editor`属性来启用单元格编辑。同时，Store的配置可能包括数据源（即"data"），以及定义字段的`fields`属性。 在深入理解这个demo的过程中，你...
ExtJS是一个高级的JavaScript库，用于构建功能丰富的Web应用程序。此框架允许开发者创建出外观华丽且交互性极强的RIA（Rich Internet Applications）。ExtJS的优势在于它能够独立于后端技术进行开发，这意味着无论是...
`GridPanel` 必须绑定一个数据存储器来提供数据支持。 - **`autoExpandColumn`**: 指定某列自动扩展宽度，通常设置为需要显示较多文本的列的索引值。 - **其他配置项**：`height`, `width`, `title` 分别定义了...
以下是一个示例代码片段，展示了如何解决这个问题： ```javascript // 部门列表的store var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "GetDepartmentJson.aspx", ...
- `editorgrid`: `Ext.grid.EditorGridPanel` - `flash`: `Ext.FlashComponent` - `grid`: `Ext.grid.GridPanel` - `listview`: `Ext.ListView` - `panel`: `Ext.Panel` - `progress`: `Ext.ProgressBar` - `...
为了熟悉ExtJS的基本用法，可以从创建一个简单的“Hello World”示例开始： ```javascript Ext.application({ name: 'MyApp', launch: function () { Ext.create('Ext.window.Window', { title: 'Hello World', ...
然而随着应用程序复杂度的提升，如何提高 Extjs 的性能成为了一个重要的课题。本文旨在针对具有一定 JavaScript 基础（理解面向对象、继承、作用域等概念）并且熟悉 Extjs 框架（了解组件间继承关系）的开发者，提供...
4. **表格类**：包括网格面板(GridPanel)、编辑网格面板(EditorGridPanel)、属性网格(PropertyGrid)、视图(View)、分组视图(GroupingView)、列模型(ColumnModel)和选择模型(SelectionModel)，支持复杂的数据展示和...