handsontable自定義渲染

時間 2019-11-22

標籤 handsontable 自定義渲染简体版

原文原文鏈接

　　本文主要介紹在使用Handsontable過程當中，對加載的數據進行字體顏色、樣式（style）、數據格式化，對齊方式的處理，並添加自定義圖片和單機事件功能。css

　　代碼以下：html

<!DOCTYPE html>
<html>
<head>
    <title>handsontable demo</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="handsontable/htstyle.css">
    <link rel="stylesheet" href="handsontable/htstyle-custom.css">
    <script src="handsontable/jquery-1.12.1.js"></script>
    <script src="handsontable/handsontable.full.js"></script>
</head>
<body>
    <div id="example"></div>

    <script>
            var data = [
                {riqi:'2017-01',address: '北京', goods:'冰箱',price: '3399',sales: 530,del:''},
                {riqi:'2017-01', address:'天津',goods: '空調', price:'4299',sales: 522,del:''},
                {riqi:'2017-01',address: '上海',goods: '洗衣機',price: '1299',sales: 544,del:''},
                {riqi:'2017-01', address:'廣州',goods: '彩電',price: '4599',sales: 562,del:''},
                {riqi:'2017-01', address:'深圳', goods:'熱水器', price:'1099',sales: 430,del:''},
                {riqi:'2017-02',address: '重慶',goods: '筆記本電腦',price: '4999',sales: 666,del:''},
                {riqi:'2017-02', address:'廈門',goods: '油煙機',price: '2899',sales: 438,del:''},
                {riqi:'2017-02',address: '青島',goods: '飲水機', price:'899',sales: 620,del:''},
                {riqi:'2017-02', address: '大連', goods: '手機', price: '1999', sales: 500,del:''}
            ];

            function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.TextRenderer.apply(this, arguments);
                if (prop == 'address') {//修改字體顏色
                    td.style.color = '#32CD32';
                 
                    //若是要添加其餘樣式，能夠用如下寫法
  //td.style = 'font-weight: bold;';
                }
                else if (prop == 'price') {
                    //格式化價格數據
                    td.innerText = value != null ? numbro(value).format('0.00') : "";
                }
                else if (prop == 'sales') {
                    //右對齊
                    td.style.textAlign = 'right';
                    td.innerText = value != null ? numbro(value).format('0,0.00') : "";
                }
                else if (prop == 'del') {
                    //添加自定義的圖片，並給圖片的chick添加事件
                    var escaped = Handsontable.helper.stringify(value),
                      imgdel;

                    imgdel = document.createElement('IMG');
                    imgdel.src = "handsontable/remove.png";
                    imgdel.width = 20;
                    imgdel.name = escaped;
                    imgdel.style = 'cursor:pointer;';//鼠標移上去變手型
                    Handsontable.dom.addEvent(imgdel, 'click', function (event) {
                        hot.alter("remove_row", row);//刪除當前行
                    });

                    Handsontable.dom.empty(td);
                    td.appendChild(imgdel);
                    td.style.textAlign = 'center';//圖片居中對齊
                    return td;
                }
            }
            Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

            var hot = new Handsontable(document.getElementById('example'),{
                data: data,
                colHeaders: ['操做', '日期', '地點', '商品', '單價', '銷量'], // 使用自定義列頭
                rowHeaders: true,
                colWidths: 150, // 設置全部列寬爲150像素
                filters: true,
                columnSorting: true,
                sortIndicator: true,
                autoColumnSize: true,
                manualColumnResize: true,
                undo: true,
                redo: true,
                wordWrap: true,
                copyable: true,
                mergeCells: false,
                manualRowResize: true,
                manualRowMove: true,
                manualColumnMove: false,
                renderAllRows: true,
                allowInsertRow: true,
                allowInsertColumn: false,
                fixedColumnsLeft: 1,
                columns: [ {
                    data: 'del',
                    type: 'text'
                }, {
                    data: 'riqi',
                    type: 'date',
                    dateFormat: 'YYYY-MM-DD'
                },{
                    data: 'address',
                    type: 'text'
                },{
                    data: 'goods',
                    type: 'text'
                },{
                    data: 'price',
                    type: 'numeric'
                },{
                    data: 'sales',
                    type: 'numeric'
                }],
                contextMenu: ['row_above', 'row_below', '---------', 'remove_row','---------','undo','redo','---------','make_read_only','---------','alignment'],
                dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
                cells: function (row, col, prop) {
                    var cellProperties = {};
                    cellProperties.renderer = "negativeValueRenderer";
                    return cellProperties;
                },
            });

    </script>
</body>
</html>

　　須要注意的是在Handsontable中，colHeaders與columns須要一一對應，數據是根據columns中設置的前後順序加載的，效果以下：jquery

　　若是contextMenu和dropdownMenu不須要原來組件提供的那麼多選項，能夠像代碼中那樣寫，Handsontable也提供重寫方法，能夠參考官網：http://docs.handsontable.com/0.16.1/demo-context-menu.htmlapp

By QJLdom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。