ExtJs中的Grid具体操作
幻冰小站 浏览次数:611 2018-12-22 15:09:14

.基本操作步骤


  1. var cm=new Ext.grid.ColumnModel([  //列的定义cm是它的简写,作为真个表格的列模式,需要首先创建的
                    {header:'
    编号',dataIndex:'id',sortable:true},  //header是表的首部显示文本。dataIndex是列对应的记录集字段,sortable表示列是否可排序,可能还会用到的参数:renderer列的渲染函数,format格式化信息
                    
                    {header:'
    名称',dataIndex:'name'},
                    {header:'
    描述',dataIndex:'descn'}
              ]);

  2.  var data=[
              ['1','name1','descn1'],  //5
    具体的数据,每组数据分别对应每一列
              ['2','name2','descn2'],
              ['3','name3','descn3'],
              ['4','name4','descn4'],
              ['5','name5','descn5']
              ];
             

  3.                //store用来创建一个数据存储对象,是GridPanel必备的属性
    var store=new Ext.data.Store({
                     proxy:new Ext.data.MemoryProxy(data),  //
    是指获取数据的方式
                     reader:new Ext.data.ArrayReader({},[    //
    是指如何解析这一堆数据,ArrayReader就是解析数组的
                     {name:'id'},
                     {name:'name'},
                     {name:'descn'}
                     ]) 
              });
              store.load();//
    要执行一次,以对数据初始化,很重要
              
             

  4. var grid=new Ext.grid.GridPanel({
                      autoHeight:true,
                      renderTo:'grid',  //
    要渲染的地方(就是在哪里显示)
                      enableColumnMove:false,//
    设置是否可以拖放列
                      enableColumnResize:false,//
    设置是否可以改变列的大小
                      stripeRows:true,//
    斑马线效果  
                      store:store,
                      cm:cm,
                      autoExpandColumn:'descn', //
    可以制定列的宽度自动伸展。只能制定一列的id
                      viewConfig:{
                              forceFit:true   //
    每列自动充满Grid
                              }
                    });


注:Ext中 renderer 一般用于Grid中对列模型的渲染上 其详细信息记录在 Ext.grid.ColumnModel 中的 setRenderer( Number col, Function fn ) 方法里


 


renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){


}


 


含有的参数的介绍:

1.value是当前单元格的值

2.cellmeta里保存的是cellId单元格idid是列号,css是这个单元格的css样式。

3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。

4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。

5.columnIndex列号。

6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。

常用的属性:

1.sortable:true,//sortable设为排序

2.enableColumnMove:false,//设置是否拖放

3.enableColumnResize:false,//设置是否改变列大小

4.stripeRows:true, //每列是否是斑马线分开

5.loadMask:true,  //加载时有加载的图标

6.autoExpandColumn:'要自定义宽度的id//可以制定列的宽度自动伸展。只能制定一列的id,所以要在前面指定的列先写好id

7.viewConfig:{
         
             forceFit:true   //每列自动充满Grid
        
          }

8.sortInfo: {field: "name", direction: "ASC"}//在原来的前提下,加此行:field代表排序列名,direction代表排序方式(ASC是升序,DESC是降序)

9.renderer: Ext.util.Format.dateRenderer('Y-m-d')

//这里需要添加的renderer属性的值设置为Ext.util.Format.dateRenderer。这是为我们提供的格式

10.type:'date',dateFormat: 'Y-m-dTH:i:s'//type是reader解析时把这一列作为日期类型处理,dateFormat是把得到的字符串转换成相应的日期格式

10-2.在写数据的时候要:'1970-01-15T02:58:04',//添加一列时间的数据,格式要和下面设置的dateFormat一样


 


11.new Ext.grid.RowNumberer(), //自动显示行号


 


 


12.//新建按钮,id="remove"


 


Ext.get('remove').on('click', function() {//获得id,执行点击事件


             store.remove(store.getAt(1));//store.getAt(a)找到要找的那行的内容,a0开始(及第一行就是0),该代码表示删除改行的信息


grid.view.refresh();//清除一行信息,最左边显示的行的id重新编号


    });


 


13.var sm = new Ext.grid.CheckboxSelectionModel();//新建复选框的对象,使用的时候直接写  'sm'


 


14.Ext.grid.RowSelectionModel({singleSelect:true})//设置行是否可以按shift多选true为不可以)


 


15.只选一行执行


grid.on('click', function() {


        var selections = grid.getSelectionModel().getSelections();


        for (var i = 0; i < selections.length; i++) {


            var record = selections[i];


            Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));


        }


    }); //点击一行,就输出该行的信息


 


16.表格视图


var grid = new Ext.grid.GridPanel({


//设置各种监听器可看做控制器


        height: 80,


        width: 450,


        renderTo: 'grid',


        store: new Ext.data.Store({


            autoLoad: true,


            proxy: new Ext.data.MemoryProxy(data),


            reader: new Ext.data.ArrayReader({}, meta)


        }),


        columns: meta


    });//表格定义太小的话,自己默认产生滚动条


 


