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

估计大家还是看不明白,因为这是另一个项目的一个模块

有兴趣的看着玩吧,看不懂的给我留言好了.

/**
* 服务端处理程序:../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("错误","服务器返回了空文档:
"+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+"
错误内容:"+message);
   this.fnProcess(false);
   return;
  }
  if(!Ext.isEmpty(json.debug)){
   var title='由服务器返回的调试信息';
   var content='';
   for(key in json.debug){    
    c+key+":"+json.debug[key]+"
";      
   }
   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  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: '添加'+this.config.title+'',
             handler : this.onAdd,
             scope:this
         },{
          text:'删除'+this.config.title+'',
          handler:this.onDel,
             scope:this
         },{
          text:'提交修改',
          handler:this.onSave,
             scope:this
         },{
          text:'取消所有修改',
          handler:this.onCancel,
             scope:this
         }        
        ];
  
  if(this.config.titleEdit)
  buttons[buttons.length]={
      text:''+this.config.titleEdit+'',
      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   var rec=ds.getAt(i);
   if(rec.data[id]==record.data[id])continue;
   for(var j=0;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   if(!this.fnCheckUnique(this.store,mr)){
       Ext.Msg.alert('提示','数据重复,请修改.');
    return;  
   }
  }
  
  //保存数据时,提交一个数据的参数
  var params={count:mr.length};
  for(i=0;i   for(j=0;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  var table=window.registeredTable;
  if(!table.chkSaved.call(table))
   return '当前页面还有未保存的数据,您是否要放弃对这些数据的修改?';
}
}