通过拖拽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.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.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) 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.id); if (rindex > index){ toward = 1 // 如果是下移，修改方向值 } // 移除选择行 for (i = 0; i < data.length; i++) { ds.remove(ds.getById(data.id)); } // 根据id获取插入行的新位置并根据移动操作计算出插入位置 rindex = ds.indexOfId(rdata.id) + toward; // 从插入位置依次插入选择行 for (i = 0; i < data.length; i++) { ds.insert(rindex, data); 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.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.id); if (rindex == rowIndex) rindex = false; } return (rindex === false) ? this.dropNotAllowed : this.dropAllowed; } }); </script>
页:
[1]