The things you can do in Excel, you can almost do it in a Web page, such as drag copying, CTRL + C, CTRL + V, and so on.
In addition to browser support, it supports the following browsers ie7+, FF, Chrome, Safari, Opera.
How to use:
First of all, introduce the JQuery framework and the related JS and CSS files of the handsontable plug-ins in the page, and the following two are necessary, and others are optional, if a feature is needed (see demo).
Copy Code code 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 to render the Excel editing table
Copy Code code as follows:
<div id= "example1" ></div>
You can finally initialize it.
Copy Code code 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);
$ (TD). CSS ({
Background: ' Yellow '
});
};
Green Rendering method
var greenrenderer = function (instance, TD, Row, COL, prop, value, cellproperties) {
Handsontable.TextCell.renderer.apply (this, arguments);
$ (TD). CSS ({
Background: ' Green '
});
};
Class
var $container = $ ("#example1");
$container. handsontable ({
Data:data,
Startrows:5,
Colheaders:true,
Minsparerows:1,
Columns: [
{data: "id"},
{data: ' name ', type: {renderer:yellowrenderer}},//Yellow render
{data: ' IsActive ', Type:Handsontable.CheckboxCell},//Multi-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 has finished loading:
Demo Code:
Copy Code code as follows:
<! DOCTYPE html>
<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);
$ (TD). CSS ({
Background: ' Yellow '
});
};
Green Rendering method
var greenrenderer = function (instance, TD, Row, COL, prop, value, cellproperties) {
Handsontable.TextCell.renderer.apply (this, arguments);
$ (TD). CSS ({
Background: ' Green '
});
};
Class
var $container = $ ("#example1");
$container. handsontable ({
Data:data,
Startrows:5,
Colheaders:true,
Minsparerows:1,
Columns: [
{data: "id"},
{data: ' name ', type: {renderer:yellowrenderer}},//Yellow render
{data: ' IsActive ', Type:Handsontable.CheckboxCell},//Multi-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>
<body>
<div id= "example1" ></div>
</body>
