zoukankan      html  css  js  c++  java
  • handsontable-developer guide-data binding,data sources

    数据绑定:

    1、表格中得数据是引用了数据源中的数据:表格中数据改变,数据源中得数据也改变;数据源中得数据改变,通过render方法,表格中的数据也改变;

    2、如果想把数据源中的数据和表格中的数据分开:JSON.parse(JSON.stringify(data2))

    3、保存之前clone表格,使用afterChange的var tmpData = JSON.parse(JSON.stringify(data3));语句。

    afterChange:cell改变之后,会触发function(changes, source){}
    changes:是二维数组,每一被编辑的单元格信息有:[row, prop, oldVal, newVal]
    source:alter", "empty", "edit", "populateFromArray", "loadData", "autofill", "paste"

    数据源:

    1、数组

    data = [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
      ['2012', 10, 11, 12, 13, 15, 16],
      ['2013', 10, 11, 12, 13, 15, 16],
      ['2014', 10, 11, 12, 13, 15, 16],
      ['2015', 10, 11, 12, 13, 15, 16],
      ['2016', 10, 11, 12, 13, 15, 16]
    ];
    

    2、隐藏第二列

    columns: [
      {data: 0},
      {data: 2},
      {data: 3},
      {data: 4},
      {data: 5},
      {data: 6}
    ]
    

    3、对象数组

    objectData = [
      {id: 1, name: 'Ted Right', address: ''},
      {id: 2, name: 'Frank Honest', address: ''},
      {id: 3, name: 'Joan Well', address: ''},
      {id: 4, name: 'Gail Polite', address: ''},
      {id: 5, name: 'Michael Fair', address: ''},
    ];
    

    4、对象数组嵌套列映射

    nestedObjects = [
      {id: 1, name: {first: "Ted", last: "Right"}, address: ""},
      {id: 2, address: ""}, // HOT will create missing properties on demand
      {id: 3, name: {first: "Joan", last: "Well"}, address: ""}
    ];
    columns: [
      {data: 'id'},
      {data: 'name.first'},
      {data: 'name.last'},
      {data: 'address'}
    ];
    

    5、对象数组自定义数据约定:数据源为空

    hot5 = new Handsontable(container, {
      data: [],
      dataSchema: {id: null, name: {first: null, last: null}, address: null},
      startRows: 5,
      startCols: 4,
      colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
      columns: [
        {data: 'id'},
        {data: 'name.first'},
        {data: 'name.last'},
        {data: 'address'}
      ],
      minSpareRows: 1
    });
    

    6、数据源为函数:http://docs.handsontable.com/0.16.0/tutorial-data-sources.html  最后一个

     var
      container6 = document.getElementById('example6'),
      hot6;
    
    hot6 = new Handsontable(container6, {
      data: [
        model({id: 1, name: 'Ted Right', address: ''}),
        model({id: 2, name: 'Frank Honest', address: ''}),
        model({id: 3, name: 'Joan Well', address: ''}),
        model({id: 4, name: 'Gail Polite', address: ''}),
        model({id: 5, name: 'Michael Fair', address: ''})
      ],
      dataSchema: model,
      colHeaders: ['ID', 'Name', 'Address'],
      columns: [
        {data: property('id')},
        {data: property('name')},
        {data: property('address')}
      ],
      minSpareRows: 1
    });

    function model(opt){
    //...
  • 相关阅读:
    Spring AOP中pointcut expression表达式解析
    java中Action层、Service层和Dao层的功能区分
    vim对erlang语法支持
    svn跳过某个目录
    时间,闰秒,及NTP
    grep
    【转】MySql数据库--mysql_real_escape_string()函数
    Linux sed 批量替换多个文件中的字符串
    求最大公约数
    怎么利用SQL语句查询数据库中具体某个字段的重复行
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4656297.html
Copyright © 2011-2022 走看看