Extjs checkbox 多删除

  var BankOrderstore = new Ext.data.JsonStore                        //数据源
    ({
        url: "../Handler/TxnRefund.ashx",
        totalProperty: 'ToTalRecord',
        root: "ResultData",
        listeners:
        {
            beforeload: function () {
                this.baseParams =
                {
                    "method": "QUERYCMBCREFUND",

                    "BGWTXNID": Ext.getCmp("txtBgwTxnID").getValue(),
                    "STATUS": Ext.getCmp("Refundstatus").getValue(),
                    "STDATE": Ext.getCmp("txtSTDate").getValue("Y-m-d").format("Y-m-d"),
                    "EDDATE": Ext.getCmp("txtEDDate").getValue("Y-m-d").format("Y-m-d"),
                    start: 0,
                    limit: m_pageSize
                };
            }
        },
        fields: ["BGWTXNID", "APPCODE", "BANKREFNUM", "REFUNDAMOUNT", "NAME", "STATUS", "NOTIFYRESULT", "APPLYDATE", "PROCESSDATE", "RECEIPTDATE", "BANKTXNAMOUNT","REFUNDTXNID"]
    });

    var check = new Ext.grid.CheckboxSelectionModel({                  //checkbox
    singleSelect:false,         //false为可以多选
    sortable:true
});
    
    var gvResult = new Ext.grid.GridPanel
    ({
        id: "gvResult",
        renderTo: "dvBankRefund",
        title: '<% = GetLocalResourceObject("ResultsText") %>',
        height: 380,
        store: BankOrderstore,
        width: m_pageWidth,
        stripeRows: true, //斑马线
        trackMouseOver: true,
        loadMask: { msg: '<% = GetLocalResourceObject("LoadingText") %>' },
        frame: true,
        columns:
        [
            new Ext.grid.RowNumberer(), //行号
            check,
            { header: '<% = GetLocalResourceObject("BgwTxnIDText") %>', dataIndex: "BGWTXNID", width: 150, sortable: true },
            { header: '<% = GetLocalResourceObject("AppCodeText") %>', dataIndex: "APPCODE", width: 100, sortable: true, renderer: ConvertAppCode },
            { header: '<% = GetLocalResourceObject("BankRefundText") %>', dataIndex: "BANKREFNUM", width: 180, sortable: true },
            { header: '<% = GetLocalResourceObject("RefundAmountText") %>', dataIndex: "REFUNDAMOUNT", width: 80, sortable: true, renderer: function (v) { return v.toFixed(2); } },
            { header: '<% = GetLocalResourceObject("RefundStatusText") %>', dataIndex: "STATUS", width: 80, sortable: true, renderer: ConvertStatus },
            { header: '<% = GetLocalResourceObject("ApplyDateText") %>', dataIndex: "APPLYDATE", width: 150, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } },
            { header: '<% = GetLocalResourceObject("ProcessDateText") %>', dataIndex: "PROCESSDATE", width: 150, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } },
            { header: '<% = GetLocalResourceObject("ReceiptDateText") %>', dataIndex: "RECEIPTDATE", width: 120, sortable: true, renderer: function (v) { return getFormatDate(v, "yyyy-MM-dd HH:mm:ss"); } },
            { header: '<% = GetLocalResourceObject("BankTxnAmountText") %>', dataIndex: "BANKTXNAMOUNT", width: 100, sortable: true, renderer: function (v) { return v.toFixed(2); } }

        ],
        bbar: new Ext.PagingToolbar //分页
        ({
            pageSize: m_pageSize,
            store: BankOrderstore,
            displayInfo: true, //非要为true,不然不会显示下面的分页按钮
            items: [
                       '-', { text: "确认退款", iconCls:"recheck", handler: DoRefund_Click }        //就是这个底部按钮调用的
                    ]

        }),
        ds: BankOrderstore,
        sm:check,                        //selModel这样checkbox才能选
        store: BankOrderstore
    });
    gvResult.render();                   //呈现
    //自动判断是否全选并选中或不选中表头的checkbox  
    Ext.override(Ext.grid.CheckboxSelectionModel, {
        onMouseDown: function (e, t) {
            if (e.button === 0 && t.className == 'x-grid3-row-checker') { // Only fire if left-click  
                e.stopEvent();
                var row = e.getTarget('.x-grid3-row');

                // mouseHandled flag check for a duplicate selection (handleMouseDown) call  
                if (!this.mouseHandled && row) {
                    //alert(this.grid.store.getCount());  
                    var gridEl = this.grid.getEl(); //得到表格的EL对象  
                    var hd = gridEl.select('div.x-grid3-hd-checker'); //得到表格头部的全选CheckBox框  
                    var index = row.rowIndex;
                    if (this.isSelected(index)) {
                        this.deselectRow(index);
                        var isChecked = hd.hasClass('x-grid3-hd-checker-on');
                        //判断头部的全选CheckBox框是否选中,如果是,则删除  
                        if (isChecked) {
                            hd.removeClass('x-grid3-hd-checker-on');
                        }
                    } else {
                        this.selectRow(index, true);
                        //判断选中当前行时,是否所有的行都已经选中,如果是,则把头部的全选CheckBox框选中  
                        if (gridEl.select('div.x-grid3-row-selected').elements.length == gridEl.select('div.x-grid3-row').elements.length) {
                            hd.addClass('x-grid3-hd-checker-on');
                        };
                    }
                }
            }
            this.mouseHandled = false;
        },
        onHdMouseDown: function (e, t) {
            /** 
            *大家觉得上面重写的代码应该已经实现了这个功能了,可是又发现下面这行也重写了 
            *由原来的t.className修改为t.className.split(' ')[0] 
            *为什么呢?这个是我在快速点击头部全选CheckBox时, 
            *操作过程发现,有的时候x-grid3-hd-checker-on这个样式还没有删除或者多一个空格,结果导致下面这个判断不成立 
            *去全选或者全选不能实现 
            */
            if (t.className.split(' ')[0] == 'x-grid3-hd-checker') {
                e.stopEvent();
                var hd = Ext.fly(t.parentNode);
                var isChecked = hd.hasClass('x-grid3-hd-checker-on');
                if (isChecked) {
                    hd.removeClass('x-grid3-hd-checker-on');
                    this.clearSelections();
                } else {
                    hd.addClass('x-grid3-hd-checker-on');
                    this.selectAll();
                }
            }
        }
    });
    var getBgw = function () {
        if (gvResult.getSelectionModel().hasSelection()) {
            var record = gvResult.getSelectionModel().getSelections();
            var mycars = new Array();
            for (var i = 0; i < record.length; i++) {
                mycars[i] = record[i].data.REFUNDTXNID;
            }
            return mycars;
        } else {
            alert("请选择要操作的记录!");  
        }
    }
        function DoRefund_Click() {
            var values = getBgw();
            if (!values) return false;              //判断
            Ext.MessageBox.confirm("请确认", "是否要删除选中的信息", function (button, text) {
                if (button == "yes") {
                    Ext.Ajax.request({
                        url: "../Handler/TxnRefund.ashx",
                        method: "post",
                        params: { "method": "DOREFUND", "REFUNDTXNIDS": values },
                        success: function (response, option) {
                            var result = Ext.util.JSON.decode(response.responseText);
                            if (result.Flag == true) {
                                Ext.MessageBox.alert("提示", "删除成功");
                                gvResult.render();
                            } else {
                                Ext.MessageBox.alert("提示", result.RespMessage);
                            }
                        },
                        failure: function () {
                        }
                    });
                } else {
                    return;
                }
            });
       }

 下面是上面说到的不太成熟的判断是否全选并选中或不选中表头的checkbox

   //自动判断是否全选并选中或不选中表头的checkbox  
