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 } ); } }); |
: