Jquery smart UI plugins (2)-List controls (GRID)

Many of my friends have said that the demo and Code on the jquery smart UI website cannot be downloaded. Here I will explain that all the code is stored in dbbank and can be downloaded anonymously, however, sometimes the login box is displayed, but the specific reason is unknown. You can refresh the page, and in most cases it will be okay. If you have time later, the download will be placed in another space.

In addition, many friends asked about the similarities and differences between jquery smart UI and jquery UI, jquery easyui and Other plug-ins. In terms of some features, the types of the two are both the same and different, jquery smart UI is not a selling point of the rich plug-in functions. Its core content is the Ajax development framework developed purely on the frontend, the Data Interaction Between the unified data interfaces on the front and back ends, and quick development. However, the various plug-ins are similar to jquery plug-ins. However, the smart UI is centered around the development framework and focuses on application development and practicality, which may be relatively less functional. For details, see jquery smart UI introduction series. In addition, the smart UI does not exclude other plug-ins. There is also a set of introduction solutions for "external" plug-ins. Later versions of smart UI will introduce some excellent jquery plug-ins one after another.

 

The previous article introduced the chooser in the basic control. In addition, the basic control also includes buttons, datepicker, and so on. This article mainly introduces list controls

• Grid

　　

The main functions of grid are as follows:

1. Support for Ajax data sources and fixed data sources
2. Format basic data types, such as int, currence, float, date, datetime, bool, and enum.
3. Table header sorting, table header size setting, and fixed table Header
4. Sequence Number Column, single choice, multiple choice columns, custom Columns
5. Flip

Compared with other jquery grid plug-ins, the function is indeed quite cool, but it is relatively small. The non-compressed version is 24 K, and the compression is about 10 K.

 

HTML code:

 

 <div id="grid"></div>

 

JS Code:

Code

 VaR datasource = [
{U_name: "11", u_no: "444", u_brithday: "2010-7-25", u_salary: "99", u_type: "4", u_sex: "1", u_desc: "Zheng "}
, {U_name: "112", u_no: "555", u_brithday: "2010-7-25", u_salary: "99", u_type: "2", u_sex: "1", u_desc: "Zheng "}
, {U_name: "122", u_no: "66", u_brithday: "2010-7-25", u_salary: "99", u_type: "1", u_sex: "1", u_desc: "Zheng "}
, {U_name: "13", u_no: "77", u_brithday: "2010-7-25", u_salary: "99", u_type: "2", u_sex: "1", u_desc: "Zheng "}
];
VaR columns = [
{Name: "character", field: "u_name", width: '60px '}
, {Name: "Number", field: "u_no", width: '60px ', sort: True, type: 'num '}
, {Name: "date", field: "u_brithday", width: '80px ', sort: True, type: 'date '}
, {Name: "currency", field: "u_salary", width: '60px ', sort: True, type: 'cur', format: 2}
, {Name: "enumeration", field: "u_sex", width: '50p', sort: True, type: 'enum', format: 'gender '}
, {Name: "Long field", field: "u_desc", width: '120px '}, {name: "Custom column", width: '120px', custom: '<a >$ {u_name} </a> '}
];

// Fixed Data Source
$ ("# Grid"). gridview ({width: 600, height: 250, columns: columns}, datasource, totalrecold );
// Ajax Data Source
$ ("# Grid "). gridview ({width: 600, height: 250, columns: columns, Ajax: {URL: 'fn _ us01 ', data: {ID: 1, Name: 2 }}});
// Complex attributes
$ ("# Grid"). gridview ({width: 600, height: 250, columns: columns, showchk: True, chkfield: 'U _ no ',
Showradio: True, radiofield: 'U _ no', sort: 'U _ brithday DESC ',
Fnbuilded: function (items, datas) {items. each (function (I) {var TD = $ (this ). children ('td: eq (3) '); TD. text (TD. text () + '_' + datas [I]. u_type );})}
, Fnsorted: function (Ops, grid) {alert ("sort:" + ops. Sort + '\ r \ npageindex:' + ops. pageindex );}
}, Users, totalrecold, function (pageindex, pagesize) {$ ("# grid"). girdviewreload ({pageindex: pageindex, pagesize: pagesize}, pageindex = 1? Users: users2 );});

 

The grid initialization method is as follows:

$. FN. gridview = function (options, datasource, totalrecord, fnpagechanged)

Code Description:

Datasource: a fixed data source in JSON format.

Columns: column setting set.

Event Description:

Fnpagechanged (pageindex, pagesize): a custom page turning event that is executed after the system page turning operation. Pageindex: Current page number, pagesize: number of items displayed on the current page

Fnbuilded (items, datas): according to the method executed after the data source is bound, items: the item (TR) set in the list. The type is the jquery object set, datas: data source, and datasource. This method is similar to the dataitembinded event in. Net gridview. This method can be used to implement special control over the list.

Fnsorted (Ops, grid): Sorting event, OPS sorting parameter, Ops. Sort: Sorting statement, Ops. pageindex current page, Ops. pagesize current page displays the number of items.

 

The entire grid initialization process is to first generate a table header and table header event based on the column settings, then generate a data item template, cache it, and determine whether Ajax request data is required, then execute fnbuilded Based on the item template and data.

Note: After initialization, if you need to re-bind the list (for example, query), you cannot use the initialization method. You need to use

$. FN. girdviewreload = function (options, datasource)

Once again, options only initializes the simplified version of the method, and only contains Ajax information (request and query conditions) and paging information.

For more details, refer to the API description.

Detailed API and demo connection

 

Here, we will first reveal that a later version of smart UI will be used to expand the grid. For example, the column editing function (two modes). One is used in combination with the smart UI development framework, controls of various data types can be generated in the corresponding cell without setting in the grid, just like the controls generated on the editing page. The other is the global "anyeditor", which combines the editing control with the display control to implement the editing function anywhere.

 

　　Recently, the plug-in introduced these two articles are relatively simple. Please also ask Hai Han, who wants to briefly introduce several basic controls, later, it will be more convenient to look at the instance utility series of the development framework, because the control interfaces in the instance have been re-encapsulated, and the parameter configuration is also configured in different locations, therefore, you must first briefly understand the basic controls.