渲染時採用了分塊渲染，支援單元格改變大小，自定義單元格內容，介面靈活，支援瀏覽器滾動條模式與自定義滾動條模式

b-cells

B-cells is a component for rendering big data

Demo

Demo url

Get Starting

Define CellsModel

1.Init CellsModel

    var cellsModel = new HERE.UI.CELL.CellsModel();
複製程式碼

2.Init Header

    var header = {
        height:50, // define header height
        minHeight:100,// define min height of header
        fields:[]
    };
    // Define header field
    var field = {
        name:'', // define column header name
        width:'', // define width absolute width,or relative width,eg 200px or 20%
        minWidth:'',// define min width of column
        style:{
            backgroundColor:'' // define background color
        }
    };
    header.fields.push(field);
複製程式碼

2.Init Rows

    var rows = [];
    // Define row
    var row = {
        height:'10%',// define row height 
        minHeight:'100px'
    };
    // define row fields
    var fields = [];
    fields.push({
        value:'row text',
        html:'',// define html value
        style:{
            'background-color':'#ccc'
        }
    });
    row.fields = fields;
    rows.push(row);
複製程式碼

3.Append header and rows to cellsModel

    cellsModel.header = header;
    cellsModel.rows = rows;
複製程式碼

4.Init Cells

    var tableCell = new HERE.UI.CELL.Cells(cellsModel1,{
        renderTo:'#table1',// dom selector
        rowResize:true, // if row resizable
        colResize:true, // if column resizable
        scrollY:true, // if scroll Y
        scrollX:false, // if scroll X
        customScroll:null // use default scrollbar if null
        /*
         {
             width:12,height:13,hTrackColor:'',
             hScrollColor:'',
             vTrackColor:'',
             vScrollColor:''
         }
         */
    });
複製程式碼

5.Render cells

    tableCell.render();
複製程式碼

6.Cells Event

• Click Event (triggered when click cells area)

    tableCell.addEventListener('click', function (e) {
    })
複製程式碼

• Cells click Event (triggered when click a cell)

    tableCell.addEventListener('cellClick', function (e) {
    });
複製程式碼

• Scroll event (triggered when scrolling)

    tableCell.addEventListener('scroll', function (e) {
    });
複製程式碼