JQuery Easy Ui DataGrid

Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults.

The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich. Cell merging, multi-column headers, frozen columns and footers are just a few of its features.

依赖

• panel
• resizable
• linkbutton
• pagination

用法示例

Create datagrid from an existing table element, defining columns, rows, and data in html.

1. <table >
2. <thead>
3. <tr>
4. <th data-options="field:'code'">Code</th
5. <th data-options="field:'name'">Name</th
6. <th data-options="field:'price'">Price</th
7. </tr
8. </thead
9. <tbody>
10. <tr>
11. <td>001</td<td>name1</td<td>2323</td
12. </tr
13. <tr>
14. <td>002</td<td>name2</td<td>4612</td
15. </tr
16. </tbody
17. </table

Create datagrid via <table> markup. The nested <th> tags define the columns on the table.

1. <table
2. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
3. <thead>
4. <tr>
5. <th data-options="field:'code',width:100">Code</th
6. <th data-options="field:'name',width:100">Name</th
7. <th data-options="field:'price',width:100,align:'right'">Price</th
8. </tr
9. </thead
10. </table

Create datagrid using javascript is also allowed.

1. <table id="dg"></table

1. $('#dg').datagrid({
2. url:'datagrid_data.json',
3. columns:[[
4. {field:'code',title:'Code',width:100},
5. {field:'name',title:'Name',width:100},
6. {field:'price',title:'Price',width:100,align:'right'}
7. ]]
8. });

Query data with some parameters.

1. $('#dg').datagrid('load', {
2. name: 'easyui',
3. address: 'ho'
4. });

After changing data to server, refresh the front data.

1. $('#dg').datagrid('reload'); // reload the current page data

表格属性

The properties extend from panel. below is the added properties for datagrid.