本文固定链接:http://www.verydemo.com/demo_c113_i3762.html
通过拖拽Grid改变行的顺序
<script>
var meta = [
{header:'编号',dataIndex:'id', name: 'id'},
{header:'名称',dataIndex:'name', name: 'name'},
{header:'描述',dataIndex:'descn', name: 'descn'},
{header:'日期',dataIndex:'date', name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s', renderer: Ext.util.Format.dateRenderer('Y-m-d')}
];
var data = [
['1','name1','descn1','1970-01-15T02:58:04'],
['2','name2','descn2','1970-01-15T02:58:04'],
['3','name3','descn3','1970-01-15T02:58:04'],
['4','name4','descn4','1970-01-15T02:58:04'],
['5','name5','descn5','1970-01-15T02:58:04']
];
var grid = new Ext.grid.GridPanel({
height: 380,
width: 450,
renderTo: Ext.getBody(),
enableDragDrop: true,
title: '通过拖拽Grid改变行的顺序',
frame: true,
enableDrag: true,
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, meta)
}),
columns: meta,
viewConfig: {
columnsText: '显示的列',
scrollOffset: 30,
sortAscText: '升序',
sortDescText: '升序',
forceFit: true
},
stripeRows: true,
autoExpandColumn: 1,
tbar: [{
text: '上移',
iconCls: 'up',
scope: this,
handler: function(){
buttonMove(-1);
}
}, {
text: '下移',
iconCls: 'down',
scope: this,
handler: function(){
buttonMove(1);
}
}, '-', {
text: '保存',
iconCls: 'save',
scope: this,
handler: function(){
var ds = grid.getStore();
var sortIndex = [];
for (var i = 0; i < ds.getCount(); i++) {
sortIndex.push(ds.data.items[i].id);
}
Ext.fly('op').dom.value += '------------\n' + sortIndex + '\n';
Ext.Ajax.request({
url: 'gridDD_sort.ashx?act=save',
params: {
sortIndex: sortIndex
},
success: function(response, op){
var msg = response.responseText;
var obj = Ext.decode(msg);
if (obj) {
msg = obj.success?"新的行顺序已保存!":obj.data;
}
Ext.Msg.alert('信息', msg);
},
failure: function(response, op){
Ext.Msg.alert('信息', response.responseText);
}
});
}
}]
});
function buttonMove(toward){
var sm = grid.getSelectionModel();
var data = sm.getSelections();
if (sm.hasSelection()) {
//获取选择行第1行
var rec = sm.getSelected();
var ds = grid.getStore();
//默认的插入行
var rowIndex = ds.indexOfId(rec.id) + toward;
//判断插入是否已选择,如果已选择,重新获取插入行
var ri = []; //插入行的行号数组
for (var i = 1; i < data.length; i++) {
var index = ds.indexOfId(data[i].id)
ri.push(index);
}
//对插入行数组进行排序,下移顺序排序,上移反序排序
if (toward == 1) {
ri.sort(function(x, y){
if (parseInt(x) > parseInt(y))
return 1
else
return -1
})
}
else {
ri.sort(function(x, y){
if (parseInt(x) > parseInt(y))
return -1
else
return 1
})
}
//如果插入行是选择行,则插入行前移或后移
for (var i = 0; i < ri.length; i++) {
if (rowIndex == ri[i])
rowIndex += toward;
}
//判断插入行是否已在顶部或底部,不是则执行移动操作
if (rowIndex < 0) {
Ext.Msg.alert('信息', '记录已在顶部');
}
else
if (rowIndex >= ds.getCount()) {
Ext.Msg.alert('信息', '记录已在底部');
}
else {
move(rowIndex, data);
}
}
else {
Ext.Msg.alert('信息', '请选择记录');
}
}
function move(rindex, data){
var ds = grid.getStore(), rdata = ds.getAt(rindex); // 获取插入行的记录
var toward = 0; // 默认是上移操作
var index = ds.indexOfId(data[0].id);
if (rindex > index){
toward = 1 // 如果是下移,修改方向值
}
// 移除选择行
for (i = 0; i < data.length; i++) {
ds.remove(ds.getById(data[i].id));
}
// 根据id获取插入行的新位置并根据移动操作计算出插入位置
rindex = ds.indexOfId(rdata.id) + toward;
// 从插入位置依次插入选择行
for (i = 0; i < data.length; i++) {
ds.insert(rindex, data[i]);
rindex++;
}
var sm = grid.getSelectionModel();
if (sm)sm.selectRecords(data);// 重新选择选择行
}
new Ext.dd.DropTarget(grid.getEl(), {
ddGroup: grid.ddGroup || 'GridDD',
grid: grid,
gridDropTarget: this,
notifyDrop: function(dd, e, data){
var t = e.getTarget();// 获取选择行
var rindex = this.grid.view.findRowIndex(t);
if (rindex === false)
return false;
var ds = this.grid.getStore();
var rdata = ds.getAt(rindex);
// 判断插入行是否选择行,如果是不允许插入
for (i = 0; i < data.selections.length; i++) {
var rowIndex = ds.indexOfId(data.selections[i].id);
if (rindex == rowIndex)
rindex = false;
}
move(rindex, data.selections)
return true;
},
notifyOver: function(dd, e, data){
var t = e.getTarget();
var rindex = this.grid.view.findRowIndex(t);
var ds = this.grid.getStore();
for (i = 0; i < data.selections.length; i++) {
var rowIndex = ds.indexOfId(data.selections[i].id);
if (rindex == rowIndex)
rindex = false;
}
return (rindex === false) ? this.dropNotAllowed : this.dropAllowed;
}
});
</script>