In Excel, you can perform almost all operations on webpages, such as dragging and copying, Ctrl + C, and Ctrl + V.
In addition, it supports the following browsers: IE7 +, FF, Chrome, Safari, and Opera.
How to use:
First, introduce the JS and CSS files related to the jQuery framework and Handsontable plug-ins on the page. The following two files are necessary, and others are optional, if you need a function (see the demo), add it.
Copy codeThe Code is as follows: <script src = "jquery. min. js"> </script>
<Script src = "jquery. handsontable. full. js"> </script>
<Link rel = "stylesheet" href = "jquery.handsontable.full.css">
Then add a DIV layer for rendering the Excel editing table
Copy codeThe Code is as follows: <div id = "example1"> </div>
Finally, you can initialize it.
Copy codeThe Code is as follows: // data
Var data = [
{Id: 1, name: "Ted", isActive: true, color: "orange "},
{Id: 2, name: "John", isActive: false, color: "black "},
{Id: 3, name: "Al", isActive: true, color: "red "},
{Id: 4, name: "Ben", isActive: false, color: "blue "}
];
// Yellow Rendering Method
Var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties ){
Handsontable. TextCell. renderer. apply (this, arguments );
CSS ({
Background: 'yellow'
});
};
// Green Rendering Method
Var greenRenderer = function (instance, td, row, col, prop, value, cellProperties ){
Handsontable. TextCell. renderer. apply (this, arguments );
CSS ({
Background: 'green'
});
};
// Initialization
Var $ container = $ ("# example1 ");
$ Container. handsontable ({
Data: data,
StartRows: 5,
ColHeaders: true,
MinSpareRows: 1,
Columns :[
{Data: "id "},
{Data: "name", type: {renderer: yellowRenderer }}, // yellow Rendering
{Data: "isActive", type: Handsontable. CheckboxCell}, // multiple selection box
{Data: "color ",
Type: Handsontable. AutocompleteCell, // Automatic completion
Source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] // Data source
}
],
Cells: function (row, col, prop ){
If (row = 0 & col = 0 ){
Return {type: {renderer: greenRenderer }};
}
}
});
Note that the div container is initialized after it is loaded:
Demo code:
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Basic Demo </title>
<Script src = "jquery. min. js"> </script>
<Script src = "jquery. handsontable. full. js"> </script>
<Link rel = "stylesheet" href = "jquery.handsontable.full.css">
<Script>
$ (Function (){
// Data
Var data = [
{Id: 1, name: "Ted", isActive: true, color: "orange "},
{Id: 2, name: "John", isActive: false, color: "black "},
{Id: 3, name: "Al", isActive: true, color: "red "},
{Id: 4, name: "Ben", isActive: false, color: "blue "}
];
// Yellow Rendering Method
Var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties ){
Handsontable. TextCell. renderer. apply (this, arguments );
CSS ({
Background: 'yellow'
});
};
// Green Rendering Method
Var greenRenderer = function (instance, td, row, col, prop, value, cellProperties ){
Handsontable. TextCell. renderer. apply (this, arguments );
CSS ({
Background: 'green'
});
};
// Initialization
Var $ container = $ ("# example1 ");
$ Container. handsontable ({
Data: data,
StartRows: 5,
ColHeaders: true,
MinSpareRows: 1,
Columns :[
{Data: "id "},
{Data: "name", type: {renderer: yellowRenderer }}, // yellow Rendering
{Data: "isActive", type: Handsontable. CheckboxCell}, // multiple selection box
{Data: "color ",
Type: Handsontable. AutocompleteCell, // Automatic completion
Source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"] // Data source
}
],
Cells: function (row, col, prop ){
If (row = 0 & col = 0 ){
Return {type: {renderer: greenRenderer }};
}
}
});
});
</Script>
</Head>
<Body>
<Div id = "example1"> </div>
</Body>
</Html>
