Today I would like to talk about a very powerful jquery plugin---handsontable, which implements the Excel effect in HTML, can be implemented in almost Excel, and it can be implemented in the page.
such as: sorting, grouping, data binding, drag copying and so on.
Quick Start1: Download must pack2: Introduction of the Base file
<script data-jsfiddle= "common" src= ". /demo/js/jquery.min.js "></script><script src=". /dist/handsontable.full.js "></script><link rel=" stylesheet "media=" screen "href=". /dist/handsontable.full.css ">
<div id= "Example" ></div>
4 initialization
<script> var data = [//Four rows five columns ["", "Kia", "Nissan", "Toyota", "Honda"], ["" "," ten, One, one, "], [" 2 009 ", (a), one, one, +), [" ",", "()," (), ",") ; $ ("#example"). Handsontable ({ data:data,//) the data minsparerows:5,//the number of rows in the initialization time colheaders:true,//show the table header contextmenu:true//Display Header drop-down menu }) </script>Effect
Give some basic data first
<!doctype html>
Effect
Introduction to Data
Data Displaydata:[[first row of data],[second row of data],... [Nth row of data]] /Object Array
method to get Data: Hot.getdata ().
Method of loading data: Hot.loaddata.
The following formatting is available when you do not need to display a column:
Columns:[{data:0},{data:2}]
The second column of data is not shown here, only the 1th, 3 columns of data
Now let's demonstrate its API on top of this effect
One: General Settings1, freeze the ranks1.1:fixedrowstop frozen rows (fixed top start counting the specified row does not scroll with the vertical scroll bar;
1.2: fixedcolumnsleft frozen column (fixed to the right start counting the specified row does not scroll with the horizontal scroll bar);
2, display the table header2.1:colheaders:true Display list header, default false, preferable true/fals/array, value for array when the
2.2:rowheaders:true display row header, default false, desirable true/fals/array, the value of the wardrobe array when the
3: Allows you to change the size of rows and columns by dragging the header/list header3.1:manualcolumnresize:true Allow drag list header, default = False3.2:manualrowresize:true allows the row header to be dragged, false by default 4: Show Header drop-down menu4.1:contextmenu:true Display Header drop-down menu default false preferable true/false/custom array
5: Set frozen columns manually5.1:manualcolumnfreeze:true set True After you right-click a menu in the cell, this menu will have a "Unfteeze this columu" option, click again will cancel the freeze action. Default is False
6: Give a style name to the current row/column6.1:currentrowclassname: "cur" sets the style name for the current line (mouse clicks on a cell, the entire row to the style)
6.2:currentcolclassname: "cur" sets the style name for the current row and column (mouse clicks on a cell, the entire line to the style)
7: Sort7.1:columnsorting:true sort by clicking on the list header (no icon)
When value is true, indicates that the sort plug-in is enabled
When the value is true, the use of the sort plug-in can be achieved by clicking on the column header text.A value of false indicates that sorting is disabled. When the value is an object,
The object contains two properties: column: The number of columns.
Sortorder:true/false, ascending or descending,
true for ascending order .
When you start a plug-in with an object, you can disable the plugin as follows:
Hot.updatesettings ({
Columnsorting:false
});
The use of sorting can also be implemented directly by calling the sort () method. Do the following:
if (hot.sortingenabled) {
Hot.sort (number of rows, true/false);
True to ascending, false to descending
}8: The adaptive column is very small
8.1:autocolumnsize:true True/false//value is true and column width is not set, the adaptive column size
9: Enable observechanges plugin
9.1:observechanges:true/false//When value is true, enable observechanges plug-in
10: Set column width10.1:COLWIDTHS:[10,5,50],
11: Width of the extended column11.1:stretchh: "Last" preferable Last/all/none: Extend the final column, all: Extend all columns, none default does not extend.
12: Row grouping or column grouping12.1:groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
The above example describes 4 groupings, 第0-2 listed as a group, 第3-5 listed as the second group, 第0-4 behavior a group, 第5-7 as the second group. A group can be seen in a row header or column header, and groupings can be expanded or hidden.
13: After you drag a row or column to a row or column13.1:manualcolumnmove:true/false column can be dragged and moved to the specified column when the value is True
13.2:manualrowmove:true/false when the value is true, the row can be dragged to the specified row
When the value of the property is true, the head of the wardrobe or column can be dragged and moved, and the row or column will be moved to the specified position, and the previous part of the row or column is automatically moved up or backward. When moving, the mouse should select a line or a column line.Attention:
Like you're moving a column,
Then please put the mouse in the list header, when a hand type can be dragged, drag only the data, the list head will not follow the move.
otherMincols: Minimum number of columns
usage
Minrows: Minimum number of rows
Minsparecols: Adding Empty columns
Maxcols: Maximum number of columns
MaxRows: Maximum number of rows
Minsparerows: Add Blank Lines$ ("#example"). Handsontable ({ data:data,//data fixedrowstop:2 at initialization time , Fixedcolumnsleft:3, colheaders:data2,//Display L table head rowheaders:true,//display the table head manualcolumnresize:true, manualrowresize:true, contextmenu:true, manualcolumnfreeze:true, manualcolumnmove:true, currentcolclassname: "cur", Columnsorting:true,/*columns:[{data:0},{data:2}],*/autocolumnsize:true,minsparerows:2,observechanges:true, Colwidths:[10,5,50],stretchh: "Last", groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}], Autocolumnsize:true,manualcolumnmove:true,manualrowmove:true });Two: Methods
To get the Handsontable object, we initialize it in a different way.
var container = document.getElementById (' example '); var hot = new Handsontable (container, { data:data }); Console.log (Hot)
After printing it out, we can see how it provides
Now let's take some simple explanations
Usage
Object. Method (Parameter)
Here is
Hot.alter (' Insert_row ', 0,2, ', true);
1: Add rows or columns, delete rows or columnsAlter (ACTION,INDEX,AMOUNT,SOURCE,KEEPEMPTYROWS)
Action: Has 4 values of Insert_row,insert_col,remove_row,remove_col
Index: Row index, inserted or deleted at index when present, not present when inserting after current line
Amount: The default value of 1 indicates how many rows/columns are inserted
Source: Row or Column object
Keepemptyrows:true/false, the empty row is not deleted when the value is true. 2: Clear table DataClear ()
3: Count all the columns of the table and return3.1:countrows (): The total number of rows in the statistics table, and returnsConsole.log (Hot.countcols ())
4: Cancel the currently selected cellDeselectcell ()
5: Remove a table from a DOM objectDestory ()
6: removes the current editor and selects the current cell, rendering the effect onDestoryeditor (reveroriginal)
7: Returns an active Edit object.
Removes the current editor and selects the current cell, rendering the effect on. If reveroriginal is not true then the edited data will be saved, and if true, the previous data will be restored without saving the new data to the cell.Getactiveeditor ()
8:get the value of a cell based on a row and column indexGetcopyabledata (Startrow,startcol,endrow,endcol)
Reference documents
Handsontable an Excel-like appearance data grid component
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
