EXT JS Grid checkbox GridPanel 中的批量操作_ext.grid.panel checkbox 数量累计-优快云博客

本文链接：https://blog.youkuaiyun.com/wangwei22/article/details/6055015
本文介绍如何使用 ExtJS 框架实现一个具备分页功能的表格组件，该表格能够从服务器获取数据并展示用户的详细信息，包括用户名、姓名、电子邮件和状态等字段，并支持通过复选框进行多行选择。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
如题，详见如下示例：
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 
    <link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" mce_href="ExtJs/resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="jmaki-standard.css" mce_href="jmaki-standard.css" /> 
    <mce:script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js" mce_src="ExtJs/adapter/ext/ext-base.js"></mce:script> 
    <mce:script type="text/javascript" src="ExtJs/ext-all.js" mce_src="ExtJs/ext-all.js"></mce:script> 
    <mce:script type="text/javascript"><!-- 
        var storeFatList; 
        var cmFatList; 
        var gridFatList; 
        var sm = new Ext.grid.CheckboxSelectionModel(); 
        Ext.onReady(viewFatlist); 
        function viewFatlist() 
        { 
            if(storeFatList==null) 
            { 
                storeFatList = new Ext.data.Store({ 
                    proxy: new Ext.data.HttpProxy({ 
                        url: 'auditUsr.action' 
                    }), 
                    // create reader that reads the Topic records 
                    reader: new Ext.data.JsonReader({ 
                        root: 'usrs', 
                        totalProperty: 'totalCount', 
                        successProperty :'success', 
                        id: 'threadid', 
                        fields: [ 
                            {name: 'uid',mapping:'uid',type:'int'}, 
                            {name: 'userName', mapping:'uname',type:'string'}, 
                            {name: 'email', mapping:'email',type:'string'}, 
                            {name: 'status',mapping:'state',type:'int'} 
                        ] 
                    }) 
                }); 
            } 
            // the column model has information about grid columns 
            // dataIndex maps the column to the specific data field in 
            // the data store 
            if(cmFatList==null) 
            { 
                cmFatList = new Ext.grid.ColumnModel([ 
                    sm, 
                    { 
                        header: "用户名", 
                        dataIndex: 'uid' 
                    },{ 
                        header: "姓名", 
                        dataIndex: 'userName' 
                    },{ 
                        header: "Email", 
                        dataIndex: 'email' 
                    },{ 
                        header: "状态", 
                        dataIndex: 'status' 
                    }]); 
                cmFatList.defaultSortable = true; 
            } 
            if(gridFatList==null) 
            { 
                gridFatList = new Ext.grid.GridPanel({ 
                    el:'noAuditUsers', 
                    store: storeFatList, 
                    frame:true, 
                    width:685, 
                    height:400, 
                    title:'查询结果', 
                    collapsible :true, 
                    cm: cmFatList, 
                    sm: sm, 
                    trackMouseOver:false, 
                    loadMask: false, 
                    tbar: new Ext.PagingToolbar({ 
                        pageSize: 20, 
                        store: storeFatList, 
                        displayInfo: true, 
                        cls: 'x-btn-text-icon details', 
                        displayMsg: '显示的结果 {0} - {1} / {2}', 
                        emptyMsg: "没有符合查询条件的记录" 
                    }) 
                }); 
            } 
            gridFatList.render();gridFatList.collapse(true); 
            storeFatList.load({params:{start:0, limit:20}}); 
        } 
        //返回被选择的行的UID 
        function getFatSelectedIdArray() 
        { 
            var record=gridFatList.getSelectionModel().getSelections(); 
            if(record == null || record.length == 0) 
                return null; 
            var array = new Array(record.length); 
            for(var i=0;i<record.length;i++) 
            { 
                array[i] = record[i].get('uid'); 
            } 
            return array; 
        } 
        //响应 用户成正式用户 按钮事件 
        function setDueUser() 
        { 
            array = getFatSelectedIdArray(); 
            if(array == null) 
            { 
                alert('请选择用户然后再执行操作'); 
                return; 
            } 
            var info = ''; 
            for(var i=0;i<array.length;i++) 
            { 
                info += array[i] + ';'; 
            } 
            var conn = new Ext.data.Connection(); 
            // 发送异步请求 
            conn.request({ 
                // 请求地址 
                url: 'executeAudit.action', 
                method: 'GET', 
                params:'uid=' + info, 
                // 指定回调函数 
                callback: callback 
            }); 
            //回调函数 
            function callback(options, success, response){ 
                if(success) 
                { 
                    if(response.responseText.trim() == "1") 
                    { 
                        alert('审核成功'); 
                        storeFatList.reload(); 
                    } 
                    else 
                        alert('操作失败，请重试'); 
                } 
                else 
                    alert('连接超时，请重试'); 
            } 
        } 
        function refreshData() 
        { 
            setTimeout(function() 
            { 
                storeFatList.reload(); 
            },1000); 
        } 
     
// --></mce:script> 
</head> 
<body> 
    <div id="noAuditUsers"></div><br/> 
    <input type="button" onclick="setDueUser();" value="审核"> 
</body> 
</html>