Extjs4---Checkbox,多选，全选

2024-06-01 10:32
文章标签 extjs4 checkbox 多选 全选

本文主要是介绍Extjs4---Checkbox,多选，全选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的Extjs4---grid添加搜索功能上进行修改的

html代码：

同Extjs4---grid添加搜索功能上的html代码

只需修改引用即可


gridCheck.js代码：

[javascript]  view plain copy
  1. //下面两行代码必须要，不然会报404错误  
  2. Ext.Loader.setConfig({enabled:true});  
  3. //我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"  
  4. Ext.Loader.setPath('Ext.ux','../ext4_example/ext4/examples/ux');  
  5.   
  6. //预加载  
  7. Ext.require(  
  8.         [  
  9.             'Ext.grid.*',  
  10.             'Ext.toolbar.Paging',  
  11.             'Ext.util.*',  
  12.             'Ext.data.*',  
  13.             //注意引用  
  14.             'Ext.ux.form.SearchField',  
  15.             //Checkbox需要引用  
  16.             'Ext.selection.CheckboxModel'   
  17.          ]  
  18.            
  19. );  
  20.   
  21. Ext.onReady(  
  22.         function(){  
  23.             //创建Model  
  24.             Ext.define(  
  25.                     'User',  
  26.                     {  
  27.                         extend:'Ext.data.Model',  
  28.                         fields:[  
  29.                                 {name:'id',mapping:'id'},  
  30.                                 {name:'name',mapping:'name'},  
  31.                                 {name:'sex',mapping:'sex'},  
  32.                                 {name:'age',mapping:'age'}  
  33.                         ]  
  34.                     }  
  35.             )  
  36.             //创建数据源  
  37.             var store = Ext.create(  
  38.                     'Ext.data.Store',  
  39.                     {  
  40.                         model:'User',  
  41.                           
  42.                         //设置分页大小  
  43.                         pageSize:5,  
  44.                         proxy: {  
  45.                             type: 'ajax',  
  46.                             url : 'users',  
  47.                             reader: {  
  48.                                 //数据格式为json  
  49.                                 type: 'json',  
  50.                                 root: 'bugs',  
  51.                                 //获取数据总数  
  52.                                 totalProperty: 'totalCount'  
  53.                             }  
  54.                         },  
  55.                         autoLoad:true  
  56.                     }  
  57.             );  
  58.               
  59.             //创建多选框  
  60.              var checkBox = Ext.create('Ext.selection.CheckboxModel');   
  61.               
  62.             //创建grid  
  63.             var grid = Ext.create('Ext.grid.Panel',{  
  64.                     store:store,  
  65.                     //添加到grid  
  66.                     selModel:checkBox,  
  67.                     disableSelection: false,//表示可以选择行  
  68.                     columnLines: true,   
  69.                     loadMask: true,   
  70.                     columns:[  
  71.                              {text:'编号',width:40,dataIndex:'id',sortable:true},  
  72.                              {text:'姓名',width:120,dataIndex:'name',sortable:true},  
  73.                              {text:'性别',width:120,dataIndex:'sex',sortable:true},  
  74.                              {text:'年龄',width:120,dataIndex:'age',sortable:true}  
  75.                     ],  
  76.                     height:250,   
  77.                     width:480,   
  78.                     x:20,   
  79.                     y:40,   
  80.                     title: 'ExtJS4 Grid分页查询多选示例',   
  81.                     renderTo: 'grid',   
  82.                      
  83.                     dockedItems:[  
  84.                                  //多选框控件  
  85.                                  {  
  86.                                      dock:'top',  
  87.                                      xtype:'toolbar',  
  88.                                      items:[  
  89.                                             {  
  90.                                                 itemId:'Button',  
  91.                                                 text:'显示所选',  
  92.                                                 //tooltip:'Add a new row',  
  93.                                                 //iconCls:'add',  
  94.                                                 handler:function(){  
  95.                                                     var record = grid.getSelectionModel().getSelection();   
  96.                                                     if(record.length==0){  
  97.                                                          Ext.MessageBox.show({   
  98.                                                             title:"提示",   
  99.                                                             msg:"请先选择您要操作的行!"   
  100.                                                             //icon: Ext.MessageBox.INFO   
  101.                                                          })  
  102.                                                         return;  
  103.                                                     }else{  
  104.                                                         var ids = "";   
  105.                                                         for(var i = 0; i < record.length; i++){   
  106.                                                             ids += record[i].get("id")   
  107.                                                             if(i<record.length-1){   
  108.                                                                 ids = ids + ",";   
  109.                                                             }   
  110.                                                         }  
  111.                                                         Ext.MessageBox.show({   
  112.                                                                 title:"所选ID列表",   
  113.                                                                 msg:ids   
  114.                                                             }  
  115.                                                         )  
  116.                                                     }  
  117.                                                 }  
  118.                                             }  
  119.                                      ]  
  120.                                  },  
  121.                                    
  122.                                    
  123.                                  //添加搜索控件  
  124.                                  {  
  125.                                      dock: 'top',   
  126.                                      xtype: 'toolbar',   
  127.                                      items: {   
  128.                                          width: 200,   
  129.                                          fieldLabel: '搜索姓名',   
  130.                                          labelWidth: 70,   
  131.                                          xtype: 'searchfield',   
  132.                                          store: store   
  133.                                     }  
  134.                                  },{   
  135.                                      dock: 'bottom',   
  136.                                      xtype: 'pagingtoolbar',   
  137.                                      store: store,   
  138.                                      displayInfo: true,   
  139.                                      displayMsg: '显示 {0} - {1} 条，共计 {2} 条',   
  140.                                      emptyMsg: '没有数据'   
  141.                                 }  
  142.                     ],  
  143.                 }  
  144.             )  
  145.             store.loadPage(1);   
  146.         }  
  147. )  

