Ext Js Grid 编辑 新增 删除 保存的一个小示例

原创 2013年12月04日 09:59:56

文章转自http://tiantiankaixin.iteye.com/blog/743228

 

Ext Js Grid 编辑 新增 删除 保存的一个小示例 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Paging</title> 
     <link rel="stylesheet" type="text/css" href="css/ext-all.css" />    
     <script type="text/javascript" src="ext-base.js"></script> 
    <script type="text/javascript" src="ext-all.js"></script>   
    <script type="text/javascript" src="edit-grid-paging.js"></script> 
    <link rel="stylesheet" type="text/css" href="grid-examples.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.css" />      
</head> 
<body> 
<script type="text/javascript" src="examples.js"></script> 
<div id="topic-grid"></div> 
</body> 
</html> 

edit-grid-paging.js 

Ext.onReady(function(){ 
   
    Ext.QuickTips.init();     
    var authereditor = Editgridselect.init();//自定义下拉列表 数据取自数据库返回的Json 
     
    var Plant = Ext.data.Record.create([                 
           {name: 'title', type: 'string'}, 
           {name: 'forumtitle', type: 'string'}, 
           {name: 'forumid'}, 
           {name: 'author', type: 'string'}, 
           {name: 'replycount', type: 'int'}, 
           {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 
           {name: 'lastposter'}, 
           {name: 'excerpt'}, 
           {name: 'threadid'} 
      ]); 
     
    var store = new Ext.data.Store({ 
              proxy: new Ext.data.ScriptTagProxy({ //支持跨域获取数据 
                                url: 'http://extjs.com/forum/topics-browse-remote.php' 
                 }), 
              reader: new Ext.data.JsonReader({               
               root: 'topics', 
               totalProperty:'totalCount', 
               id: "threadid" 
               
           }, Plant) 
    }) 
     
    store.setDefaultSort('lastpost', 'desc'); 


    // pluggable renders 
    /* 
    function renderTopic(value, p, record){ 
        return String.format( 
                '<b>{0}</b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', 
                value, record.data.forumtitle, record.id, record.data.forumid); 
    } 
    */ 
    function renderTopic(value, p, record){ 
        return String.format( 
                '<b>{0}</b>', 
                value, record.data.forumtitle, record.id, record.data.forumid); 
    } 
    function renderLast(value, p, r){ 
        return String.format('{0} by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); 
    } 
     
    function examineflag(value){ 
        return value ? '是' : '否';   
    }; 
         
   
    // 顶部工具栏按钮 
    var contrltar = [{ 
                        text: '添加', 
                        handler : function(){ 
                                                var p = new Plant({ 
                                                                title: '', 
                                                                forumtitle:'', 
                                                                forumid:'', 
                                                                author: '', 
                                                                replycount: 0, 
                                                                lastpost: (new Date()).clearTime(),                                                                 
                                                                lastposter:'', 
                                                                excerpt:'新内容' 
                                                                }); 
                                             //var n = ds.totalLength; 
                                            grid.stopEditing(); 
                                            store.insert(0,p);      //ds.insert(n, p); 
                                            grid.startEditing(0,1); //grid.startEditing(n, 0);                                             
                        } 
                    },{ 
                        text: '删除', 
                        handler : function(){       
                            var gcm = grid.getSelectionModel(); 
                            var rows = gcm.getSelections(); 
                            if(rows.length>0){ 
                                for (var i = 0; i < rows.length; i++) { 
                                                        var row = rows; 
                                                        var data = row.data;                                                         
                                                        alert(row.data.threadid); 
                                                        store.remove(row); 
                                } 
                            }else{ 
                                Ext.Msg.alert('提示','请选择要删除的记录'); 
                            } 
                             
                             
                        } 
                    }]; 
    //底部工具栏按钮 
    var pagingBar = new Ext.PagingToolbar({ 
        pageSize: 10, 
        store: store, 
        beforePageText:'当前页', 
        afterPageText:'共{0}页', 
        firstText:'首页', 
        lastText:'尾页', 
        nextText:'下一页', 
        prevText:'上一页', 
        refreshText:'刷新', 
        displayInfo: true, 
        displayMsg: '显示{0} - {1}条 共{2}条记录', 
        emptyMsg: "无记录显示", 
         
        items:[ 
            '-', { 
            pressed: true, 
            enableToggle:true, 
            text: '查看详情', 
            //cls: 'x-btn-text-icon details', 
            toggleHandler: function(btn, pressed){ 
                    var view = grid.getView();                     
                    view.showPreview = pressed; 
                       view.refresh(); 
            } 
        }] 
    }); 
     
    var checkbox = new Ext.grid.CheckboxSelectionModel(); 
     
    var cm = new Ext.grid.ColumnModel([ 
            checkbox, 
            { 
                id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) 
                header: "主题", 
                dataIndex: 'title', 
                width: 320, 
                renderer: renderTopic, 
                sortable: true, 
                editor: new Ext.form.TextArea({ 
                                    allowBlank: false, 
                                    blankText:'请输入主题' 
                           }) 
            },{ 
                header: "作者", 
                dataIndex: 'author', 
                width: 100, 
                //hidden: true, 
                sortable: true, 
                editor: authereditor 
                 
            },{ 
                header: "回复数", 
                dataIndex: 'replycount', 
                width: 70, 
                align: 'right', 
                sortable: true, 
                editor: new Ext.form.TextField({ 
                                    allowBlank: false 
                           }) 
            },{ 
                id: 'last', 
                header: "最后发表", 
                dataIndex: 'lastpost', 
                width: 150, 
                renderer: renderLast,                 
                sortable: true, 
                editor: new Ext.form.DateField({ 
                                            format: 'm/d/y', 
                                            minValue: '01/01/06', 
                                               disabledDays: [0, 6], 
                                            disabledDaysText: '周末不能选' 
                    }) 
            },{ 
           header: "审核否", 
           dataIndex: 'indoor', 
           width: 55, 
           renderer: examineflag, 
           editor: new Ext.grid.GridEditor(new Ext.form.Checkbox()) 
        }         
        ]); 
     
    var grid = new Ext.grid.EditorGridPanel({               
        store: store, 
        renderTo: 'topic-grid', 
        cm: cm,       
        width:980, 
        id:'egridpanel', 
        height:550, 
        title:'编辑表格',     
        autoExpandColumn:'common', 
        clicksToEdit:1,//设置点击几次才可编辑 
        frame:true, 
        sm:checkbox, 
        loadMask: true,//装载动画         
        stripeRows:false,//条纹 
        //autoHeight: true,//一定要写,否则显示的数据会少一行   
        //selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//设置单行选中模式, 否则将无法删除数据 
                   

        // customize view config 
        viewConfig: { 
            forceFit:true, 
            enableRowBody:true,             
            //showPreview:true, 
            showPreview:true, 
            getRowClass : function(record, rowIndex, p, store){ 
                //if(this.showPreview){ 
                if(!this.showPreview){     
                    p.body = '<p>'+record.data.excerpt+'</p>'; 
                    return 'x-grid3-row-expanded'; 
                } 
                return 'x-grid3-row-collapsed'; 
            } 
        }, 
        tbar: contrltar,     
        bbar: pagingBar 
    }); 

    grid.on("afteredit", afteredit, grid);//监听编辑后事件     
    store.load({params:{start:0, limit:10}}); 
     
    function afteredit(e){     
        // e.column;//修改的列,数字类型 
        // e.row;//修改过的行从0开始 
        //e.originalValue;//原始值 
        //e.value;//新值         
        var data     = e.record.data; 
        // 显示等待对话框 
        Ext.Msg.wait("请等候", "修改中", "操作进行中..."); 
        var id    = data.threadid;       //"threadid"为返回Json数据的字段名     
         
        Ext.Msg.alert('您成功修改了文章信息', "被修改的内容是:" + e.value + "\n 修改的字段是:" 
            + e.field+"; id是:"+id);// 取得用户名         
    }     
     
}); 



Ext.ux.SliderTip = Ext.extend(Ext.Tip, { 
    minWidth: 10, 
    offsets : [0, -10], 
    init : function(slider){ 
        slider.on('dragstart', this.onSlide, this); 
        slider.on('drag', this.onSlide, this); 
        slider.on('dragend', this.hide, this); 
        slider.on('destroy', this.destroy, this); 
    }, 

    onSlide : function(slider){ 
        this.show(); 
        this.body.update(this.getText(slider)); 
        this.doAutoWidth(); 
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets); 
    }, 

    getText : function(slider){ 
        return slider.getValue(); 
    } 
}); 



