jQuery Online Spreadsheet Editing Plugin

Add-ons

2026-07-26 04:56 4 次浏览 • 0 次下载 8.1KB

Plugin Description: A jQuery online spreadsheet editing plugin that supports dynamic columns and rows, as well as input fields, dropdown lists, radio buttons, checkboxes, and more.

Last Updated: 2020-12-15 22:12:18

Changelog:Added a border when hovering the mouse over an item.

Last Updated: 2020-12-14 00:13:20

Changelog:Fixed the radio button selection issue after adding a new row.

Last Updated: 2020-12-11 00:33:22

Usage

Add container:

1	`<div` `id="table"` `class="full">`

Add JavaScript:

var selectOptions = [{
        k: '',
        v: 'Please select'
    },
    {
        k: 'java',
        v: 'Java Development'
    },
    {
        k: 'python',
        v: 'Python Development'
    },
    {
        k: 'rs',
        v: 'Human Resources'
    },
];
var list = [{
        username: 'Zhang San',
        age: 24,
        birth: '1996-06-07',
        job: 'java',
        job2: 'java',
        place: 'Wuhan',
        love: '1,3'
    },
    {
        username: 'Yang Wei',
        age: 28,
        birth: '1992-06-07',
        job: 'python',
        job2: 'java',
        place: 'Wuhan',
        love: '1',
        sex: '2'
    }....
];
 
 
var obj = $("#table").initExcelTable({
    // Whether to display column headers
    showHeader: true,
    columns: [{
            // Configure the table header
            header: {
                text: "Name",
                css: {
                    'font-weight': 'bold'
                }
            },
            // Set column names
            fieldName: 'username',
            // Set cell types. Currently supports input, select, checkbox, and radio
            type: "input",
            width: 200,
            emptyText: "Please enter a name...",
            cellStyle: {
                align: 'center',
            },
            css: {
                background: '#cff'
            }
        },
        {
            header: {
                text: "Age",
                css: {
                    'font-weight': 'bold',
                    background: '#9fe'
                }
            },
            fieldName: 'age',
            type: "input",
            width: 200,
            emptyText: "Enter a number...",
            readonly: true,
            cellStyle: {
                align: 'right',
            },
            css: {
                background: '#0cf'
            }
        }...
    ],
    // Initialize the number of rows
    row: 4
});
// Set table data
obj.setData(list);
$("#tableBtn").click(function() {
    var data = obj.getData();
    $("#data").val(JSON.stringify(data, null, 2));
})