zoukankan      html  css  js  c++  java
  • Ext.grid.行相关

    extjs grid的行选择

    在extjs grid的配置项中,有两个配置项和选择有关:

    • selModel:选择类型的对象,或者选择类型的配置对象,可以进行更多的配置(单选、多选,多选框的位置等)
    • selType:选择类型的字符串,不能进行更多的设置

    selModel示例:

    xtype: "grid",
    store: myStore,
    selModel: {
        selection: "rowmodel",
        mode: "MULTI"
    },
    columns: [
        { xtype: "rownumberer", text: "行号",  50 },
        { text: "姓名", dataIndex: "Name" },
        { text: "年龄", dataIndex: "Age" }
    ]

    selType示例:

    xtype: "grid",
    store: myStore,
    selType: "checkboxmodel",
    columns: [
        { xtype: "rownumberer", text: "行号",  50 },
        { text: "姓名", dataIndex: "Name" },
        { text: "年龄", dataIndex: "Age" }
    ]

    extjs grid 多行选则

    上面已经介绍了如何进行选择,下面就是实际的多选了。默认情况下extjs grid的选择模型为rowmodel,我们可以通过rowmodel进行行选择(还有一个cellmodel,是用来进行单元格选择的)。

    rowmodel默认的选择模型为单行的选择,也就是我们最开始看到的,只能选中一行,要想让它支持多行选择,就要进行相应的配置:

    selModel: {
        selection: "rowmodel",
        mode: "MULTI"
    }

    注意配置项mode,这家伙用来控制是单行选择还是多行选择的,可用的值有3个:

    • SINGLE:单行选择
    • SIMPLE:多行选择,单击选中/取消选中行
    • MULTL:多行选择,支持CTRL、SHIFT功能键,如果要进行多选,需要按住ctrl键。用shift可以进行区域选择

    extjs grid 使用多选框

    使用选择框的选择模型是checkboxmodel,来看看下面的代码:

    xtype: "grid",
    store: myStore,
    selModel: Ext.create("Ext.selection.CheckboxModel", {
        injectCheckbox: 1,//checkbox位于哪一列,默认值为0
        mode: "single",//multi,simple,single;默认为多选multi
        checkOnly: true,//如果值为true,则只用点击checkbox列才能选中此条记录
        allowDeselect: true,//如果值true,并且mode值为单选(single)时,可以通过点击checkbox取消对其的选择
        enableKeyNav: true
    }),
    columns: [
        { xtype: "rownumberer", text: "行号",  50 },
        { text: "姓名", dataIndex: "Name" },
        { text: "年龄", dataIndex: "Age" }
    ]

    extjs grid 获取选中行

    要得到选中行,我们首先要找到grid,然后得到grid的selectionModel,然后再找到选择行,代码如下:

    var grid = win.down("grid");
    var records = grid.getSelectionModel().getSelection();//数组
    Ext.MessageBox.alert("提示", records.length);
  • 相关阅读:
    jquery easy ui 学习 (8)basic treegrid
    jquery easy ui 学习 (7) TreeGrid Actions
    jquery easy ui 学习 (6) basic validatebox
    jquery easy ui 学习 (5) windowlayout
    jquery easy ui 学习 (4) window 打开之后 限制操纵后面元素属性
    提示“应用程序无法启动,因为应用程序的并行配置不正确”不能加载 System.Data.SQLite.dll
    visual studio 添加虚线的快捷键
    VS2010打开项目时,出现“已经在解决方案中打开了具有该名称的项目”问题的解决方案
    visual studio 编译时 出现 Files 的值 乱码
    微信 连接被意外关闭
  • 原文地址:https://www.cnblogs.com/xsSystem/p/13172766.html
Copyright © 2011-2022 走看看