extjs4 之 Grid 列编辑

最新推荐文章于 2020-10-28 16:57:31 发布
最新推荐文章于 2020-10-28 16:57:31 发布
阅读量2.2k 收藏
点赞数
分类专栏： EXTJS 文章标签： EXTJS extjs4 grid 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="/ExtUI/ExtJs4.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" />
    <script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script>
 
    <script type="text/javascript">      
        Ext.onReady(function () {        
                  
            var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
                        clicksToMoveEditor : 2,   //双击编辑  整行修改
                        autoCancel : false,
                        saveBtnText:'确定',
                        cancelBtnText:'取消',
                        errorsText:'错误',
                        dirtyText:'你要确认或取消更改'
                       
            });
            var catalogEditProductStore = Ext.create('Ext.data.Store', {
                fields: ["prcaId","prodId","prcaImg","prodNo","prcaOrderBy", "prodNameZh", "prcaTitle", "prcaPrice", "prcaSalesPrice", "prcaDeductPoint", "prcaSalePoint",
                        "prcaStorage","prcaIndateStart","prcaIndateEnd","prcaFreight","prcaRedirectUrl","prcaProdTotal","prcaIntegral"],
                pageSize: 10,  //页容量5条数据
                //是否在服务端排序 （true的话，在客户端就不能排序）
                remoteSort: false,
                remoteFilter: true,
                proxy: {
                    type: 'ajax',
                    url: '/Tools/106EditProduct.ashx?method=getCatalogProductByID&id=1797&cataId=888',
                    reader: {
                        type: 'json', //返回数据类型为json格式
                        root: 'rows',  //数据（json格式）
                        totalProperty: 'total' //数据总条数
                    }
                },
                sorters: [{
                    //排序字段。
                    property: 'prodNo',
                    //排序类型，默认为 ASC 
                    direction: 'desc'
                }],
                autoLoad: true  //即时加载数据
            });
            
            //该型录下的选中编辑的商品
            var catalogEditProduct = Ext.create("Ext.grid.Panel", {      
                                 
                store: catalogEditProductStore,
           
                multiSelect: true, //支持多选
                height:400,
                width:800,
                selModel: { selType: 'checkboxmodel' },
                columns: [
                            { text: '型录商品ID', dataIndex: 'prcaId', align: 'left', width: 50 },
                            { text: '商品ID', dataIndex: 'prodId', align: 'left', width: 50 },
                            { text: '商品编号', dataIndex: 'prodNo', align: 'left', width: 80 },
                            {
                                header: "名称",
                                width: 200,
                                dataIndex: 'prodNameZh',
                                align: 'left',
                                renderer: function (value, metaData, record) {//自定义列值组合
                                    var path = record.get("prcaImg");
                                    var txt = value;
                                    if (path != "" && path != null) {
                                        txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
                                                 + path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
                                    }
                                    return txt;
                                },
                                sortable: true
                            },
                            { text: '排序', dataIndex: 'prcaOrderBy', minWidth: 20,editor: { xtype: 'numberfield' } },
                            { text: '商品标题', dataIndex: 'prcaTitle',align: 'left', minWidth: 300,editor: { xtype: 'textfield' } },
                            { text: '市场价', dataIndex: 'prcaPrice', minWidth: 20,editor: { xtype: 'numberfield' } },
                            { text: '售价', dataIndex: 'prcaSalesPrice', minWidth: 40,editor: { xtype: 'numberfield' } },
                            { text: '可获金币', dataIndex: 'prcaDeductPoint', minWidth: 30,editor: { xtype: 'numberfield' } },
                            { text: '购买使用金币', dataIndex: 'prcaSalePoint', minWidth: 20,editor: { xtype: 'numberfield' } },
                            { text: '库存', dataIndex: 'prcaStorage', minWidth: 40,editor: { xtype: 'numberfield' } },
                            { text: '起始日期', dataIndex: 'prcaIndateStart', minWidth: 40,editor: { xtype: 'datefield'} },
                            { text: '结束日期', dataIndex: 'prcaIndateEnd', minWidth: 40,editor: { xtype: 'datefield'} },
                            { text: '含运费', dataIndex: 'prcaFreight', minWidth: 40,editor: { xtype: 'numberfield' } },
                            { text: '跳转地址', dataIndex: 'prcaRedirectUrl', minWidth: 40,editor: { xtype: 'textfield' } },
                            { text: '总件数(团购专用)', dataIndex: 'prcaProdTotal', minWidth: 40,editor: { xtype: 'numberfield' } },
                            { text: '已订购人数(团购专用)', dataIndex: 'prcaIntegral', minWidth: 40,editor: { xtype: 'numberfield' } },
                ],
                bbar: [{
                    xtype: 'pagingtoolbar',
                    store: catalogEditProductStore,
                    displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
                    emptyMsg: "没有数据",
                    beforePageText: "当前页",
                    afterPageText: "共{0}页",
                    displayInfo: true
//                    listeners: {
//                        beforechange: function (ts, page, eOpts) {//分页 加载查询数据                           
//                              Ext.apply(catalogEditProductStore.proxy.extraParams,CatalogTtree.getSelectionModel().getSelection()[0].data);
//                        }
//                    }
                }],
                tbar: [
                  { text: '保存', iconCls: 'a_edit2' ,handler:showSelectedOptions}, "-",
                  { text: '删除', iconCls: 'a_delete',handler:showSelectedOptions }, "-",
                  { text: '上传主图', iconCls: 'a_upload',handler:showSelectedOptions }, "-",
                  { text: '刷新', iconCls: 'a_refresh',handler:showSelectedOptions }, "-",
                  {text:'添加提报商品',iconCls:'a_add',handler:showSelectedOptions},"-"],
                plugins : [RowEditing],                          //绑定编辑对象 
              
            });

            catalogEditProduct.getView().on("render",function(view){  
                view.tip=Ext.create('Ext.tip.ToolTip',{  
                    target:view.el,  
                    delegate:view.itemSelector,  
                    trackMouse:true,  
                    renderTo:Ext.getBody(),  
                    listeners:{  
                       beforeshow:function(tip){  
                           var record=view.getRecord(tip.triggerElement);  
                           var ucc=record.get("prcaImg").substring(0,1);                          
                           var html="<div ><img width='300px'  src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";  
                           tip.update(html);
                       }  
                    }  
      
                });  
            });  
           
             var centerPanel = Ext.create("Ext.panel.Panel", {
                region: 'center',
                defaults: {
                    autoScroll: true,
                  //  autoHeight: true
                },
                items: [catalogEditProduct]
            });

            new Ext.Viewport({
                layout: "border",
                rederTo: Ext.getBody(),
                defaults: {
                    frame: true
                },
                items: [centerPanel]
            });
           

            function showSelectedOptions() {
                var rows = catalogEditProduct.getView().getSelectionModel().getSelection();
                var msg = "";
                for (var i = 0; i < rows.length; i++) {
                    msg = msg + rows[i].get('prcaId') + ',';
                }
                Ext.MessageBox.alert("标题", msg);
            }
        });

        
    </script>
