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){
    //...
  • 相关阅读:
    According to TLD or attribute directive in tag file, attribute end does not accept any expressions
    Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are already in use.
    sql注入漏洞
    Servlet—简单的管理系统
    ServletContext与网站计数器
    VS2010+ICE3.5运行官方demo报错----std::bad_alloc
    java 使用相对路径读取文件
    shell编程 if 注意事项
    Ubuntu12.04下eclipse提示框黑色背景色的修改方法
    解决Ubuntu环境变量错误导致无法正常登录
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4656297.html
Copyright © 2011-2022 走看看