Ext Js Grid 编辑新增删除保存的一个小示例-CSDN博客

本文链接：https://blog.csdn.net/love520240diaoer/article/details/83696851

Ext Js Grid 编辑新增删除保存的一个小示例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Paging</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="edit-grid-paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body>
<script type="text/javascript" src="examples.js"></script>
<div id="topic-grid"></div>
</body>
</html>

edit-grid-paging.js

Ext.onReady(function(){

Ext.QuickTips.init();
var authereditor = Editgridselect.init();//自定义下拉列表数据取自数据库返回的Json

var Plant = Ext.data.Record.create([
{name: 'title', type: 'string'},
{name: 'forumtitle', type: 'string'},
{name: 'forumid'},
{name: 'author', type: 'string'},
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
{name: 'lastposter'},
{name: 'excerpt'},
{name: 'threadid'}
]);

var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({ //支持跨域获取数据
url: 'http://extjs.com/forum/topics-browse-remote.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty:'totalCount',
id: "threadid"

}, Plant)
})

store.setDefaultSort('lastpost', 'desc');

// pluggable renders
/*
function renderTopic(value, p, record){
return String.format(
'<b>{0}</b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
*/
function renderTopic(value, p, record){
return String.format(
'<b>{0}</b>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0} by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}

function examineflag(value){
return value ? '是' : '否';
};

// 顶部工具栏按钮
var contrltar = [{
text: '添加',
handler : function(){
var p = new Plant({
title: '',
forumtitle:'',
forumid:'',
author: '',
replycount: 0,
lastpost: (new Date()).clearTime(),
lastposter:'',
excerpt:'新内容'
});
//var n = ds.totalLength;
grid.stopEditing();
store.insert(0,p); //ds.insert(n, p);
grid.startEditing(0,1); //grid.startEditing(n, 0);
}
},{
text: '删除',
handler : function(){
var gcm = grid.getSelectionModel();
var rows = gcm.getSelections();
if(rows.length>0){
for (var i = 0; i < rows.length; i++) {
var row = rows;
var data = row.data;
alert(row.data.threadid);
store.remove(row);
}
}else{
Ext.Msg.alert('提示','请选择要删除的记录');
}

}
}];
//底部工具栏按钮
var pagingBar = new Ext.PagingToolbar({
pageSize: 10,
store: store,
beforePageText:'当前页',
afterPageText:'共{0}页',
firstText:'首页',
lastText:'尾页',
nextText:'下一页',
prevText:'上一页',
refreshText:'刷新',
displayInfo: true,
displayMsg: '显示{0} - {1}条共{2}条记录',
emptyMsg: "无记录显示",

items:[
'-', {
pressed: true,
enableToggle:true,
text: '查看详情',
//cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});

var checkbox = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
checkbox,
{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "主题",
dataIndex: 'title',
width: 320,
renderer: renderTopic,
sortable: true,
editor: new Ext.form.TextArea({
allowBlank: false,
blankText:'请输入主题'
})
},{
header: "作者",
dataIndex: 'author',
width: 100,
//hidden: true,
sortable: true,
editor: authereditor

},{
header: "回复数",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
},{
id: 'last',
header: "最后发表",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true,
editor: new Ext.form.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: '周末不能选'
})
},{
header: "审核否",
dataIndex: 'indoor',
width: 55,
renderer: examineflag,
editor: new Ext.grid.GridEditor(new Ext.form.Checkbox())
}
]);

var grid = new Ext.grid.EditorGridPanel({
store: store,
renderTo: 'topic-grid',
cm: cm,
width:980,
id:'egridpanel',
height:550,
title:'编辑表格',
autoExpandColumn:'common',
clicksToEdit:1,//设置点击几次才可编辑
frame:true,
sm:checkbox,
loadMask: true,//装载动画
stripeRows:false,//条纹
//autoHeight: true,//一定要写，否则显示的数据会少一行
//selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式, 否则将无法删除数据

// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
//showPreview:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
//if(this.showPreview){
if(!this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
tbar: contrltar,
bbar: pagingBar
});

grid.on("afteredit", afteredit, grid);//监听编辑后事件
store.load({params:{start:0, limit:10}});

function afteredit(e){
// e.column;//修改的列,数字类型
// e.row;//修改过的行从0开始
//e.originalValue;//原始值
//e.value;//新值
var data = e.record.data;
// 显示等待对话框
Ext.Msg.wait("请等候", "修改中", "操作进行中...");
var id = data.threadid; //"threadid"为返回Json数据的字段名

Ext.Msg.alert('您成功修改了文章信息', "被修改的内容是:" + e.value + "\n 修改的字段是:"
+ e.field+"; id是:"+id);// 取得用户名
}

});

Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
minWidth: 10,
offsets : [0, -10],
init : function(slider){
slider.on('dragstart', this.onSlide, this);
slider.on('drag', this.onSlide, this);
slider.on('dragend', this.hide, this);
slider.on('destroy', this.destroy, this);
},

onSlide : function(slider){
this.show();
this.body.update(this.getText(slider));
this.doAutoWidth();
this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
},

getText : function(slider){
return slider.getValue();
}
});

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>';
}
};

Ext.namespace('Editgridselect');
Editgridselect.init = function (){
var fm = Ext.form, Ed = Ext.grid.GridEditor;
var RecordDef = Ext.data.Record.create([
{name: 'formname'},{name: 'formid'}
]);
var groupStore=new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'autherselect.php'}),
reader: new Ext.data.JsonReader({id:"sn",root:'datalist'},RecordDef ),
remoteSort: true });
groupStore.load();
var combox = new Ext.form.ComboBox({
typeAhead: true,mode : 'local', selectOnFocus : true,
forceSelection : true ,triggerAction: 'all',
store:groupStore, hiddenName:'formname',
valueField : 'formid',displayField : 'formname',
lazyRender:true,listeners: { select: function() {this.setValue(combox.getRawValue()); }
}
});
var editor = new Ed(combox);
return editor;
}

服务器端：
autherselect.php
<?php
header("Content-Type: text/plain; charset=utf-8");
$select = array('datalist'=>array(
array('formname'=>'张三','formid'=>"SCZL"),
array('formname'=>'李四','formid'=>"ZLBGV"),
array('formname'=>'王五','formid'=>"fagg"),
array('formname'=>'Dvaid','formid'=>"fhdf"),
array('formname'=>'Rocky','formid'=>"rocky")
)
);
echo json_encode($select);
//echo "([{'formname':'Java','formid':'java'},{'formname':'EXTJS','formid': 'extjs'}])";
?>