//    function autoCheckGridHead() {
//        var hd_checker = gvResult.getEl().select('div.x-grid3-hd-checker');
//        var hd = hd_checker.first();
//        if (hd != null) {
//            if (gvResult.getSelectionModel().getSelections().length !=

//                gvResult.getStore().getCount()) {
//                //清空表格头的checkBox    
//                if (hd.hasClass('x-grid3-hd-checker-on')) {
//                    hd.removeClass('x-grid3-hd-checker-on');     //x-grid3-hd-checker-on  
//                    //gvResult.getSelectionModel().clearSelections();  
//                }
//            } else {
//                if (gvResult.getStore().getCount() == 0) { //没有记录的话清空;  
//                    return;
//                }
//                hd.addClass('x-grid3-hd-checker-on');
//                gvResult.getSelectionModel().selectAll();
//            }
//        }
    //    }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS4 中,可以使用 Ext.grid.header.Container 和 Ext.grid.column.Column 类来实现多层表头。具体步骤如下: 1. 创建一个 Ext.grid.Panel 实例,并定义表格列的配置项。 2. 使用 Ext.grid.header.Container 类创建表头容器,设置容器的布局和样式。 3. 使用 Ext.grid.column.Column 类创建表头列,设置列的文字、宽度、数据域等属性。 4. 将表头列添加到表头容器中,并设置表头列的嵌套关系,即将子表头列添加到父表头列的子项中。 5. 将表头容器设置为表格的顶部工具栏,通过表格的 reconfigure 方法重新加载数据。 示例代码如下: ``` var grid = Ext.create('Ext.grid.Panel', { columns: [ { text: 'Group 1', columns: [ { text: 'Name', dataIndex: 'name', width: 100 }, { text: 'Age', dataIndex: 'age', width: 50 } ] }, { text: 'Group 2', columns: [ { text: 'City', dataIndex: 'city', width: 100 }, { text: 'Country', dataIndex: 'country', width: 100 } ] } ], store: store, tbar: { xtype: 'headercontainer', items: [ { xtype: 'gridcolumn', text: 'Group 1', columns: [ { text: 'Name', dataIndex: 'name', width: 100 }, { text: 'Age', dataIndex: 'age', width: 50 } ] }, { xtype: 'gridcolumn', text: 'Group 2', columns: [ { text: 'City', dataIndex: 'city', width: 100 }, { text: 'Country', dataIndex: 'country', width: 100 } ] } ] }, height: 200, width: 400, renderTo: Ext.getBody() }); ``` 其中,store 是数据源,可以使用 Ext.data.Store 类创建。在这个示例中,表头容器使用了 Ext.grid.header.Container 类,并且设置了 xtype 为 'headercontainer',表头列使用了 Ext.grid.column.Column 类,并且设置了 xtype 为 'gridcolumn'。表头列的嵌套关系通过 columns 属性实现。最后,表头容器作为表格的顶部工具栏,通过 tbar 属性设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值