Ext-GridPanel 拖拽排序的实现方案
前两天在项目中需要实现拖拽排序，研究了一段时间，搞定了，写出来做个备忘。
参考了以为网友提供的方法。就是排序值的设计。
说下理论：当拖到最前面，排序值就是第一个的值-1，拖到最后一个就是最后一个的排序值加1，拖到中间就是，上下两个排序值的平均值。
下面是实现的部分代码：
1: var cm = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer(), sm, {
2: header : '答案值',
3: dataIndex : 'answer',
4: width : 100
5: }, {
6: header : '答案分值',
7: dataIndex : 'answerScore',
8: width : 100
9: }, {
10: header : '答案排序值',
11: dataIndex : 'answerIndex',
12: width : 100
13: } , {
14: header : '答案描述',
15: dataIndex : 'description',
16: width : 100
17: }]);
18: var ds_da = new Ext.data.Store( {
19: proxy : new Ext.data.HttpProxy( {
20: url : 'admin/getFactorAnsListByFactor.action?factorid='+fdid
21: }),
22: reader : new Ext.data.JsonReader( {
23:
24: root : ''
25: }, [ {
26: name : 'answer'
27: }, {
28: name : 'answerScore'
29: }, {
30: name : 'answerIndex',
31: type:'float'
32: }, {
33: name : 'description'
34: } ,{
35: name : 'id'
36: }])
37: });
38: var answerPanel=new Ext.grid.GridPanel({
39: title:"答案列表",
40: ds : ds_da,
41: cm : cm,
42: sm : sm,
43: height : 200,
44: autoSizeColumns : true,
45: loadMask : true,
46: dropConfig: {appendOnly:false},
47: trackMouseOver : true,
48: enableDragDrop: true,
49: //ddGroup: "GridDD",
50: tbar:toolbar
51: });
以上是Grid
1: var ddrow = new Ext.dd.DropTarget(answerPanel.container, {
2: ddGroup : 'GridDD',
3: copy : false,
4: notifyDrop : function(dd, e, data) {
5: // 选中了多少行
6: debugger
7: var rows = data.selections;
8: // 拖动到第几行
9: var index = dd.getDragData(e).rowIndex;
10: if (typeof(index) == "undefined") {
11: return;
12: }
13: // 修改store
14: for(i = 0; i < rows.length; i++) {
15: var rowData = rows[i];
16: if(!this.copy) ds_da.remove(rowData);
17:
18: if(index== 0)
19: {
20: rowData.data.answerIndex -=1 ;
21: }
22: else if(index == ds_da.data.items.length)
23: {
24: rowData.data.answerIndex = ds_da.data.items[index-1].data.answerIndex+1;
25: }
26: else
27: {
28: rowData.data.answerIndex = (ds_da.data.items[index-1].data.answerIndex + ds_da.data.items[index].data.answerIndex)/2
29: }
30: ds_da.insert(index, rowData);
31: updateRow(rowData,fdid);
32: }
33: }
34: });
以上是拖拽目标事件和算法。
特别注意的是：拖拽的这个目标方法，一定要写在那个GridPanel 已经显示出来的情况下。不然会报错。这里我卡了很长一段时间没有找到原因。