</head>
<body>
</body>
</html>





注释：

1、标记变色


{
                                header: "名称",
                                width: 200,
                                dataIndex: 'prodNameZh',
                                align: 'left',
                                renderer: function (value, metaData, record) {//自定义列值组合
                                    var path = record.get("prcaImg");
                                    var txt = value;
                                    if (path != "" && path != null) {
                                        txt = '<span style="color:blue;display:table;width:100%;" qtip=\'<img width="280" src="upload/'
                                                 + path.charAt(0) + "/" + path + '">\'>' + txt + '</span>';
                                    }
                                    return txt;
                                },
                                sortable: true
                            },




2、Grid行tip提示


catalogEditProduct.getView().on("render",function(view){  
                view.tip=Ext.create('Ext.tip.ToolTip',{  
                    target:view.el,  
                    delegate:view.itemSelector,  
                    trackMouse:true,  
                    renderTo:Ext.getBody(),  
                    listeners:{  
                       beforeshow:function(tip){  
                           var record=view.getRecord(tip.triggerElement);  
                           var ucc=record.get("prcaImg").substring(0,1);                          
                           var html="<div ><img width='300px'  src='/upload/"+ucc+"/"+record.get("prcaImg")+"'></div>";  
                           tip.update(html);
                       }  
                    }  
      
                });  
            });