Ext.grid.CheckColumn = function(config){ 
    Ext.apply(this, config); 
    if(!this.id){ 
        this.id = Ext.id(); 
    } 
    this.renderer = this.renderer.createDelegate(this); 
}; 

Ext.grid.CheckColumn.prototype ={ 
    init : function(grid){ 
        this.grid = grid; 
        this.grid.on('render', function(){ 
            var view = this.grid.getView(); 
            view.mainBody.on('mousedown', this.onMouseDown, this); 
        }, this); 
    }, 

    onMouseDown : function(e, t){ 
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){ 
            e.stopEvent(); 
            var index = this.grid.getView().findRowIndex(t); 
            var record = this.grid.store.getAt(index); 
            record.set(this.dataIndex, !record.data[this.dataIndex]); 
        } 
    }, 

    renderer : function(v, p, record){ 
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>'; 
    } 
}; 




Ext.namespace('Editgridselect'); 
Editgridselect.init = function (){ 
    var fm = Ext.form, Ed = Ext.grid.GridEditor;     
        var RecordDef = Ext.data.Record.create([     
            {name: 'formname'},{name: 'formid'}                   
        ]); 
        var groupStore=new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'autherselect.php'}),            
            reader: new Ext.data.JsonReader({id:"sn",root:'datalist'},RecordDef ),               
            remoteSort: true });   
        groupStore.load(); 
        var combox = new Ext.form.ComboBox({ 
               typeAhead: true,mode : 'local', selectOnFocus : true, 
               forceSelection : true ,triggerAction: 'all', 
               store:groupStore, hiddenName:'formname', 
               valueField : 'formid',displayField : 'formname',       
               lazyRender:true,listeners: { select: function() {this.setValue(combox.getRawValue()); }     
             }   
            }); 
         var editor = new Ed(combox);          
        return editor; 
} 