Servlet,java后台代码也和 Extjs4---grid添加搜索功能 相同


效果图：


点击“显示所选”

这篇关于Extjs4---Checkbox,多选，全选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1020757。

相关文章

纯css实现checkbox的checked样式

纯css实现checkbox的checked样式

纯css也能实现checked样式 今天使用微信的WEUI的checkbox的时候，发现点击checkbox是有checked和unchecked的变化的，但是想要去获得checkbox的checked状态时，发现event listener里居然没有该checkbox的click之类的事件。这才发现，weui只是纯粹的css样式，没有对应组件的js代码。那么问题来了，没有js事件，weui是如
阅读更多...
Flutter-单选和多选

Flutter-单选和多选

import 'package:flutter/material.dart';//单选和多选void main() => runApp(MaterialApp(home: _home(),));class _home extends StatefulWidget {@overrideState<StatefulWidget> createState() {// TODO: implement
阅读更多...
js 控制 checkbox不选中

js 控制 checkbox不选中

js 控制 checkbox不选中 $("input[name=‘myName’]").prop("checked",false);
阅读更多...
LVGL 控件之复选框（lv_checkbox）和下拉列表（lv_dropdown）

LVGL 控件之复选框（lv_checkbox）和下拉列表（lv_dropdown）

目录 一、复选框1、组成2、设置复选框文本3、复选框部件的状态4、复选框事件5、API 函数 二、下拉列表1、组成2、选项2.1 添加选项2.2 获取当前选中的选项 3、设置3.1 设置列表展开方向3.2 设置下拉列表图标3.3 设置列表常显文本 4、事件5、API 函数 一、复选框 1、组成 复选框部件由两个部分组成：主体和勾选框，示意图如下： LV_PART_M
阅读更多...
jQuery全选、全不选、反选的简洁写法

jQuery全选、全不选、反选的简洁写法

转载于：http://blog.csdn.net/zhumengstyle/article/details/76512778
阅读更多...
android 列表单选 /多选/全选删除

android 列表单选 /多选/全选删除

模拟点假数据对应的bean类 添加一个boolean值默认是flase 默认不选中，根据自己的需求 public class ProFileBean {private String pic;private String title;private boolean aBoolean;public boolean isaBoolean() {return aBoolean;}public void
阅读更多...
VUE 实现三级权限选中与全选

VUE 实现三级权限选中与全选

功能：点击全选时所有子级选中，点击子级时对应的所有父级要选中。 实现思路：通过递归将所有子级转化为一级，选中时将选中的ID存为一个二级数组。循环时判断当前项在选中的数组中存在时即为勾选状态。 1、所有子级选中：通过递归的形式查找所有子级并且将它保存为一个二维数组，只保存ID即可。this.selectList = [{id:1},{id:2}] 2、所有父级选中：选择某个子级时判断是否有
阅读更多...
Azure Data Factory 多选选项集不受支持

Azure Data Factory 多选选项集不受支持

在用ADF往外部推数据时，会碰到CRM的一种数据类型，多选下拉框，如下图中的                   如果我们把多选字段输入源字段中，会得到如下的提示                 查询官方文档，则有如下的说法      所以把值往外推就需要变通下，例如使用一个文本字段将多选的value值以文本的形式存下来，以这样的格式"1,2,3"，可以利用power a
阅读更多...
elementUI——checkbox复选框监听不到change事件，通过watch监听来解决——基础积累

elementUI——checkbox复选框监听不到change事件，通过watch监听来解决——基础积累

今天在写后台管理系统的时候，遇到一个需求，就是要求监听复选框的change事件，场景就是：两个复选框互斥，且可以取消勾选。 就是这两个复选框可以同时都不勾选，如果勾选的话，另一个一定要取消勾选。 通过checkbox组件的change事件，是无法触发的。 可以通过watch来监听解决此问题。 比如上面的两个复选框值分别是：checked和cateChecked，可以通过监听每个值得变化
阅读更多...
element ui 中checkbox或radio不可勾选/不可取消勾选/点击没有反应

element ui 中checkbox或radio不可勾选/不可取消勾选/点击没有反应

不知道有没有小伙伴遇到过，动态生成的checkbox或radio会出现无法勾选或者不可取消勾选，或者点击没有反应的时候。   我v-model绑定了数据，而且设置是true，但是checkbox生成后，就无法点击了，也不触发这个字段的true和false的变化。   解决办法就是，设置的时候，需要使用vue的$set方法设置
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2