再贴一段js相关的代码,使用了EXTjs框架

迈不过友情╰ 2022-09-19 10:42 76阅读 0赞

估计大家还是看不明白,因为这是另一个项目的一个模块  
  
有兴趣的看着玩吧,看不懂的给我留言好了.  
  
/\*\*  
\* 服务端处理程序:../Server.php  
\* controller:字符串,控制器,用于服务端分类,  
\* action:字符串,动作,用于服务端分类,  
\* params:附加POST参数,是一个对象,包括所有参数键值对,  
\* columns:返回数据的列信息,一个数组,每个元素是一个对象,包括id(optional),name,mapping  
\* callback:得到数据后的回调函数,参数为一个ds  
\* 错误信息的根是Error,第一个结点是错误代码,第二个结点是错误信息,  
\* 调试信息的要是Debug,每个结点一个数据,  
\* 正常信息的根是RMT  
\*/  
function Ajax(controller,action,params,columns,callback,scope)\{  
this.c;  
this.action=action;  
this.columns=columns;  
this.callback=callback;    
this.scope=scope;  
    
//最终处理  
this.fnProcess=function(json)\{  
  if(!json)return;  //得到的JSON数据错误  
  
  //返回的数据行的格式  
  //var reader=new Ext.data.JsonReader(this.columns);  
  //var ds=new Ext.data.JsonStore(\{data:json\[this.action\],reader:reader,fields:this.columns\});  
  //this.callback.call(this.scope,ds);    
  this.callback.call(this.scope,json);  
\};  
  
//成功时的处理  
this.(response,opts)\{  
  var json=eval('(' + response.responseText + ')');  
  if(Ext.isEmpty(json))\{  
   Ext.Msg.alert("错误","服务器返回了空文档:<BR/>"+response.responseText);  
   this.fnProcess(false);  
   return;  
  \}  
  if(!Ext.isEmpty(json.error))\{  
   var code=json.error.code;  
   var message=json.error.message;  
   Ext.Msg.alert("由服务器返回的错误信息","错误代码:"+code+"<BR/>错误内容:"+message);  
   this.fnProcess(false);  
   return;  
  \}  
  if(!Ext.isEmpty(json.debug))\{  
   var title='由服务器返回的调试信息';  
   var content='';  
   for(key in json.debug)\{      
    c+key+":"+json.debug\[key\]+"<BR/>";        
   \}  
   Ext.Msg.alert(title,content);  
   this.fnProcess(false);  
   return;  
  \}  
  if(Ext.isEmpty(json\[this.action\]))\{  
   Ext.Msg.alert("返回数据错误","服务器返回的文档格式错误:"+response.responseText);  
   this.fnProcess(false);  
   return;  
  \}  
  this.fnProcess(json);  
\};  
  
/\*\*  
\*失败时的处理  
\*/  
this.()\{    
  Ext.Msg.alert("错误","页面地址访问错误");  
  this.fnProcess(false);  
\};  
  
    /\*\*  
    \* 调用 Ext的Ajax进行请求  
    \*/  
Ext.Ajax.request(\{  
  url:"../Server.php?c&action="+action,  
  params:params,  
  success:this.onSuccess,  
  failure:this.onFailure,  
  scope:this  
\});  
  
\}  
/\*\*  
\* 表格处理类,  
\* 入口参数对象包括以下域:  
\* title:表格标题,  
\* columns:列,  
\* 其中包括unique,是否唯一,  
\*  
\* idColumn:哪一列是关键字,  
\* nameColumn:哪一列是名字(用于添加和删除提示),  
\*  
\* controller:控制器,  
\* actionLoad:读入数据的动作,  
\* actionAdd:添加数据的动作,  
\* actionDel:删除数据的动作,  
\* actionSave:保存数据的动作,  
\* titleEdit:修改动作的标题,行数据是否可以继续编辑(跳转到下一页)  
\* urlEdit:点击修改后的页面  
\* renderTo:页面中的DIV  
\* height:  
\* autoHeight:  
\* params:额外参数,用于读入数据,  
\*  
\* 添加数据时,传送回服务器的是name及附加参数,  
\* 向服务器请求数据时,回复的行标识与请求动作相同,  
\*/  
function Table(config)\{  
//默认参数  
this.config=\{  
  title:'List',  
  columns:\[  
  \{name:'ID'\},  
  \{name:'name'\}  
  \],  
  idColumn:'id',  
  nameColumn:'name',  
  controller:'Default',  
  actionLoad:'Load',  
  actionAdd:'Add',  
  actionDel:'Del',  
  actionSave:'Save',    
  renderTo:null,  
  height:500,  
  autoHeight:false,  
  params:\{\}  
\}  
//更新参数  
for(key in config)this.config\[key\]=config\[key\];  
this.cm=new Ext.grid.ColumnModel(this.config.columns);  
this.cm.defaultSortable=true;  
//根据columns生成record  
this.record=\[\];  
for(var i=0;i<this.config.columns.length;i++)\{  
  var dataIndex=this.config.columns *.dataIndex;    
  if(Ext.isEmpty(dataIndex))dataIndex=this.config.columns.name;  
  this.record\[this.record.length\]=\{name:dataIndex\};  
\}  
  
this.grid=\{\};  
this.store=\{\};  
  
//本地化的Ajax方法,简化参数,以方便调用  
this.ajax=function(action,params,fn)\{  
  //将全局参数附加到本次参数上  
  var param=this.config.params;  
  for(key in params)  
   param\[key\]=params\[key\];  
  new Ajax(  
   this.config.controller,  
   action,  
   param,  
   this.record,  
   fn,  
   this  //指明了回调方法fn的上下文  
  );  
\};  
    
//载入数据完成时的事件,构造显示表格  
this.(json)\{    
  var action=this.config.actionLoad;  
  var reader=new Ext.data.JsonReader(this.record);    
  this.store=new Ext.data.JsonStore(\{data:json\[action\],reader:reader,fields:this.record\});  
  this.store.on('update',this.onUpdate,this);    
    
  var buttons=\[//位于上方的按钮  
    \{  
             text: '<U>添加'+this.config.title+'</U>',  
             handler : this.onAdd,  
             scope:this  
         \},\{  
          text:'<U>删除'+this.config.title+'</U>',  
          handler:this.onDel,  
             scope:this  
         \},\{  
          text:'<U>提交修改</U>',  
          handler:this.onSave,  
             scope:this  
         \},\{  
          text:'<U>取消所有修改</U>',  
          handler:this.onCancel,  
             scope:this  
         \}          
        \];  
    
  if(this.config.titleEdit)  
  buttons\[buttons.length\]=\{  
      text:'<U>'+this.config.titleEdit+'</U>',  
      handler: this.onEdit,  
      scope:this  
     \};      
    
  //表格  
  this.grid=new Ext.grid.EditorGridPanel(\{  
   store:this.store,  
   cm:this.cm,  
   renderTo:this.config.renderTo, //这个需要在HTML中设置,层.  
   title:this.config.title+'列表',  
   frame:true,  
   autoHeight:this.config.autoHeight,  
   height:this.config.height,  
   autoWidth:true,  
   clicksToEdit:1,  
    //bbar:buttons,  
    tbar:buttons  
  \});    
\};  
  
/\*\*  
\*根据列名检查这一列是否是需要唯一处理的  
\*/  
this.isUnique=function(col)\{  
  for(key in this.config.columns)\{  
   if(this.config.columns\[key\].dataIndex==col)\{  
    return this.config.columns\[key\].unique;  
   \}  
  \}  
\};  
/\*\*  
\*插入后,得到服务器端的回复  
\*/  
this.(json)\{      
  var action=this.config.actionAdd;  
  var rec=new Ext.data.Record(json\[action\]);  
  this.store.insert(0,\[rec\]);  
  this.grid.startEditing(0,1);  
    \};  
    //开始插入数据,向服务器端发送数据      
this.(btn, text)\{  
  if(btn!='ok')return;      
     if(text.trim().length==0)\{  
      Ext.Msg.alert('提示','您没有输入'+this.config.title+'名称');  
      return;  
     \}              
  if(this.isUnique(this.config.nameColumn))\{  
      var ret=this.store.find(this.config.nameColumn,text);  
      if(ret>-1)\{  
       Ext.Msg.alert('提示','名为:'+text+'的'+this.config.title+'已经存在,不能重复添加.');  
       return;  
      \}  
  \}    
  var param=\{\};  
  param\[this.config.nameColumn\]=text;  
     this.grid.stopEditing();  
  this.ajax(this.config.actionAdd,param,this.onInsert);  
\};  
//点击插入新数据时触发  
this. ()\{  
  Ext.Msg.prompt('提示', '请输入'+this.config.title+'名:',this.onAddDo,this);    
\};  
  
//当点击修改按钮时触发  
this. ()\{  
  var cell=this.grid.selModel.getSelectedCell();  
  if(!cell)\{  
   Ext.Msg.alert("提示","请首先选择"+this.config.title+",然后再使用此功能.");  
   return;  
  \}  
  var rec=this.store.getAt(cell\[0\]);  
  var url=this.config.urlEdit+"?";  
  for(key in this.config.params)\{  
   url=url+key+"="+this.config.params\[key\]+"&";  
  \}  
  url=url+this.config.idColumn+"="+rec.data\[this.config.idColumn\];  
  location.href=url;    
\};  
  
//检查重复值,参数是data.Store,当前Record  
this.fnCheckUnique=function(ds,record)\{  
  var id=this.config.idColumn;  
  var columns=this.config.columns;  
  for(var i=0;i<ds.getCount();i++)\{  
   var rec=ds.getAt(i);  
   if(rec.data\[id\]==record.data\[id\])continue;  
   for(var j=0;j<columns.length;j++)\{  
    if(!columns\[j\].unique)continue;  
    var dataIndex=columns\[j\].dataIndex;      
    if(rec.data\[dataIndex\]==record.data\[dataIndex\])return false;  
   \}  
  \}  
  return true;  
\}  
  
//当一个输入域被修改后触发  
this.(ds,record,operation)\{  
  if(operation!=Ext.data.Record.EDIT) return;  
    
  var cell=this.grid.selModel.getSelectedCell();  
  if(!this.fnCheckUnique(ds,record))\{        
      record.cancelEdit();        
      Ext.Msg.alert('提示','本行输入的数据与其它行重复,请修改.');  
      return true;  
     \}  
   return true;  
\};  
    
this.(json)\{  
  var action=this.config.actionDel;  
  var rec=json\[action\];    
  Ext.Msg.alert('提示','您成功删除了'+this.config.title+':'+rec\[this.config.nameColumn\]);  
  this.store.remove(this.grid.selModel.selection.record);    
\};  
this.(button,id)\{  
  if(button!='yes')return;  
     this.grid.stopEditing();  
  var param=\{\};  
  param\[this.config.idColumn\]=id;    
  this.ajax(this.config.actionDel,param,this.onDelete);        
\};  
  
this. ()\{  
  var cell=this.grid.selModel.getSelectedCell();  
  if(!cell)\{  
   Ext.Msg.alert("提示","请首先选择"+this.config.title+",然后再使用此功能.");  
   return;  
  \}  
  var name=this.grid.selModel.selection.record.data\[this.config.nameColumn\];  
  var id=this.grid.selModel.selection.record.data\[this.config.idColumn\];  
  Ext.Msg.show(\{  
      title:'确认',  
      msg: '您确定要删除'+this.config.title+':'+name+"?",  
      buttons: Ext.Msg.YESNOCANCEL,  
      fn:function(button)\{this.onDelDo(button,id)\} ,      
      animEl: 'elId',  
    icon: Ext.MessageBox.QUESTION,  
    scope:this      
  \});    
\};  
  
this.(json)\{  
  this.grid.store.commitChanges(); //并修改数据的修改状态为未修改  
\};  
this. ()\{  
  //保存数据  
  var mr=this.store.getModifiedRecords();  
  if(mr.length==0)\{  
   Ext.Msg.alert('提示','您没有修改任何内容,不需要提交.');  
   return;  
  \}  
    
  //这里要前端检查是否有重复值  
  for(i=0;i<mr.length;i++)\{  
   if(!this.fnCheckUnique(this.store,mr))\{  
       Ext.Msg.alert('提示','数据重复,请修改.');  
    return;    
   \}  
  \}  
    
  //保存数据时,提交一个数据的参数  
  var params=\{count:mr.length\};  
  for(i=0;i<mr.length;i++)\{  
   for(j=0;j<this.config.columns.length;j++)\{  
    var dataIndex=this.config.columns\[j\].dataIndex;  
    params\[dataIndex+i\]=mr.data\[dataIndex\];    
   \}  
  \};  
  this.grid.stopEditing();  
  this.ajax(this.config.actionSave,params,this.onSaveDo);  
\};  
  
this.onCancelDo= function(button)\{  
  if(button=='yes')\{        
   this.grid.store.rejectChanges();  
  \}  
\};  
this. ()\{  
  Ext.Msg.show(\{  
   title:'确认',  
      msg: '您确定要取消当前所有修改吗?',  
      buttons: Ext.Msg.YESNOCANCEL,  
      fn:this.onCancelDo,      
      scope:this,  
      animEl: 'elId',  
    icon: Ext.MessageBox.QUESTION  
  \});    
\};  
  
  
//当关闭时发生,要检查是否有需要保存的数据  
this.chkSaved=function()\{  
  var mr=this.grid.store.getModifiedRecords();  
  return (mr.length==0);    
\};  
//以上生成了所有的处理事件,开始请求数据  
this.ajax(this.config.actionLoad,null,this.onLoaded);  
window.registerTable(this);  
  
//去除等待标识  
    if(Ext.get('loading'))Ext.get('loading').remove();  
    if(Ext.get('loading-mask'))Ext.get('loading-mask').fadeOut(\{remove:true\});  
\}  
//每个Table对象都要注册自己,现时实现一个chkSaved方法  
window.registerTable=function(table)\{  
if(!window.registeredTable)window.registeredTable=\[\];  
window.registeredTable.push(table);  
\}  
window.()\{  
if(!window.registeredTable)return;  
for(var i=0; i<window.registeredTable.length;i++)\{  
  var table=window.registeredTable;  
  if(!table.chkSaved.call(table))  
   return '当前页面还有未保存的数据,您是否要放弃对这些数据的修改?';  
\}  
\}*

阅读(431) | 评论(0) | 转发(0) |

上一篇：贴一段代码吧,纯PHP的,只是一个项目中的一部分

下一篇：再贴一个Fleaphp相关的