JQuery GridView plug-in (call method attached)

Source: Internet
Author: User

1. Use xml and json as data sources;
2. You can format the cell content;
3. You can bind an event to each cell or row;
4. Paging navigation;
5. Use css to control the appearance

Source code plug-in download: jQuery-GridView.Alpha2.rar

A jQuery pagination plug-in must be referenced before use, which is already in download;
Custom display columns and custom sorting have not been implemented, and the target is Extjs Grid;

Reference content is as follows:
// Table without Paging
$. Ajax ({
Url: "XMLFile1.xml"
, Success: function (data ){
$ ("# Grid"). gridview (
Data // input data. xml
,{
Root: "root1" // specify the root directory of the data
, Row: "table" // specifies the row mark (only available in xml documents)
, Fields: [// column Definition
{Data: "id", text: "ID "}
,{
Data: "name" // data column
, Text: "name" // text displayed in the header
, DataFormat: // format the data display. If this attribute is specified, the data attribute is invalid.
Function (row) {return "<a href = #" + row. children ("id"). text () +
">" + Row. children ("name"). text () + "</a>"
}
}
,{
Text: "operation"
, DataFormat:
Function (row) {return "<font color = red> Delete </font> "}
, Listeners: {// bind the event to the Unit
Event: "click"
, Fn: function (row, events ){
Alert ("cell event, ID:" + row. children ("id"). text ())
}
}
}
]
, Listeners: {// bind an event to the row
Event: "click"
, Fn: function (row ){
Alert ("row event, ID:" + row. children ("id"). text ())}
}
, Id: "tab" // table ID
, Css: "tabcls" // css of the table
}
);
}
});

:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.