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

kidiaoer

浏览: 822027 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT json PHP CSS prototype

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'}])";
?>

分享到：

div左图右文布局效果收藏 | xt中combobox在grid显示问题

2010-08-19 23:20
浏览 2346
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论