ExtJS可编辑Grid

<script type="text/javascript">
        Ext.onReady(function(){
            function coverImg(val){
                return '<img src='+val+'.jpg>';
            };
        
            var store = new Ext.data.Store({
                reader:new Ext.data.JsonReader({
                    root:'data'
                },[{name:'id',mapping:'id'},
                   {name:'bookName',mapping:'bookName'},
                   {name:'author',mapping:'author'},
                   {name:'cover',mapping:'cover'},
                   {name:'publishTime',mapping:'publishTime'},
                   {name:'price',mapping:'price'}]),
                url:'http://192.168.1.213:8080/bms-h/book/datagrid'
            });
        
            store.load();
            
            //定义可编辑的相关字段
            var author_edit = new Ext.form.TextField();//可编辑的作者字段
            var time_edit = new Ext.form.DateField({format:'Y-m-d'});//时间
            var price_edit = new Ext.form.NumberField();//价格
        
            var grid = new Ext.grid.EditorGridPanel({
                renderTo:document.body,
                store:store,
                title:'书籍数据',
                height:600,
                weight:580,
                clicksToEdit:2,//默认是2下
                frame:true,
                tbar:[{
                           text:'删除图书',
                         icon:'bin-3.png',
                         handler:function(){
                             //删除.....
                         }
                      },
                      {
                          text:'添加图书',
                          icon:'address-book-2.png',
                          handler:function(){
                              //添加
                          }
                      }],
                columns:[{header:'ID',dataIndex:'id'},
                         {header:'书名',dataIndex:'bookName',width:180,align:'center'},
                         {header:'作者',dataIndex:'author',editor:author_edit},
                         {header:'封面',dataIndex:'cover',renderer:coverImg},
                         {header:'出版时间',dataIndex:'publishTime',editor:time_edit,align:'center'},
                         {header:'价格',dataIndex:'price',editor:price_edit,align:'center'}],
                listeners:{//添加表格数据的listener
                    afteredit:function(e){
                        var conn = new Ext.data.Connection();
                        conn.request({
                            url:'http://192.168.1.213:8080/bms-h/book/update',
                            params:{
                                //action:'update',
                                id:e.record.id,
                                author:e.value
                            },
                            success:function(req,rep){
                                Ext.Msg.alert('Status','数据修改成功!');
                                store.load();//刷新表格数据
                            },
                            failure:function(req,rep){
                                //e.reject();
                                Ext.Msg.alert('Error','数据无法正常修改');
                            }
                        });
                    }
                },
                bbar:new Ext.PagingToolbar({
                    pageSize:5,//一页显示多少条记录
                    curPage:1,//当前显示第几页
                    store:store,//
                    displayInfo:true,
                    displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                    emptyMsg:"没有记录"
                })
            });
        });
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值