服务器端: 
autherselect.php 
<?php 
header("Content-Type: text/plain; charset=utf-8"); 
$select = array('datalist'=>array( 
array('formname'=>'张三','formid'=>"SCZL"), 
array('formname'=>'李四','formid'=>"ZLBGV"), 
array('formname'=>'王五','formid'=>"fagg"), 
array('formname'=>'Dvaid','formid'=>"fhdf"), 
array('formname'=>'Rocky','formid'=>"rocky") 
) 
); 
echo json_encode($select); 
//echo "([{'formname':'Java','formid':'java'},{'formname':'EXTJS','formid': 'extjs'}])"; 
?> 

 

extjs4 grid 新增、删除、修改

删除与修改的操作,分两块进行。页面删除与后台删除。因此在页面上进行删除或修改后成功后,后台只传递一个SUCCESS标记,若后台同步成功,则在页面的store中执行删除或者修改。减少网络中的数据传输。 ...
  • dys1990
  • dys1990
  • 2012年04月21日 17:20
  • 29985

Ext.js5(编辑表格的内容celledit)(添加和删除的行为)(20)

view/** * This example shows how to enable users to edit the contents of a grid. Note that cell * ...
  • TUD2014
  • TUD2014
  • 2015年12月19日 16:09
  • 742

Ext JS4序列教程之一 :Data Grid数据表格控件

1、  Data Grid数据表格控件的前世今生   做WEB开发最常见数据展现形式当属数据表格控件莫属了,在AJAX等富客户端框架出现之前,我们都采用Table标签来开发数据表格,传统的Table...
  • lishengbo
  • lishengbo
  • 2015年02月12日 17:02
  • 2065

编辑 Ext 表格(一)——— 动态添加删除行列

一、动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除。   (1) 动态添加表格的行  gridS...
  • zhengjiafa
  • zhengjiafa
  • 2016年12月18日 11:39
  • 2068

跟我一起学extjs5(18--模块的新增、修改、删除操作)

跟我一起学extjs5(18--模块的新增、修改、删除操作)         上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你...
  • jfok
  • jfok
  • 2014年07月15日 14:28
  • 10289

Ext.js5(关联数据插件)(SubTable)(23)

view/** * This example uses the `Ext.grid.plugin.SubTable` plugin to display associated records * ...
  • TUD2014
  • TUD2014
  • 2015年12月20日 11:14
  • 1136

extjs中grid中checkbox的用法,ext中grid获取checkbox的值

转自:http://blog.csdn.net/simaweier/article/details/8111923 grid每列前面加checkbox: (我用的而是第一...
  • llwan
  • llwan
  • 2016年05月25日 09:20
  • 4418

Ext EditorGrid可编辑表格

Ext.onReady(function(){       //定义列       var columns = [           {header:'编号',dataIndex:'id',w...
  • liybsea
  • liybsea
  • 2016年02月02日 22:39
  • 496

ExtJS学习(四)EditorGrid可编辑表格

操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。 双击点击的时候可以单元格的操作。 代码: ...
  • qq_30739519
  • qq_30739519
  • 2016年03月12日 13:25
  • 11244

EXT3.4关于Grid锁定指定列固定多选框的实现

1    总体解决方案 1.1  创建CheckboxSelectionModel对象 1,新建空的EOS6.3的工程,新建com.towngas.tcis. gridlock构件包; 2,在c...
  • maoxiao1229
  • maoxiao1229
  • 2014年04月03日 17:38
  • 4424
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ext Js Grid 编辑 新增 删除 保存的一个小示例
举报原因:
原因补充:

(最多只允许输入30个字)