zoukankan      html  css  js  c++  java
  • Handsontable对单元格的操作

    1.自动填充单元格数据

    fillHandle:true/false    //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格


    2.合并单元格

    mergeCells:[{row:起始行数,cols:起始列数,rowspan:合并的行数,colspan:合并的列数},...]


    3.初始化单元格或列的对齐方式

    水平样式:htLeft,htCenter,htRight,htJustify

    垂直样式:htTop,htMiddle,htBottom


    4.只读模式

    列只读,设置列属性:readOnly:true

    单元格只读:cellProperties.readOnly = true


    5.设置单元格的编辑类型

    columns:[{type:类型}]

    主要的类型有:

    text:字符串

    numeric:数字类型

    date:日期框

    checkbox:单选框

    password:密码框


    下面几种类型的使用比较特殊

    select:下拉编辑器

    columns:[

          {editor:'select',

          selectOption:[选项1,选项2,...]},

          .......

    ]


    dropdown:下拉选择

    columns:[

         {type:'dropdown',

         source:[选项1,选项2,...]},

         ......

    ]


    autocomplete:自动匹配模式

    columns:[

         {type:'autocomplete',

         source:[选项1,选项2,...],

         strict:true/false,                        //值为true,严格匹配

         allowInvalid:true/false              //值为true时,允许输入值作为匹配内容,只能在strict为true时使用

         },

         ......

    ]


    handsontable:表格模式

    columns:[

         {type:'handsontable',

         handsontable:{...},

         ......

    ]


    自定义模式

    data=[{

               title:html标签,

               description:描述,

               comments:评论,

               cover:封面

           },

           ......

    ]


    自定义边界

    customBorders:[

          range:{

                   form:{row:行数,col:列数},          //起始行列

                   to:{row:行数,col:列数},              //终止行列

                   top/bottom/right/left:{                     //上下右左边线

                       像数,

                       color:颜色

                   }

          }

    ]


    6.查询单元格的值

    查询单元格的值需要3个步骤:

    a.设置hot的属性search为true

    b.创建比对函数

    c.渲染比对结果

    示例代码如下:

    1. var  
    2.    data = [  
    3.      ['Nissan', 2012, 'black', 'black'],  
    4.      ['Nissan', 2013, 'blue', 'blue'],  
    5.      ['Chrysler', 2014, 'yellow', 'black'],  
    6.      ['Volvo', 2015, 'yellow', 'gray']  
    7.    ],  
    8.    example = document.getElementById('example1'),  
    9.    searchFiled = document.getElementById('search_field'),  
    10.    hot;  
    11.   
    12.  hot = new Handsontable(example, {  
    13.    data: data,  
    14.    colHeaders: true,  
    15.    search: true  
    16.  });  
    17.   
    18.  function onlyExactMatch(queryStr, value) {  
    19.    return queryStr.toString() === value.toString();  
    20.  }  
    21.   
    22.  Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {  
    23.    var queryResult = hot.search.query(this.value);  
    24.   
    25.    console.log(queryResult);  
    26.    hot.render();  
    27.  });  

    7.评论

    comments:true/false    //当值为true时可以显示评论,右键菜单可添加删除评论。

    当值为true时,可设置单元格的评论内容,格式为:

    cell:[

             {

                 row:行数,

                 col:列数,

                 comment:评论内容

             }

    ]

  • 相关阅读:
    qt动态加载UI文件
    Qt常见控件和操作
    MySQL
    tomcat
    linux iptables基础
    linux 网络基础
    linux CA及OpenSSL学习
    k8s 访问控制
    k8s 存储卷
    docker 安装部署
  • 原文地址:https://www.cnblogs.com/sily-boy/p/4760997.html
Copyright © 2011-2022 走看看