现在的位置: 首页 > 综合 > 正文

Ext的ColumnTree拖动时处理

2013年09月01日 ⁄ 综合 ⁄ 共 15051字 ⁄ 字号 评论关闭

/**
 * 刊物维护主页面
 *
 * @author:yK
 * @version: 1.0
 * @date:2008-6-4
 */
Ext.onReady(function() {
 /** ************函数定义(start)***************** */
 // 显示Tip
 function showTip() {
  qt.showAt([document.body.offsetWidth / 2 - 70,
    document.body.clientHeight / 2 - 40]);
 }

 // 隐藏Tip
 function hideTip() {
  qt.hide();
 }

 // (ajax回调函数的内容)提示用户操作结果
 function showResult(response, func) {
  hideTip();
  var data = Ext.decode(response.responseText);
  Ext.Msg.alert('信息', data.msg, func);
 }
 /** ************函数定义(end)***************** */

 // ext初始化
 Ext.QuickTips.init();

 var qt = new Ext.Tip({
  title : '提示:',
  width : 120,
  html : '正在和服务器交互...'
 });

 var tree = new Ext.tree.ColumnTree({
  width : '100%',
  enableDD : true,
  autoHeight : true,
  rootVisible : false,
  autoScroll : true,
  title : '刊物栏目与文章列表',
  columns : [{
   width : '100%',
   dataIndex : 'title'
  }],

  loader : new Ext.tree.TreeLoader({
   dataUrl : Ext.appRootPath
     + '/publicationMainAction.do?method=tree&pubId=' + pubId,
   uiProviders : {
    'col' : Ext.tree.ColumnNodeUI
   }
  }),

  root : new Ext.tree.AsyncTreeNode({
   text : 'Tasks'
  })
 });

 // 树的拖动排序
 tree.on('beforenodedrop', function(e) {

  onGridDrop(e);
 });

 // 节点拖动处理方法
 function onGridDrop(e) {
  var node = e.target; // 拖动到的树节点
  var dropNode = e.dropNode;// 被拖动的树节点
  // alert(dropNode.getDepth());
  // alert(node.getDepth());
  // alert(dropNode.isAncestor());
  // alert(node.isAncestor());
  // if (e.point == 'append') {
  // alert('当前"' + e.dropNode.attributes.title + '"被"'
  // + e.target.attributes.title + '"录取!');
  // } else if (e.point == 'above') {
  // alert('当前"' + e.dropNode.attributes.title + '"放在了"'
  // + e.target.attributes.title + '"上面!');
  // } else if (e.point == 'below') {
  // alert('当前"' + e.dropNode.attributes.title + '"放在了"'
  // + e.target.attributes.title + '"下面!');
  // }
  if (dropNode.attributes.sort == 'pubcol') {
   Ext.Msg.alert('提示', '栏目不可拖动!');
   e.cancel = true;
  } else {
   if (e.point != 'append') {
    if (e.point == 'above' && node.attributes.sort == 'pubcol') {
     Ext.Msg.alert('提示', '文章不可拖动到栏目外!');
     e.cancel = true;
    }
    if (e.point == 'below' && node.attributes.sort == 'pubcol') {
     Ext.Msg.alert('提示', '文章不可拖动到栏目外!');
     e.cancel = true;
    }
   } else {
    e.cancel = false;
   }
   if (e.cancel == false)
    if (node.attributes.sort == 'pubcol') {
     // 采取节点直接录入操作,默认放置dropNode
     // alert(node.attributes.title);
     showTip();
     nodeDD(dropNode.attributes.parId, "",
       dropNode.parentNode.attributes.pclId,
       node.attributes.pclId, "default");
    } else {
     if (e.point == 'above') {
      showTip();
      // dropNode节点在node.attributes.parId节点上面
      nodeDD(dropNode.attributes.parId,
        node.attributes.parId,
        dropNode.parentNode.attributes.pclId,
        node.parentNode.attributes.pclId, "up");
     }
     if (e.point == 'below') {
      showTip();
      // dropNode节点在node.attributes.parId节点下面
      nodeDD(dropNode.attributes.parId,
        node.attributes.parId,
        dropNode.parentNode.attributes.pclId,
        node.parentNode.attributes.pclId, "down");
     }
     // alert(node.attributes.title);
     // alert(node.parentNode.attributes.title);
    };
  }
  // alert(s);
  // alert(node.attributes.sort);
  // alert(e.dropNode.attributes.sort);
 }

 // 节点拖动处理请求
 // dropPar---->被拖动的文章
 // tarPar ---->拖动到的文章
 // dropPcl---->被拖动(即该删除文章的)栏目
 // tarPcl ---->拖动到(即该新增文章的)栏目
 // tarNode---->节点排序标签即(判断该被拖动的文章在拖动到的文章下或是上)
 function nodeDD(dropPar, tarPar, dropPcl, tarPcl, tarNode) {
  Ext.Ajax.request({
   // 请求地址
   url : Ext.appRootPath
     + "/publicationMainAction.do?method=treeTaxis&dropPar="
     + dropPar + "&tarPar=" + tarPar + "&dropPcl=" + dropPcl
     + "&tarPcl=" + tarPcl + "&tarNode=" + tarNode,
   // 成功时回调
   success : function() {
    hideTip();
    // window.location.reload();
   },
   failure : function() {
    Ext.Msg.alert('提示', '排序出错!');
    window.location.reload();
   }
  });
 }
 tree.on('click', function(node) {
  if (node.attributes.sort == 'pubcol') {
   // alert(node.attributes.pclId);
   // deletePubcolBtn.show();
   // deleteArticleBtn.hide();
   deleteArticleBtn.setHandler(function() {
    Ext.Msg.alert('提示', '请选择一篇文章后再进行删除操作!');
   });
   deletePubcolBtn.setHandler(function() {
    Ext.Msg.confirm('提示', '您确定要删除此栏目吗?', function(btn) {
     if (btn == "yes") {
      showTip();
      Ext.Ajax.request({
       // 请求地址
       url : Ext.appRootPath
         + "/publicationMainAction.do?method=delPubcol&pclId="
         + node.attributes.pclId,
       // 成功时回调
       success : function() {
        hideTip();
        Ext.Msg.alert('提示', '删除栏目成功!', function() {
         window.location.reload();
        });
       }
      });
     }
    });
   });
  }
  if (node.attributes.sort == 'pubart') {
   // alert(node.attributes.parId);
   // deleteArticleBtn.show();
   // deletePubcolBtn.hide();
   deletePubcolBtn.setHandler(function() {
    Ext.Msg.alert('提示', '请选择一个栏目后再进行删除操作!');
   });
   deleteArticleBtn.setHandler(function() {
    Ext.Msg.confirm('提示', '您确定要删除此文章吗?', function(btn) {
     if (btn == "yes") {
      showTip();
      Ext.Ajax.request({
       // 请求地址
       url : Ext.appRootPath
         + "/publicationMainAction.do?method=delPubart&parId="
         + node.attributes.parId,
       // 成功时回调
       success : function() {
        hideTip();
        // 获取响应的json字符串
        Ext.Msg.alert('提示', '删除文章成功!', function() {
         window.location.reload();
        });
       }
      });
     }
    });
   });
  }
 });
 tree.on('dblclick', function(node) {
  if (node.attributes.title == "暂无刊物栏目!") {
   return;
  }
  if (node.attributes.sort != 'pubcol') {
   location.href = Ext.appRootPath
     + "/pubarteditMainAction.do?method=getPubartByParId&parId="
     + node.attributes.parId;
  } else {
   return;
  }
 });
 // 定义布局
 var viewport = new Ext.Viewport({
  layout : 'border',
  items : [{
   region : 'north',
   contentEl : 'north-div',
   split : false,
   border : false,
   collapsible : false,
   height : 27
  }, {
   // title : '刊物栏目与文章列表',
   region : 'west',
   contentEl : 'west-div',
   split : false,
   border : false,
   width : 200,
   collapsible : false,
   layout : 'accordion',
   layoutConfig : {
    titleCollapse : true,
    animate : true,
    activeOnTop : false
   },
   items : tree
  }, {
   region : 'center',
   contentEl : 'center-div',
   split : false,
   border : false,
   collapsible : false
  }]
 });

 // 定义顶部工具栏上的返回按钮
 var backBtn = new Ext.Button({
  text : '返回',
  handler : function() {
   location.href = Ext.appRootPath
     + "/publicationListAction.do?method=listAllPublications";
  }
 });

 // 定义顶部工具栏上的修改刊物按钮
 var modifyPublicationBtn = new Ext.Button({
  text : '修改刊物',
  handler : function() {
   location.href = Ext.appRootPath
     + "/pubdefMainAction.do?method=updateJump&pubId=" + pubId;
  }
 });

 // 定义顶部工具栏上的修改栏目按钮
 var modifyColumnBtn = new Ext.Button({
  text : '修改栏目',
  handler : function() {
   location.href = Ext.appRootPath
     + "/pubcatalogEditMainAction.do?method=getColById&pubId="
     + pubId;
  }
 });

 // 定义顶部工具栏上的整合编辑按钮
 var integrationEditBtn = new Ext.Button({
  text : '整合编辑',
  handler : function() {
   showTip();
   location.href = Ext.appRootPath
     + "/pubinteditMainAction.do?method=getPubcolAndParByPubId&pubId="
     + pubId;
  }
 });

 // 定义顶部工具栏上的预览按钮
 var previewBtn = new Ext.Button({
  text : '预览',
  handler : function() {
   showTip();
   location.href = Ext.appRootPath
     + "/publicationViewAction.do?method=getAllColumnAndArticles&pubId="
     + pubId;
  }
 });

 // 定义顶部工具栏上的删除文章按钮
 var deleteArticleBtn = new Ext.Button({
  text : '删除文章',
  handler : function() {
   Ext.Msg.alert('提示', '请选择一篇文章后再进行删除操作!');
  }
 });

 // 定义顶部工具栏上的删除栏目按钮
 var deletePubcolBtn = new Ext.Button({
  text : '删除栏目',
  handler : function() {
   Ext.Msg.alert('提示', '请选择一个栏目后再进行删除操作!');
  }
 });

 // 定义定于工具栏上的提交按钮
 var submitBtn = new Ext.Button({
  text : '提交',
  handler : function() {

  }
 });

 // 定义顶部工具栏
 var topToolbar = new Ext.Toolbar({
  autoWidth : true,
  autoHeight : true,
  style : 'border:1px solid;',
  renderTo : 'north-div',
  items : ['-', backBtn, '-', modifyPublicationBtn, '-', modifyColumnBtn,
    '-', deletePubcolBtn, '-', deleteArticleBtn, '-',
    integrationEditBtn, '-', previewBtn, '-', submitBtn, '-']
 });

 // 定义查找工具栏上的开始查找按钮
 var startFindBtn = new Ext.Button({
  text : '开始查找',
  handler : function() {
   if (findForm.form.isValid()) {
    var tempParam = Ext.encode(findForm.getForm().getValues(false));
    ds.baseParams = {
     infoJsonStr : tempParam
    }
    ds.reload();
   }
  }
 });
 // 定义查找工具栏
 var findToolbar = new Ext.Toolbar({
  autoWidth : true,
  autoHeight : true,
  style : 'border:1px solid;',
  items : ['-', startFindBtn, '-']
 });
 // 定义属性分类数据
 var artSortStore = new Ext.data.Store({
  proxy : new Ext.data.HttpProxy({
   url : Ext.appRootPath
     + '/mydraftlist.do?method=querySort&scope=pub'
  }),
  reader : new Ext.data.JsonReader({
   totalProperty : 'allRowCount',
   root : 'root'
  }, [{
   name : 'artSort'
  }]),
  listeners : {
   loadexception : function() {
    Ext.Msg.alert('提示', '对不起,与数据库的交互出错!');
   }
  }
 });

 // 定义属性分类状态数据
 var artRlevelStore = new Ext.data.Store({
  proxy : new Ext.data.HttpProxy({
   url : Ext.appRootPath
     + '/mydraftlist.do?method=queryLevel&scope=pub'
  }),
  reader : new Ext.data.JsonReader({
   totalProperty : 'allRowCount',
   root : 'root'
  }, [{
   name : 'artRlevelId'
  }, {
   name : 'artRlevelSign'
  }]),
  listeners : {
   loadexception : function() {
    Ext.Msg.alert('提示', '对不起,与数据库的交互出错!');
   }
  }
 });

 // 定义查找form表单
 var findForm = new Ext.form.FormPanel({
  el : 'findForm',
  title : '查找信息',
  width : document.body.clientWidth - 200,
  height : 150,
  labelWidth : 70,
  waitMsgTarget : true,
  border : false,
  bodyStyle : 'padding:10px;',
  frame : true,
  tbar : findToolbar,
  layout : 'column',
  items : [{
   columnWidth : 1,
   layout : 'column',
   border : false,
   items : [{
    columnWidth : .34,
    layout : 'form',
    border : false,
    items : [{
     xtype : 'datefield',
     fieldLabel : '分类时间',
     name : 'startDate',
     height : 22,
     anchor : '95%'
    }]
   }, {
    columnWidth : .33,
    layout : 'form',
    border : false,
    labelWidth : 40,
    items : [{
     xtype : 'datefield',
     fieldLabel : '  至',
     name : 'endDate',
     labelSeparator : '',
     height : 22,
     anchor : '86%'
    }]
   }, {
    columnWidth : .33,
    layout : 'form',
    border : false,
    items : [{
     id : 'uqf',
     style : 'height:22px',
     xtype : 'combo',
     store : artSortStore,
     resizable : true,
     readOnly : false,
     resizable : false,
     valueField : "artSort",
     displayField : "artSort",
     mode : 'local',
     forceSelection : true,
     hiddenName : 'artSort',
     editable : false,
     triggerAction : 'all',
     allowBlank : true,
     fieldLabel : '属性分类',
     anchor : '99%'

    }]
   }]
  }, {
   columnWidth : .67,
   layout : 'form',
   border : false,
   items : [{
    xtype : 'textfield',
    fieldLabel : '标题',
    name : 'artTitle',
    height : 22,
    anchor : '93%'
   }, {
    xtype : 'textfield',
    fieldLabel : '内容',
    name : 'artContent',
    height : 22,
    anchor : '93%'
   }]
  }, {
   columnWidth : .33,
   layout : 'form',
   border : false,
   items : [{
    id : 'uqf1',
    style : 'height:22px',
    xtype : 'combo',
    store : artRlevelStore,
    resizable : true,
    readOnly : false,
    resizable : false,
    displayField : 'artRlevelSign',
    valueField : 'artRlevelId',
    hiddenName : 'rLevel',
    mode : 'local',
    forceSelection : true,
    editable : false,
    triggerAction : 'all',
    allowBlank : true,
    fieldLabel : '实际等级',
    anchor : '99%'
   }]
  }]
 });

 // 执行查找form表单的渲染
 findForm.render();

 // 定义选择模型
 var sm = new Ext.grid.CheckboxSelectionModel({
  handleMouseDown : Ext.emptyFn
 });
 // 定义列模型
 var cm = new Ext.grid.ColumnModel([sm, {
  header : '文章ID',
  dataIndex : 'artId',
  hidden : true
 }, {
  header : '文章标题',
  dataIndex : 'artTitle',
  align : 'center'
 }, {
  header : '编写日期',
  dataIndex : 'artDate',
  align : 'center'
 }, {
  header : '分类',
  dataIndex : 'artSort',
  align : 'center'
 }, {
  header : '属性分类状态',
  dataIndex : 'artClassedstatus',
  align : 'center',
  renderer : function(data) {
   if (data == "1")
    return "已分类";
  }
 }]);

 // 定义数据解析器
 var ds = new Ext.data.Store({
  baseParams : {
   size : 10
  },
  proxy : new Ext.data.HttpProxy({
   url : Ext.appRootPath
     + '/publicationMainAction.do?method=listAllOptionalArticle'
  }),
  pruneModifiedRecords : true,
  reader : new Ext.data.JsonReader({
   totalProperty : 'allRowCount',
   root : 'root'
  }, [{
   name : 'artId'
  }, {
   name : 'artTitle'
  }, {
   name : 'artDate'
  }, {
   name : 'artSort'
  }, {
   name : 'artClassedstatus'
  }]),
  listeners : {
   loadexception : function() {
    Ext.Msg.alert('提示', '对不起,与数据库的交互出错!');
   }
  }
 });
 // 定义可选文章列表工具栏上的选用按钮
 var chooseBtn = new Ext.Button({
  id : 'chBtn',
  text : '添加至栏目',
  handler : function() {
   var selections = sm.getSelections();
   if (selections.length == 0) {
    Ext.Msg.alert('提示', '请先选择文章!');
    return;
   }
   win.show();
   ds1.reload();
  }
 });
 // 定义可选文章列表工具栏
 var canChooseToolbar = new Ext.Toolbar({
  autoWidth : true,
  autoHeight : true,
  items : ['-', chooseBtn, '-']
 });

 // 定义Grid
 var grid = new Ext.grid.GridPanel({
  el : 'canChooseArticleList',
  title : '可选文章列表',
  sm : sm,
  ds : ds,
  cm : cm,
  frame : true,
  tbar : canChooseToolbar,
  height : document.body.clientHeight - 177,
  width : document.body.clientWidth - 200,
  enableColumnMove : false,
  stripeRows : true,
  trackMouseOver : true,
  loadMask : {
   msg : '正在加载数据...'
  },
  viewConfig : {
   forceFit : true
  },
  bbar : new Ext.PagingToolbar({
   pageSize : 10,
   store : ds,
   displayInfo : true,
   displayMsg : '显示第 {0} 条到 {1} 条记录, 共 {2} 条',
   emptyMsg : "没有记录"
  })
 });

 // 执行可选文章列表的渲染
 grid.render();
 // 可查询的属性分类加载
 artSortStore.load();
 // 可查询的分级加载
 artRlevelStore.load();

 // 执行可选文章列表数据的加载
 ds.load();
 // 栏目选择窗口
 /** **************************************************************************** */
 // 定义选择模型
 var sm1 = new Ext.grid.CheckboxSelectionModel({
  singleSelect : true
 });

 // 定义数据模型
 var cm1 = new Ext.grid.ColumnModel([{
  header : '栏目ID',
  dataIndex : 'pclId',
  hidden : true
 }, {
  header : '栏目名称',
  dataIndex : 'pclName',
  align : 'center'
 }]);

 // 定义数据解析器
 var ds1 = new Ext.data.Store({
  baseParams : {
   size : 8,
   pubId : pubId
  },
  proxy : new Ext.data.HttpProxy({
   url : Ext.appRootPath
     + '/publicationMainAction.do?method=getColumns&pubId='
     + pubId
  }),
  reader : new Ext.data.JsonReader({
   totalProperty : 'allRowCount',
   root : 'root'
  }, [{
   name : 'pclId'
  }, {
   name : 'pclName'
  }]),
  listeners : {
   loadexception : function() {
    Ext.Msg.alert('提示', '对不起,与数据库的交互出错!');
   }
  }
 });
 // 定义确定按钮
 var yesBtn = new Ext.Button({
  text : '确定',
  handler : function() {
   var selections = sm1.getSelections();
   var aselections = sm.getSelections();
   if (selections.length == 0) {
    Ext.Msg.alert('提示', '请先选择栏目!');
    return;
   }
   showTip();
   // 当前选中的栏目ID
   var columnId = selections[0].data.pclId;
   // 当前选中的文章ID(可能涉及到多篇文章)
   var articleIds = "";
   for (var i = 0; i < aselections.length; i++) {
    articleIds += aselections[i].data.artId;
    if (i != aselections.length - 1) {
     articleIds += ",";
    }
   }
   Ext.Ajax.request({
    url : Ext.appRootPath + "/publicationMainAction.do",
    params : {
     method : "copyArticles",
     articleIds : articleIds,
     columnId : columnId
    },
    success : function(response) {
     hideTip();
     var data = Ext.decode(response.responseText);
     win.hide();
     Ext.Msg.alert('提示', data.msg, function() {
      if (data.flag == "1") {
       location.href = location.href;
      }
     });
    },
    failure : function() {
     hideTip();
     Ext.Msg.alert('提示', '与服务器交互出错了!');
    }

   });
  }
 });
 // 定义取消按钮
 var cancleBtn = new Ext.Button({
  text : '取消',
  handler : function() {
   win.hide();
  }
 });
 // 定义弹出窗口的顶部工具栏
 var tbar = new Ext.Toolbar({
  autoWidth : true,
  autoHeight : true,
  items : ['-', yesBtn, '-', cancleBtn, '-']
 });
 var grid1 = new Ext.grid.GridPanel({
  sm : sm1,
  ds : ds1,
  cm : cm1,
  width : 200,
  height : 300,
  frame : true,
  stripeRows : true,
  enableColumnMove : false,
  loadMask : {
   msg : "正在加载数据..."
  },
  viewConfig : {
   forceFit : true
  },
  tbar : tbar,
  bbar : new Ext.PagingToolbar({
   pageSize : 8,
   store : ds1,
   displayInfo : true,
   displayMsg : '显示第 {0} 条到 {1} 条记录, 共 {2} 条',
   emptyMsg : "没有记录"
  })

 });
 // 定义刊物模板选择弹出窗口
 var win = new Ext.Window({
  title : '请选择刊物栏目',
  frame : true,
  layout : 'fit',
  width : 450,
  height : 300,
  modal : true,
  closeAction : 'hide',
  // animateTarget: 'chBtn',
  items : [grid1]
 });

});

抱歉!评论已关闭.