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

    原文地址:http://blog.csdn.net/mafan121/article/details/46119905

    1.自动填充单元格数据

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

    2.合并单元格

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

    或者初始化声明:mergeCells:true   //表示允许单元格合并

    但单元格合并的操作,需如下操作:

     1 if(key == "merge") {    
     2     if(hot.mergeCells.mergedCellInfoCollection.length > 0) {    
     3         for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) {    
     4             if(hot.mergeCells.mergedCellInfoCollection[k].row == row &&    
     5                  hot.mergeCells.mergedCellInfoCollection[k].col == col) {    
     6                     hot.mergeCells.mergedCellInfoCollection.splice(k,1);    
     7                     return;    
     8             }else{    
     9                 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col,     
    10                     "rowspan": rowspan, "colspan": colspan});    
    11                     break;    
    12             }    
    13         }    
    14     } else {    
    15         hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan});    
    16     } 

    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:评论内容

             }

    ]

  • 相关阅读:
    C#-Linq-SelectMany
    C#-Linq-SelectMany
    DI是实现面向切面和面向抽象的前提
    java流程控制之Scanner(2)
    java流程控制之Scanner(1)
    java运算符之三目运算符
    java运算符之位运算
    java运算符之与或非
    java运算符之加减乘除
    java基础语法
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/8340560.html
Copyright © 2011-2022 走看看