ExtJS 6 grid 表格中增加多选

最近在项目中用ExtJS grid制作表格,有需求要多选表格中的行,简单整理一下实现方式。

适用于ExtJS 6

示例表格代码:普通表格

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    width: 400,
    renderTo: Ext.getBody(),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    selModel: {
       type: 'spreadsheet'
    }
});

多选配置: 鼠标选中时同时按<Shift>或<control>或者苹果<command>

selModel: {
    selType: 'rowmodel', // rowmodel is the default selection model
    mode: 'MULTI', // Allows selection of multiple rows
}

使用checkbox 多选

selModel: {
    checkboxSelect: true,
    type: 'spreadsheet'
}

使用checkbox 多选, 设置checkbox位置,checkboxColumnIndex默认是0

selModel: {
    checkboxSelect: true,
    checkboxColumnIndex: 1,
    type: 'spreadsheet'
}

参考官方文档:
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.selection.SpreadsheetModel.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 各位前辈在上小弟拱礼,小弟唤作查查,何为查查,与渣渣者无水矣,意在小弟虽初出茅庐然已成自我,自认非渣渣尔,然...
    研发部的查查阅读 5,138评论 12 20
  • 下面介绍一些Ext中的一些类,组件说明。方便写项目搭页面及架子。 Ext JS所有界面组件 1、使用Ext.con...
    虚幻的锈色阅读 1,886评论 0 3
  • 一、 初识ExtJS 这是个前端框架,但是作为后端人员。要完成从前到后的完整开发,也需要掌握一些前端的知识。本教...
    小炉炉阅读 2,694评论 0 1
  • 准备工作 下载安装 Sencha Cmd 下载 ExtJS SDK 解压到本地(以下例子中extjs sdk解压在...
    食尘者阅读 6,205评论 2 8
  • 寒冬过去,早春来临。北方所有的季节转换都是一个缓慢的过程。而这个过程而我们只有用眼睛去看,有手去触碰,用鼻子去闻...
    山之君者阅读 488评论 2 5