3、Grid行编辑

 var RowEditing = Ext.create('Ext.grid.plugin.RowEditing', { // 行编辑模式
                        clicksToMoveEditor : 2,   //双击编辑  整行修改
                        autoCancel : false,
                        saveBtnText:'确定',
                        cancelBtnText:'取消',
                        errorsText:'错误',
                        dirtyText:'你要确认或取消更改'
                       
            });







无奈的伤城
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第12章[12.2] Ext JS可编辑列Grid的全场景开发
oscar999的专栏
08-09 439
基本功能描述与实现 在Grid中，对一列或某几列批量编辑。编辑效果如下图： 功能实现的思路如下： 可编辑的列使用 widgetcolumn 类型。调用Grid的reconfigure()方法，重新生成新列的Grid。 widgetcolumn列的widget属性用来配置编辑组件的类型，比如文本输入框、日期输入或是下拉单。 编辑组件中输入的值使用 bind方式与原Store绑定(bind)，也就是store的记录的值会显示在编辑组件中，编辑组件发生修改时会同步更新Store，这样的好处是获取修改的部分很简
Extjs4 之grid组件
weixin_33895695的博客
05-26 213
grid表格是extjs的核心组件之一，它提供了展示大量数据的最佳途径。Grid组件的重要特性包括：智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进，这些特性共同缔造了功能强大的4.0grid组件。 智能渲染：在extjs4.0之前的版本中采用了‘最小公分母’的策略来支持各种丰富的特性，这种方式会对每一个表格产生大量的标签，而这些标签对于简单表格来说是不必要的，而在4.0中默认的表格只...
EXTJS4种的grid的列编辑
水木小僧
04-01 1779
就这个grid的列编辑这东西调试了好久好久，网上的方法几乎试了一遍，最后还是自己一点一点调出来的，有必要记录一下！代码如下:items:[{ xtype:'grid', id:'grid', autoHeight:true, width:500, store:store11,//functionss_upa_store id:...
Extjs grid 单元格编辑
weixin_30815427的博客
06-20 291
实现grid勾选后出现编辑按钮，通过增加一个字段checked来控制 事件如下： selectionchange: function (thi, selected, eOpts) { for (var i = 0; i < selected.length; i++) { if (selected[i].data["checke...
ExtJS可编辑Grid
10-17 481
Ext.onReady(function(){             function coverImg(val){                 return '';             };                      var store = new Ext.data.Store({                 reader:new Ext.data.Js
EXTJS4 表格GRID示例
05-16
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
Extjs4 Grid Row 事件
11-12
`cellclick`事件是其中之一，它允许我们在单元格级别上实现自定义功能，比如处理数据编辑、查看详情或者执行其他业务逻辑。在处理分页Grid时，需要额外注意`rowIndex`的局限性，并适当地调整计算逻辑以获取正确的...
Extjs4.2 Grid单元格编辑
01-14
总结一下，EXTJS 4.2的Grid单元格编辑功能允许用户直接在Grid的列中进行数据输入，通过配置不同的编辑器（如文本框、日期选择器等），可以满足不同类型的输入需求。配合`cellediting`插件，可以轻松实现单击编辑，...
ExtJS_可编辑Grid进度条
04-11
ExtJS_可编辑Grid进度条,可编辑,随意输入数值,根据进度情况变色的Grid列嵌入式滚动条.
ExtJS Grid功能实现
06-18
ExtJS 表格的功能实现，包括单元格编辑，数据的获取。
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用
漏气的可乐的博客
08-15 648
ExtJs学习笔记——Ext.grid.EditorGridPanel的使用 可编辑表格是指可以直接在表格的数据进行编辑，ExtJS的可编辑表格由Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一类使用的编辑即可，下面看一个完整的示例。 <!...
[Ext JS6] Grid不同列的关联编辑
oscar999的专栏
09-16 372
gridValid.html View Model getClassMeta.html Get Class Meta Ext.define(‘Extjs6App.view.MyPanel’, { extend : ‘Ext.panel.Panel’, xtype : ‘myPanel’, alias: ‘widget.MyPanel’, myAttrs:{ a...
磨刀不误砍柴工：Ext4核心组件Grid的变化及学习（3）：可编辑的grid
挂在墙上的天堂
06-01 1439
我们依然拿旧版对比一下。Ext 3里面要编辑Grid单元格，就必须制定EditorGrid类。通过继承方式可能不太灵活，于是Ext 4就否决了继承的方式，而是采用“插件化”的方式。通过Ext JS4的Editing插件可以自由绑定到任意的Grid的实例，对于全体任何类型的Grid均可使用。于是乎，此举又为提高“灵活性（flexibility）”添泼了一抹浓彩。此外，对于Ext 3中很受大家所欢迎的一款扩展：RowEditor，在这次发布我们也将RowEditor正式加入的Ext 4包中去，成为标准类库的一员
extjs学习笔记（五）可编辑的grid
热门推荐
niuyongjie的专栏
10-31 1万+
 本文转载自：http://www.cnblogs.com/yage/archive/2009/10/22/1587786.html大多数时候，我们只是使用grid来显示信息，但有时也需要在grid中对信息进行编辑。在extjs中，构造一个可编辑的grid非常方便。我们来看下Ext.grid.EditorGridPanel，该类从GridPanel继承而来，通过对列提供editor进行编辑
Extjs4---用RowEditing对数据进行增加，修改
abo38416的博客
04-27 299
给grid添加RowEditing:[javascript]var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { pluginId:'rowEditing', saveBtnText: '保存', cancelBtnText: "取消",...
extjs 3.4 实现EditorGridPanel不同行同一列显示不同的Editor
笑看人生的专栏
11-19 1310
想在EditorGridPanel的不同行的同一列显示不同的编辑器
Extjs中EditorGridPanel修改并获取数据的两种方式
第三眼的思绪
08-15 7479
有时候我们hui
extjs中grid，根据某列值得变化改变同一行的其他列值
beauty_魅影
10-28 936
1、extjs中grid，根据某列值得变化改变同一行的其他列值 试了很多方法，下面这个方法实现了 listeners: { 'change': function(field, newValue,oldValue,eOpts){ me.cashFrezeePanel.getSelectionModel().getSelection()[0].set('unitName', field.rawValue) me.cashFrezeeStore.co...
gridpanel中的列的级联变化
weixin_33863087的博客
09-22 119
列的级联变化，就是某一列的变化，会引起其他列的变化，这是一个常用到的功能，但在extjs中，如果你对celledit不了解，估计找不到解决方案。 效果图如下： 点击数量变化，小计会根据单价*数量变化。具体代码如下： 1 Ext.Loader.setConfig({ 2 enabled:true, 3 }); 4 ...
Extjs grid中可编辑行editor怎么设置必填
最新发布
06-01
在 ExtJS 的 Grid 中，我们可以通过在编辑器（editor）组件中添加校验器（validator）来实现必填验证。具体步骤如下： 1. 在 Grid 中声明 column 配置项时，将需要设为必填的列添加一个 editor 配置项，指定编辑器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值