Jquery ligerui tutorial Table (3) check box, multi-header, grouping, summary, and details jquery ligerui tutorial getting started jquery ligerui tutorial table (1)

ArticleDirectory

• Obtain selected rows
• Selected by default
• Lock Column
• Related Events

Reading directory

• Check box
• Multiple Headers
• Group
• Summary
• Details

Check box

You can select multiple check boxes in grid mode. You only need simple configuration.

 
Checked:True
 

Obtain selected rows

To obtain the selected row, use the getselecteds method:

 
VaRRows=G. getselecteds ();
Alert (rows. Length );
 

Selected by default

Sometimes we want some rows to be selected during initialization. We can use the ischecked parameter. This is a function, for example:

$ ("# Maingrid4"). ligergrid ({
Checkbox:True,
Columns :[
{Display: 'Primary key', name: 'mermerid', align: 'left', width: 120 },
{Display: 'Company name', name: 'companyname', minwidth: 60 },
{Display: 'Contact name', name: 'contactname', width: 50, align: 'left '}
{Display: 'city', name: 'city '}
], Pagesize: 30,
Data: customersdata,
Width: '20180101', height: '20180101', ischecked: f_ischecked
});
 

 

FunctionF_ischecked (rowdata)
{
If(Rowdata. customerid. indexof ('A') = 0)
Return True;
Return False;
}
 

Lock Column

If the fixed column function is enabled, frozen: True. The check box column is locked by default. you can remove it by setting the frozencheckbox parameter.

 
Frozencheckbox:False
 

Related Events

If you do not know how to use the event, refer

Jquery ligerui getting started

Jquery ligerui tutorial table (1)

Multiple Headers

If columns is configured as a tree, it can be changed to multiple headers. For example:

Columns :[
{Display: 'Company information', columns:
[

{Display: 'Company name', name: 'companyname', minwidth: 60, width: 300}
]
},
{Display: 'Personal information', columns:
[
{Display: 'Primary key', name: 'mermerid', align: 'left', width: 120 },
{Display: 'Contact name', name: 'contactname', width: 50, align: 'left '},
{Display: 'city', name: 'city', headertext: '000000 '}
]
}
]
 

Columns can be expanded infinitely, that is, it can be a level-3 multi-header or a level-4 Multi-header, as long as you want.

Group

You only need to configure a groupcolumnname parameter for grouping, and the plug-in can be completed automatically. You can configure groupcolumndisplay to display the Group Name:

You can also customize the group display format:

Summary

There are two methods to summarize. One is to summarize all the data and always summarize the current page.

1. Summary of all data: Generally, the table data you bind has the rows and total attributes. You can add other attributes for statistics, such as sumamount.

 
Totalrender: f_totalrender

FunctionF_totalrender (data, currentpagedata)
{
Return"Total Amount:" + data. sumamount;
}
 

2. For the summary of the current page data/group data, set the type of totalsummary for a column:

You can also customize the format of the summary cell:

You can work with a group to summarize only the data of the group:

Details

The details work in a very simple way. When you click the details expand/contract button, a blank line is created (CodeAnd obtain the data of the current row. We will perform some work based on the data of the current row, such as obtaining the data in the detail table or expanding some information not listed in the current list, such as images, or expanding the editing row of the current row.

Edit details line: