extjs 表格中添加、删除、撤销、刷新功能

最新推荐文章于 2022-07-09 11:01:47 发布

wangchuanbaodhcc

最新推荐文章于 2022-07-09 11:01:47 发布

阅读量4k

点赞数

分类专栏： JAVA js ExtJs 文章标签： extjs action function actionlink delete string

本文链接：https://blog.youkuaiyun.com/wangchuanbaodhcc/article/details/6759344

版权

ExtJs 同时被 3 个专栏收录

11 篇文章

订阅专栏

JAVA

9 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了使用JavaScript创建数据库操作的Action，实现增删改查功能，并通过API集成完成数据的远程更新与删除，适用于前端与后端交互场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. js页面
var add_action=new Ext.Action({
		  id:'add',
		  text:BizFuse.message['new.text'],
		  iconCls:BizFuse.message['new.icon'],
		  handler:function(){
		  	var myRecord=Ext.data.Record.create([
		  	{name:'id',type:'VARCHAR2(100)'},
		  	{name:'modeid',type:'VARCHAR2(100)'},
		  	{name:'fldname',type:'VARCHAR2(100)'},
		  	{name:'fldtype',type:'VARCHAR2(100)'},
		  	{name:'fldlen',type:'NUMBER(10)'},
		  	{name:'fldval',type:'VARCHAR2(100)'},
		  	{name:'fldisnull',type:'NUMBER(10)'},
		  	{name:'fldcomment',type:'VARCHAR2(100)'},
		  	{name:'prepare2',type:'VARCHAR2(100)'},
		  	{name:'prepare3',type:'VARCHAR2(100)'},
		  	{name:'prepare4',type:'VARCHAR2(100)'},
		  	{name:'fldorder',type:'VARCHAR2(100)'}]);

		  	var p=new myRecord({
		  	      id:'',
		  	      modeid:'',
		  	      fldname:'',
		  	      fldtype:'',
		  	      fldlen:'',
		  	      fldval:'',
		  	      fldisnull:'',
		  	      fldcomment:'',
		  	      prepare2:'',
		  	      prepare3:'',
		  	      prepare4:'',
		  	      fldorder:''});
		  grid.stopEditing();
		  grid.getStore().insert(0,p);
		  grid.startEditing(0,0);
		  }
		  
	    });
	var delete_action=new Ext.Action({
		  id:'delete',
		  text:BizFuse.message['delete.text'],
		  iconCls:BizFuse.message['delete.icon'],
		   handler:function(){
                   
                   if (!grid.getSelectionModel().hasSelection())
                     return;

                  var privil=grid.getSelectionModel().getSelected().data;

			if (!privil) {
				alert('请选择一条记录');
				return;
			} else {
				//BizFuse.grid_delete_function(initialConfig.linkDel,privil.id);
				Ext.Msg.confirm('信息','确实要删除选择的信息?',function(btn){
				    if('yes'==btn){
				      Ext.Ajax.request({
				         url:initialConfig.linkDel,
				         params:{id:privil.id},
				         success:function(form,action){
				                 alert('删除成功');
				                 window.location.reload();
				                 },
				         failure:function(form,action){
				                alert('删除失败');
				                }
				         });
	     
				      } 
				      else{
				      return false;
				         }
				})
			}
		  }
	    });
	    
	    
	    
	    var reset_action=new Ext.Action({
		  id:'reset',
		  text:'撤销',
		  iconCls:BizFuse.message['reset.icon'],
		  handler:function(){
		  	grid.getStore().reload();
		  }
		  
	    });

    var refresh_action=new Ext.Action({
        text:BizFuse.message['refresh.text'],
        iconCls:BizFuse.message['refresh.icon'],
        handler:function(){
            window.location.reload();
           }
         });
    var grid=new Ext.grid.EditorGridPanel({
            region:'center',
            cm:cm,
            store:store,
             clicksToEdit  :1,
             sm:new Ext.grid.RowSelectionModel({
                     singleSelect:true
                     }),
                     
            viewConfig:{
                 forceFit:true,
                 enableRowBody:true,        
                 emptyText : BizFuse.message['data.empty']
            }
       });
  
    var panel=new Ext.Panel({
        region:'center',
        layout:'border',
        tbar:[add_action,'-',delete_action,'-',reset_action,'-',save_action,'-',refresh_action],
        items:[grid]
       });
     var viewPort=new Ext.Viewport({
         layout : 'border',
        items : [ panel ]
       });
    
       grid.getStore().load({params:{
          modeid:modeid
          }});
          
          
       grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex("id"),true);
       grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex("modeid"),true);


 2.jsp页面
 Ext.QuickTips.init();
                        new EditTempPage({
                           cm:cm,
                           store:store,
                           modeid:'${modeid}',
                           linkDel:'${linkDel.href}'
                               
                           })
                        });

3. .java 类
 public class EdittempPage extends BasePage {
    private TemplateDAO templateDAO = (TemplateDAO)SpringContextHelper.getBean("templateDAO");
    public ActionLink linkDel = new ActionLink("linkDel",this,"onLinkDel"); 


	public boolean onLinkDel(){
	    String id=linkDel.getParameter("id");
	     Template t= templateDAO.findById(id);
	     templateDAO.delete(t);
	     directPrint("{\"success\":true}");
	return false;
	
      }
}

BasePage 类
protected void directPrint(String encoding, String s) {
        HttpServletResponse response = getContext().getResponse();

        response.setContentType("text/plain");
        response.setHeader("Pragma", "no-cache");
        response.setCharacterEncoding(encoding);

        try {

            PrintWriter writer = response.getWriter();

            writer.println(s);
            writer.close();
            
            setPath(null);
            

        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
    }
    
    protected void directPrint(String s) { 
        directPrint("UTF-8", s);
    }