ExtJS-Grid框增加复选框checkbox

 

var gridColumnModel = new Ext.grid.ColumnModel([
                    new Ext.grid.RowNumberer(),
                    new Ext.grid.CheckboxSelectionModel({ singleSelect: false }),//复选框
                    {
                        header : ‘信息ID‘,
                        dataIndex : ‘INFO_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 80
                    }, {
                        header : ‘商品ID‘,
                        dataIndex : ‘PRICE_PLAN_CD‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100
                    }, {
                        header : ‘商品类型‘,
                        dataIndex : ‘OFFERING_TYPE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 70
                    }, {
                        header : ‘管理级别‘,
                        dataIndex : ‘MANAGE_LEVEL‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 70
                    }, {
                        header : ‘管理编号‘,
                        dataIndex : ‘MANAGE_CODE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 110
                    }, {
                        header : ‘目录ID‘,
                        dataIndex : ‘CATEGORY_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100
                    }, {
                        header : ‘商品名称‘,
                        dataIndex : ‘NAME‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 150
                    }, {
                        header : ‘生效时间‘,
                        dataIndex : ‘START_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘失效时间‘,
                        dataIndex : ‘END_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120
                    }, {
                        header : ‘员工ID‘,
                        dataIndex : ‘STAFF_CODE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 110
                    }, {
                        header : ‘创建时间‘,
                        dataIndex : ‘CREATE_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘版本时间 ‘,
                        dataIndex : ‘VERSION‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘地区ID‘,
                        dataIndex : ‘AREA_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100

                    }, {
                        header : ‘描述‘,
                        dataIndex : ‘DESCRIPTION‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 145

                    }, {
                        header : ‘商品状态‘,
                        dataIndex : ‘OFFERING_STATUS_CD‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100

                    }]);

 1 var grid = new CDEXT.grid.PageGrid({
 2                         cm : gridColumnModel,
 3                         sm: new Ext.grid.CheckboxSelectionModel ({ singleSelect: false }),//复选框
 4                         store : store,
 5                         title : ‘<div align="center">商品信息</div>‘,
 6                         stripeRows : true,
 7                         region : ‘north‘,
 8                         autoScroll : true,
 9                         height : 300,
10                         tbar : [‘需求单ID:‘ ,reqIdField, ‘-‘, ‘需求单名:‘,requestField, ‘-‘, ‘商品名:‘, textField, ‘-‘, ‘开始时间(创建):‘,
11                                 startDate, ‘-‘, ‘结束时间(创建):‘, endDate, ‘-‘,
12                                 deaSearch,insertSearch],
13                         bbar : true,
14                         stripeRows : true,
15                         loadMask : {
16                             msg : ‘正在加载数据,请稍侯......‘
17                         },
18                         listeners : {
19                             ‘rowclick‘ : function() {
20                                 var record = grid.getSelectionModel()
21                                         .getSelected();
22                                 if (record) {
23                                     var instanceId = record
24                                             .get(‘PRICING_INSTANCE_ID‘);
25                                     pmstore.setBaseParam("search.prInsId",
26                                             instanceId);
27                                     pmgrid.reload();
28                                 }
29                             }
30                         }
31                     });

 

上述示例,效果如下

 

 

关键点:

在ColumnModel中增加:

new Ext.grid.CheckboxSelectionModel({ singleSelect: false })//复选框

在Grid中增加:

sm: new Ext.grid.CheckboxSelectionModel ({ singleSelect: false })//复选框

 

取值时:

          var records=grid.getSelectionModel().getSelections();
          var mycars=new Array();
         
         for(var i=0;i<records.length;i++){
             mycars[i]=records[i].data.INFO_ID;
         };

ExtJS-Grid框增加复选框checkbox,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。