grid.getView().scrollToTop();//滚动条滚动到最上面


grid.getView().focusCell(0, 0);//焦点定位在第一行的第一列


 


17.自己定义,改变GridView的初始参数


  viewConfig: {


            columnsText: '显示的列',


            scrollOffset: 30,//表示表格右侧为滚动条预留的宽度


            sortAscText: '升序',


            sortDescText: '升序',


            forceFit: true //表格自动延展每列的长度,使内容充满整个表格


        }


 


18.Grid添加分页工具条


  var grid = new Ext.grid.GridPanel({


        renderTo: 'grid',


        autoHeight: true,


        store: store,


        cm: cm,


计算机生成了可选文字: 新琳了一个bbar属性,并且创建了Ext.阳彭。价。。lbar分页工具条对象.


计算机生成了可选文字: 除了bb.:以外,表格还有匕bar,即L方的工具条。


           bbar: new Ext.PagingToolbar({


            pageSize: 10,    //每页显示信息的条数


            store: store,


            displayInfo: true,    //是否显示数据信息


            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',     //在displayInfo有效的前提上,{0}{1}{2}中的数据会自己替换掉


            emptyMsg: "没有记录"    //没有数据时显示的信息


        })


    });


store.load();


计算机生成了可选文字: 注意此处的ds不能使用众t.dato.s丘阳ies匕ore,分页时禽要调用。tore的load()函数,而 几oad(J函数与proxy有关.51印lestor。不但没有设里proxy,而且也没有!写10od() 函数,所以会出现错误,从而导致无法显示分贫信息.


 


19.通过后台获取分页数据


var store = new Ext.data.Store({


        proxy: new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接通过Http访问数据


        reader: new Ext.data.JsonReader({  


            totalProperty: 'totalProperty',  //对应JSP代码中返回的totalProperty,就是数据的总数


            root: 'root' //root对应的JSP代码中的返回的root,也就是一个包含返回数据的数组


        }, [


            {name: 'id'},


            {name: 'name'},


            {name: 'descn'}


        ])


    });


以及要改变store.load();为:


 store.load({params:{start:0,limit:10}}); //初始化时通过传参数去获得希望得到的那部分数据,start指示从第几条数据开始显示,limit指从start开始一共几条数据


 


 


20.可编辑表格控件——EditorGrid


var cm = new Ext.grid.ColumnModel([{


        header: '编号',


        dataIndex: 'id',


        editor: new Ext.grid.GridEditor(   //每列添加editor属性,里边的属性都是完全一样的TextField


            new Ext.form.TextField({//TextField的方式是随意修改单元格


                allowBlank: false //表示不允许输入空值 


            })


        )


    }, {


        ……


            })


        )


   }]);


 


还有要改变的:


  var grid = new Ext.grid.EditorGridPanel({


        autoHeight: true,


        renderTo: 'grid',


clicksToEdit:1,//要编辑单元格时点击的次数,默认是双击


        store: store,


        cm: cm


    });


 


添加和删除行:


  (表示出现在表的顶部新建一行工具条)


           tbar: new Ext.Toolbar(['-', {


            text: '添加一行',


            handler: function(){   //handler定义按钮被按下时要执行的内容


                var p = new Record({


                    id:'',


                    name:'',


                    descn:''


                });


                grid.stopEditing();


                store.insert(0, p); //新建一行


                grid.startEditing(0, 0);//激活第一行第一列的编辑状态,及新建后焦点默认选在上面


            }


        }, '-', {


            text: '删除一行',


            handler: function(){


                Ext.Msg.confirm('信息', '确定要删除?', function(btn){


                    if (btn == 'yes') {


                        var sm = grid.getSelectionModel();


                        var cell = sm.getSelectedCell();


 


                        var record = store.getAt(cell[0]);


                        store.remove(record); //删除一行


                    }


                });


            }


        }, '-'])


    });


 


保存数据:


{


            text: '保存',


            handler: function(){


                var m = store.modified.slice(0);//作用是复制store.modified。保证其原始数据不受影响


                var jsonArray = [];


                Ext.each(m, function(item) {//作用是遍历m,并对每项分别调用fn函数


                    jsonArray.push(item.data);


                });


 


                Ext.lib.Ajax.request(


                    'POST',


                    '11_03_01.jsp',


                    {success: function(response){


                        Ext.Msg.alert('信息', response.responseText, function(){


                            store.reload();


                        });   //success是请求成功后返回的信息


                    },failure: function(){


                        Ext.Msg.alert("错误", "与后台联系的时候出现了问题");


                    }}, //failere是请求失败后返回的信息


                    'data=' + encodeURIComponent(Ext.encode(jsonArray))


                );


            }


 


验证数据:


                     var m = store.modified.slice(0);


                for (var i = 0; i < m.length; i++) {


                    var record = m[i];//获得被修改的每行数据


                    var fields = record.fields.keys;//表示一共几行


 


                    for (var j = 0; j < fields.length; j++) {


                        var name = fields[j];//列名


                        var value = record.data[name];//单元格的数值


 


                        var colIndex = cm.findColumnIndex(name);//列号


                        var rowIndex = store.indexOfId(record.id);//行号


                        var editor = cm.getCellEditor(colIndex).field;//colIndex使用的编辑器


 


                        if (!editor.validateValue(value)) {


                            Ext.Msg.alert('提示', '请确保输入的数据正确。', function(){


                                grid.startEditing(rowIndex, colIndex);


                            });


                            return;


                        }


                    }


 


21.属性表格——PropertyGrid(只要两个值:keyvalue,:列的名称和具体的值)


 var grid = new Ext.grid.PropertyGrid({


        title: '属性表格',


        autoHeight: true,


        width: 300,


        renderTo: 'grid',


        source: {


            "名字": "不告诉你",


            "创建时间": new Date(Date.parse('12/15/2007')),


            "是否有效": false,


            "版本号": .01,


            "描述": "嗯,估计没啥可说的"


        }


    });


 


禁止对属性进行编辑:(只能看不能动)


grid.on("beforeedit", function(e){


        e.cancel = true;


        return false;


    });


 


获取属性表格的值:


Ext.Msg.alert('名字', grid.store.getById('名字').get('value')); //弹出警告框,是对应key所对应的value


 


设置时间选择:


 customEditors: {


            'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))


        }//TimeField,可以自己再source中设置开始的时间(如:Start Time:‘10:00 AM’)


 


 


22.表格分组:


    var store = new Ext.data.GroupingStore({


        reader: reader,


        data: data,


        groupField: 'sex',  //按性别分组


        sortInfo: {field: 'id', direction: "ASC"}//如何排序的对象,分组后,每组按id进行升序排列显示


    });


 


     view: new Ext.grid.GroupingView(),//获得Ext.grid.GroupingView的实例


        grid.getView().expandAllGroups(); //展开所以分组


          grid.getView().collapseAllGroups();//折叠所有分组


        grid.getView().toggleAllGroups();//自动判断分组的状态


 


23.可以拖拉调整大小的表格:


 var rz = new Ext.Resizable(grid.getEl(), {


        wrap: true, //在构造Resizable时自动在制定的id的外边包裹一层div


        minHeight:100, //限制改变的最小的高度


maxHeight:200,


        pinned:false, //控制可拖动区域的显示状态,false是鼠标悬停在拖拉区域上才出现


        handles: 's'//设置拖拉的方向(n,s,e,w,all...)


    });


    rz.on('resize', grid.syncSize, grid);//注册事件(作用:将调好的大小传个scope执行)


 


 


24.可以拖拉行,在同一个表中拖动


 enableDragDrop: true//设置允许拖动行


设置DropTarget


var ddrow = new Ext.dd.DropTarget(grid.container, {


        ddGroup : 'GridDD',


        copy    : false,//拖动是否带复制属性


        notifyDrop : function(dd, e, data) { //对应的函数处理拖放事件


            // 选中了多少行


            var rows = data.selections;


            // 拖动到第几行


            var index = dd.getDragData(e).rowIndex;


            if (typeof(index) == "undefined") {


                return;


            }


            // 修改store


            for(i = 0; i < rows.length; i++) {


                var rowData = rows[i];


                if(!this.copy) store.remove(rowData);


                store.insert(index, rowData);


            }


        }


    });


 


25.表格与右击菜单


计算机生成了可选文字: 表格提供了4个与右键菜单有关的事件,如卜所示. 0con七extmenu:《Ex七.EVentobjec七e) 全局性的右键事件。 口cellcon七ex匕,enu:(Grid七bis.N圈由erro切丁ndex, Ex七.即en七Objecte) 单元格上的右键事件。 Dro树contextmenu:(Gridthis,N山山erro钟Index.E火t 行上的右健事件。 口hoadercon匕extmenu:(Gridthis,Num为ercol牡口,工ndex, 表头的右健事件。 NUJ吐祀fCelllndeX .Even匕objec七e BXt.Eventobjecte


   var contextmenu = new Ext.menu.Menu({


        id: 'theContextMenu',


        items: [{


            text: '查看详情',


            handler: function(){


写点击后要执行的函数,可以类似于://Ext.Msg.alert('详情','ExtJs的表格右击事件');


            }


        }]


    });


    grid.on("rowcontextmenu", function(grid, rowIndex, e){


        e.preventDefault();//防止浏览器弹出默认的右键菜单


        grid.getSelectionModel().selectRow(rowIndex);//调用


        contextmenu.showAt(e.getXY());//右击显示现在自己的菜单


    });