`

ExtJS表格——行号、复选框、选择模型

    博客分类:
  • js
 
阅读更多

一、 设置行号
   行号的设置主要问题在于删除某一行后需要重新计算行号
  Ext.onReady(function() {
         var cm = new Ext.grid.ColumnModel([
                     new Ext.grid.RowNumberer(),           --在这里设置行号
                    { header: '编号', dataIndex: 'id' },
                    { header: '性别', dataIndex: 'sex' },
                    { header: '名称', dataIndex: 'name' },
                    { header: '描述', dataIndex: 'descn' }
                 ]);

         var data = [
                        ['1', 'male', 'name1', 'descn1'],
                        ['2', 'female', 'name2', 'descn2'],
                        ['3', 'male', 'name3', 'descn3'],
                        ['4', 'female', 'name4', 'descn4'],
                        ['5', 'male', 'name5', 'descn5']
                    ];

         var store = new Ext.data.Store({
                         proxy: new Ext.data.MemoryProxy(data),
                         reader: new Ext.data.ArrayReader({}, [
                                    { name: 'id' },
                                    { name: 'sex' },
                                    { name: 'name' },
                                    { name: 'descn' }
                                ])
                                });
                      
         store.load();

         var grid = new Ext.grid.GridPanel({
             autoHeight: true,
             renderTo: 'grid',
             store: store,
             cm: cm
         });

         Ext.get('remove').on('click', function() {   --监听删除按钮的单击事件
             store.remove(store.getAt(1));            --store.getAt(1) 获得第2行数据
             grid.view.refresh();                     --强制grid刷新,重新计算行号
         });

     });
页面代码:
 <body>
        <div id="grid"></div>
        <input id="remove" type="button" value="删除第二行数据" />
</body>

二、 设置复选框
 复选框是通过Ext.grid.CheckboxSelectionModel来设置的,它会在每行数据前加一个复选框,另外它必须添加到列定义和表格装配定义2个部分。默认单击表格的某一行,复选框就会自动选中。可以通过如下设置取消单击即选中,而需要通过单击复选框来选中:
  var sm = Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn });   
复选框设置代码:
 Ext.onReady(function() {
         var sm = Ext.grid.CheckboxSelectionModel();   
         var cm = new Ext.grid.ColumnModel([
                     new Ext.grid.RowNumberer(),           --在这里设置行号
                     sm,                                   --设置复选框//不添加这项 就不会显示单选了
                    { header: '编号', dataIndex: 'id' },
                    { header: '性别', dataIndex: 'sex' },
                    { header: '名称', dataIndex: 'name' },
                    { header: '描述', dataIndex: 'descn' }
                 ]);

         var data = [
                        ['1', 'male', 'name1', 'descn1'],
                        ['2', 'female', 'name2', 'descn2'],
                        ['3', 'male', 'name3', 'descn3'],
                        ['4', 'female', 'name4', 'descn4'],
                        ['5', 'male', 'name5', 'descn5']
                    ];

         var store = new Ext.data.Store({
                         proxy: new Ext.data.MemoryProxy(data),
                         reader: new Ext.data.ArrayReader({}, [
                                    { name: 'id' },
                                    { name: 'sex' },
                                    { name: 'name' },
                                    { name: 'descn' }
                                ])
                                });
                      
         store.load();

         var grid = new Ext.grid.GridPanel({
             autoHeight: true,
             renderTo: 'grid',
             store: store,
             cm: cm,
             sm:sm
         });
     });

三、选择模型
(1).RowSelectionModel 模型
    在定义Ext.grid.GridPanel时,默认使用的是RowSelectionModel——行选择模型,当单击某一个单元格时,默认选中的是却是整行,选择模型默认
支持多选,鼠标单击时按住Shift或Ctrl键就可以选择多行。如果只希望选择一行,需要设置singleSelect参数。

(2).CellSelectionModel模型
    每次只允许选择一个单元格,EditorGrid里默认使用的就是CellSelectionModel. 当然也可以将EditorGrid的选择模型设置为RowSelectionModel,
从而达到选中一整行的效果。

(3).获取选中的行
  Ext.get('remove').on('click', function() {
             var selections = grid.getSelectionModel().getSelections();    --先获取选择模型,然后从选择模型中获取选中的记录。
             if (selections.length > 0) {
                 Ext.Msg.confirm('提示', '你确认删除选中的记录吗?', function(_btn) {
                     if (_btn == 'yes') {
                         for (var i = 0; i < selections.length; i++) {
                             var record = selections;
                             store.remove(record);
                         }
                         grid.view.refresh();
                     }
                 });

分享到:
评论

相关推荐

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    EXTJS的`Ext.selection.CheckboxModel`(或简写为`checkboxSelection`)提供了复选框选择模型,用于表格(grid)和其他组件,使得用户可以通过复选框进行多项选择。全选功能通常通过添加一个特殊的复选框来实现,该...

    extjs4.1下拉复选框完整DEMO

    在这个"extjs4.1下拉复选框完整DEMO"中,我们主要关注的是如何使用ExtJS实现一个具有动态加载功能的下拉复选框组件。这个DEMO包含以下几个关键组成部分: 1. **ext-all-debug.js**:这是ExtJS的核心库文件,包含了...

    extjs4带全选复选框的下列表(有bug)

    1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选...2、下拉列表选择功能的js代码在下面文件里: extjs4.2.1\examples\form\MultipleComboBox.js

    带复选框的 ExtJs tree

    在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    当树形组件结合复选框时,可以实现用户对节点的选择操作,如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常实用。 首先,我们要理解ExtJS树形组件的基本构造。一个树形组件由节点(Nodes...

    基于EXTjs 的 动态复选框树

    基于EXTjs 的 动态复选框树 json数据交互

    extjs3.X 带复选框的树

    "带复选框的树"是ExtJS中的TreePanel组件的一个扩展,允许用户通过复选框选择树结构中的节点。这种功能在数据层级结构的管理和筛选中非常有用,例如在组织架构、文件系统或者权限设置中。 复选框树的核心在于`...

    extjs表格(表格后台数据读,分页),树(后台数据读取,复选框联动)的基本操作示例

    总结,这个示例展示了如何使用ExtJS的GridPanel和TreePanel组件,结合后台数据读取,实现分页显示表格数据和树形结构数据,以及复选框的联动效果。在Visual Studio 2008环境中,开发者可以编写和调试这些功能,为...

    Extjs4.2带复选框下拉树组件

    网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css

    弹出层弹出层复选框

    提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数 弹出 - Boxy.alert() - 回调函数总是不被调用 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用 行业选择器 - Boxy.industry() - 仅当...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    在本教程中,我们将深入探讨ExtJS中的"RemoteCheckboxGroup",这是一个用于处理远程数据源的动态复选框组件。这个组件通常用于显示从服务器获取的动态选项,它允许用户根据需要选择或取消选择多个选项,同时将这些...

    ExtJs表格点击超链接获取行的值

    ### ExtJs表格点击...在ExtJs中,通过合理利用`renderer`和选择模型,我们可以轻松地在表格中添加超链接,并在点击时获取行数据。同时,丰富的配置选项使得我们能够高度定制表格的功能和样式,满足不同的业务需求。

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到的“全选/全不选”功能,是多选下拉框的一种高级特性,它提供了快速选择或取消所有选项的便利。 首先,我们来看看`...

    Extjs表格合并代码

    在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...

    EXTJS4自学手册

    EXTJS4自学手册——EXT对象选择 二 Extjs 数据组件 EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4...

    Extjs改变树节点的勾选状态点击按钮将复选框去掉

    在树形控件中,节点的勾选状态通常通过复选框来表现,这个状态可以反映出用户对节点的选择情况。 在一些业务场景中,可能需要动态地改变树节点的勾选状态。例如,可能会有一个按钮的功能是清空树节点的勾选状态,...

    关于extjs treepanel复选框选中父节点与子节点的问题

    总的来说,EXTJS TreePanel的复选框功能是通过监听节点状态变化并递归地更新子节点状态来实现的,同时需要确保所有子节点未选中时父节点才能取消选中。这种设计提高了用户界面的交互性和易用性。

    ext复选框的ColumnTree扩展包

    总的来说,"ext复选框的ColumnTree扩展包"为EXT的ColumnTree组件提供了增强的功能,使得在树形数据结构中进行选择操作变得更加便捷。通过引入这个扩展,开发者可以快速地为自己的EXT应用增加复选框功能,提高用户...

Global site tag (gtag.js) - Google Analytics