The first example Introduction ligerGrid is the core control of the ligerui series of plug-ins. Users can quickly create a beautiful and powerful table that supports sorting, paging, multiple headers, fixed columns, etc.
Supports local data and server data (configuration data or url) Supports sorting and paging (including Javascript sorting and paging) Supports "show/hide" of columns Supports multiple table headers Support fixed columns Support detail rows Support summary rows Support cell templates Support table editing (three editing modes, cell editing, row editing, detail editing) Support tree table Support grouping Code First introduce basic css and js files
Effect Data structure Table data structure Table data has two attributes, one is Rows and the other is Total. Among them, Rows is a data array and Total is the total number of records. In fact, Total does not need to provide it when using local data. The format we use local data can be like this:
id, name both It is a record attribute, which can be customized at will. When configuring columns, you do not have to configure the corresponding columns, you only need to configure the corresponding displayed columns. In subsequent operations, these properties can be obtained. For example, the method getSelected(). Custom cell function render. Tree table data structure The tree structure engineer adds a children parameter based on the table data, such as:
Two ways to bind data ligerGrid has two ways to bind data, One is to use local data, and the other is to use server data. In the first example, we configured the data parameter, this way is the local way. Another way is to configure url parameters and use remote data.
Configure column How many columns are displayed in the table, column width, and the content to be displayed in the column cells are all configured by the columns attribute. The following are the configuration parameters of column:
{ display: 'serial number', //The text displayed in the header column, supports html //Custom function for header content headerRender: function (column) { return "" column.display ""; }, name: 'id', //The row data attribute of cell mapping align: 'center' , //Cell content alignment: left/center/right hide: false, //Whether to hide width: 100, //The width of the column minWidth: 50, //The minimum width of the column isSort: true, //Whether this column is allowed to be sorted, the default is to allow sorting isAllowHide: true, //Whether hiding is allowed, if allowed, it will appear in the [Show/Hide column right-click menu] type: 'string', //Type, used for sorting //Custom cell renderer render: function (record, rowindex, value, column) { //This here points to grid //record row data //rowindex row index //value current value, corresponding to record[column.name] //column column information return value; //return this HTML content displayed in the cell (generally organized according to value and row content) }, //Column summary totalSummary: { align: 'center', //Summary cell content Alignment: left/center/right type: 'count', //Summary type sum, max, min, avg, count. Can multiple types at the same time render: function (e) { //Summary renderer, return html to load into the cell //e Summary Object (including sum, max, min, avg, count) return "
The columns of the table provide a very complete interface that can be expanded. Whether it is content cells or header cells, the content, layout, and size can be customized. Custom header For example, in the header, we can set the display directly to a piece of html:
//Header content custom function headerRender: function (column) { return "< b>" column.display ""; },
Rendering Custom cell The name of column is the attribute that defines which cell is linked to the row data. For example, in the first line of the above example, if name is configured as id, then it should be displayed as "01". If it is configured as name, then it should be displayed as "department 01". There is also the align parameter, which determines the alignment of the cells.
If render is not configured, the content displayed in the cell will be determined by name.
The above is the cell The default display mode. In addition to this method, formatters and custom functions can also be used. Display rules for cell content: , if render is configured, use render . If the type parameter of column extends the corresponding formatter, then use the formatter for rendering. For example, the formatter that defines the currency format is finally used. The default display mode formatter is implemented by extending $.ligerDefaults.Grid.formatters['columntype']. columntype is the column configuration. The type parameter. For example, if you want to format a currency format now:
$.ligerDefaults.Grid.formatters['currency'] = function (num, column) { //num current value //column column information if (!num ) return "$0.00"; num = num.toString().replace(/$|,/g, ''); if (isNaN(num)) num = "0.00"; sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 0.50000000001); cents = num % 100; num = Math .floor(num / 100).toString(); if (cents < 10) cents = "0" cents; for (var i = 0; i < Math.floor(( num.length - (1 i)) / 3); i ) num = num.substring(0, num.length - (4 * i 3)) ',' num.substring(num.length - (4 * i 3)); return "$" (((sign) ? '' : '-') '' num '.' cents); };
In this way, as long as the column type is configured as currency. This function will be used to customize cell content
will use $ .ligerDefaults.Grid.editors['spinner'] to create editors to build.
ligerGrid provides built-in editors such as check boxes, text boxes, dates, numeric adjusters, and drop-down boxes.
Rendering There are many parameters for column. I will not list them all here. I only introduce a few commonly used parameters For more, you can view the API: http:// api.ligerui.com Sort and paging There are also two ways of sorting and paging. One is local sorting and paging. One is server sorting and paging. Only local methods are introduced here. The default situation. Sorting and paging are enabled. If you want to cancel the paging function, as follows:
function selectRow(index) { grid.select(index); } function getSelectRow() { var rows = grid.getSelecteds(); for (var i in rows) { alert(rows[i].name); } }
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
