zoukankan      html  css  js  c++  java
  • Ext 表格的操作

    1) 表格数据选择


    行选择模式:

    Js代码 复制代码
    1. var rowcount = grid.getSelectionNode().getSelections();  
    var rowcount = grid.getSelectionNode().getSelections();


    可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下

    Js代码 复制代码
    1. var strsex = rowcount[i].get(‘sex’);  
    var strsex = rowcount[i].get(‘sex’);


    单元格选择模式


    如果在GridPanel的配置属性增加sm属性如下

    Js代码 复制代码
    1. sm:new Ext.grid.CellSelectionModel();  
    sm:new Ext.grid.CellSelectionModel();
    

     则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格,而不是默认的选择某一行。选择方式如下

    Js代码 复制代码
    1. var cell = grid.getSelectionNode().getSelectedCell();  
    var cell = grid.getSelectionNode().getSelectedCell();


    得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据

    Js代码 复制代码
    1. var colname = grid.getColumnModel().getDataIndex(cell[1]);  //获取列名   
    2. var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据  
    var colname = grid.getColumnModel().getDataIndex(cell[1]);  //获取列名
    var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据


    getStore():获取表格的数据集
    getAt():获取该数据集cell[0]行
    get():获取该行colname的数据


    2) 为表格增加链接


    有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
    如下:{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
    定义DomUrl方法

    Js代码 复制代码
    1. function DomUrl(value){   
    2. return "<a href=>"+value+"</a>";   
    3. }  
    function DomUrl(value){
    return "<a href=>"+value+"</a>";
    }


    如果表格内的数据是一个链接如:www.sina.com这样写法自然没有问题,但是大多数时候我们在表格中不会直接写一个链接,如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的,而且表格初始化之后这个属性无法改变,也就是只读属性。


    处理方法如下:
    定义一个全局变量,初始值为0;DomUrl函数如下

    Js代码 复制代码
    1. function DomUrl(value){   
    2. var row = grid.getSelectionModel().selectRow(startrow);//选中当前行   
    3. var rownum = grid.getSelectionModel().getSelected();//获取当前行   
    4. startrow ++;   
    5. var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串   
    6. return "<a href='"+strurl+"'>"+value+"</a>";   
    7. }  
    function DomUrl(value){
    var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
    var rownum = grid.getSelectionModel().getSelected();//获取当前行
    startrow ++;
    var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值,并组织链接字符串
    return "<a href='"+strurl+"'>"+value+"</a>";
    }


    不过不要忘记在下次提交的时候将startrow赋值为0。


    3) 表格的属性


            表格的属性分为配置属性(在操作表格时无法修改),以及其他可读写属性,方法,以及事件。如下:


     配置属性


    a) activeItem:渲染布局时激活的子元素。
    b) applyTo:指定渲染对象。
    c) autoDestroy:当容器的子元素从容器中移除时是否自动销毁。
    d) autoExpandColumn:指定自动填充表格剩余区域的列id
    e) autoExpandMax:可自动扩张的最大宽度。
    f) autoExpandMin:可自动扩张的最小宽度
    g) autoHeight:自动扩充高度
    h) autoShow:是否自动显示
    i) autoWidth:自动扩充宽度
    j) bbar/tbar:底部/顶部状态栏
    k) bufferResize:容器再布局的缓冲频率
    l) colModel/cm:列模式
    m) cls:组件的额外css格式。
    n) collapsible:是否显示快捷隐藏按钮
    o) defaults:指定默认配置。
    p) disableSelection:是否禁止选择表格行或列
    q) enableDragDrop:是否允许表格列的拖放操作。
    r) enableHdMenu:是否显示表格列的菜单。
    s) frame:边框是否显示
    t) loadMask: 是否显示加载动画
    u) selModel/sm:表格选择模式
    v) store:表格数据集
    w) stripeRows:是否显示分隔线。
    x) title:表格标题


    方法


    a) getColumnModel():得到表格列模型
    b) getGridEl():得到表格下的元素
    c) getPosition():得到组件的当前位置,返回一个数组
    d) getSelectionModel():得到选中模型
    e) getSize():得到组件大小
    f) getStore():得到组件的数据集
    g) getView():得到表格的GridView对象。
    h) hide():隐藏当前组件
    i) isVisible():判断当前组件是否显示
    j) setDisabled( Boolean):设置组件的可用性
    k) un():解除组件的监听
    l) on():为组件添加监听
    on ( String eventName, Function handler, [Object scope] )
    eventName:添加监听的名称
    handler:事件处理函数
    scope:事件响应的作用域,包括scope,delay,single,buffer。
      

  • 相关阅读:
    WebSocket
    牛人
    ECSHOP+wamp
    数据结构之-----------排序
    DRGS指标计算方法
    Oracle 11g安装教程
    JavaScript入门
    多态
    类的继承
    上传工具类
  • 原文地址:https://www.cnblogs.com/meetrice/p/1205442.html
Copyright © 2011-2022 走看看