关闭

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

872人阅读 评论(0) 收藏 举报

文章转自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'}])"; 
?> 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:329703次
    • 积分:8942
    • 等级:
    • 排名:第2254名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论