引入css及js
1.创建表格：

tips:类似excel，一般设置表格的样式、属性会用到A1 B1 C1、A2等来表示第几列

javascript">var tableData = [['', '', '']]//原始数据
var table = undefined
//定义列
var columns = [
    {
        type: 'dropdown',//下拉选择框
        title: '优先级',
        name: 'LEVEL',
        width: 90,
        source: [{id: '1', name: '高'},{id: '2', name: '低'}]
    },
    {
        type: 'calendar',
        title: '日期',
        name: 'BDATE',
        width: 120,
        options: { format: 'YYYY-MM-DD' }//日期格式
    },
    {
        type: 'text',
        title: '数量',
        width: 100,
        name: 'NUM',
        //readOnly: true,//只读框
    }
]

//创建table
table = jspreadsheet(document.getElementById('spreadsheet1'), {
	data: tableData,
	columns: columns,
	filters: true,//是否需要过滤器 过滤数据
	onbeforechange: function (instance, cell, x, y, value) {
	
	},
	//使用过滤器的回调函数
	onfilter: function (instance, filter, value) {
		//filter：选择过滤的名称；value：选择过滤的下标第几项
	    const fresult = value || []
	    const tdata = table.getData()//表格的所有数据行
	    var frow = []
	    if (fresult.length == 0) {
	        frow = tdata
	    } else {
	        tdata.forEach(function (e, i) {
	            if (fresult.indexOf(i) > -1) {
	                frow.push(e)
	            }
	        })
	    }
	},
	//值更改回调函数
	onchange: function (instance, cell, x, y, value) {
	//x列，y行，第x列y行的值是value
	    if (x == 2) {//数量列
	        if (value.trim() != '' && table.getValueFromCoords(2, y).trim() != '') {
	        //table.getValueFromCoords(2, y) 代表获取第2列第y行的值
	            
	        }
	    }
	
	    change(instance, cell, x, y, value, isSoToItem, isSoToNum)
	
	},
	columnSorting: true,
	oninsertrow: function (instance, x, y, arr) {
	    arr[0][0].style.textAlign = "left"
	    arr[0][1].style.textAlign = "left"
	    arr[0][2].style.textAlign = "left"
	},
	style: {
	    A1: 'text-align: left',
	    B1: 'text-align: left',
	    C1: 'text-align: left',
	},
	//鼠标右击事件
	contextMenu: function (obj, x, y, e) {
	    var items = [];
	    if (y != null) {
	        for (var i = 0; i < table.getConfig().columns.length; i++) {
	            if (table.getConfig().columns[i].name == 'NUM') {//名为NUM的列
	                if (i == x) {
	                    items.push({
	                        title: '选择XX',
	                        onclick: function () {
	                            //可通过第y行x列来更改别的值
	                            selectY = y
	                            table.setValueFromCoords(x, y, "val")//更改 第y行x列 的值为val
	                        }
	                    });
	                    items.push({ type: 'line' });//加一条分割线
	                }
	            }
	        }
			//默认表格允许新增行
	        if (obj.options.allowInsertRow == true) {
	            items.push({
	                title: '在上方插入行',
	                onclick: function () {
	                    obj.insertRow(1, parseInt(y), 1);
	                }
	            });
	
	            items.push({
	                title: '在下方插入行',
	                onclick: function () {
	                    obj.insertRow(1, parseInt(y));
	                }
	            });
	        }
	
	        if (obj.options.allowDeleteRow == true) {
	            items.push({
	                title: '删除行',
	                onclick: function () {
	                    obj.deleteRow(obj.getSelectedRows().length ? undefined : parseInt(y));
	                }
	            });
	        }
	
	        if (x) {
	            if (obj.options.allowComments == true) {
	                items.push({ type: 'line' });
	
	                var title = obj.records[y][x].getAttribute('title') || '';
	
	                items.push({
	                    title: title ? obj.options.text.editComments : obj.options.text.addComments,
	                    onclick: function () {
	                        obj.setComments([x, y], prompt(obj.options.text.comments, title));
	                    }
	                });
	
	                if (title) {
	                    items.push({
	                        title: obj.options.text.clearComments,
	                        onclick: function () {
	                            obj.setComments([x, y], '');
	                        }
	                    });
	                }
	            }
	        }
	    }
	
	
	    return items;
	}
});

//值更改函数
function change(instance, cell, x, y, value, isSoToItem1, isSoToNum1) {
	if(x == 2){
		//以下是将数量汇总
		const tdata = table.getData()
        const fresult = table.results || []
        var frow = []
        if (fresult.length == 0) {
            frow = tdata
        } else {
            tdata.forEach(function (e, i) {
                if (fresult.indexOf(i) > -1) {
                    frow.push(e)
                }
            })
        }
        var sum1 = 0

        frow.forEach(function (e) {
            if (typeof e[2] == 'string') {
                sum1 += parseFloat(e[2].trim() || 0)
            } else {
                sum1 += parseFloat(e[2])
            }
        })
        alert(sum1)
        
		//如果该框是只读的话 需要先取消只读，然后设置值，再设为只读
		table.setReadOnly('A' + (parseInt(y) + 1), false)
        table.setValueFromCoords(parseInt(x) + 1, y, "val")
        table.setReadOnly('A' + (parseInt(y) + 1), true)
	}
}

创建基本完成，如已存在表格，又需要重新将表格数据重置（触发后端有新数据）。如需要系统插入一行数据行：

javascript">var cutData2 = table.getData()
var obj={'1','2023-6-30',''}
cutData2.splice(1, 0, obj)//在第一行后插入数据obj

var lData = []
cutData2.forEach(function (e) {
    lData.push(e)
    
})

table.setData(lData)//重置数据
//设置样式  且有设置了只读的要先取消再设置
lData.forEach(function (e, i) {
    table.setReadOnly('A' + (i + 1), false)
    table.setStyle('A' + (i + 1), 'text-align', 'left')
    table.setStyle('B' + (i + 1), 'text-align', 'left')
    table.setStyle('C' + (i + 1), 'text-align', 'left')
    table.setReadOnly('A' + (i + 1), true)
})