ADOU-V

导航

jquery easyui DataGrid 数据表格 属性

扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

 

1 <table id="tt"></table>

 

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

数据表格（DataGrid）的特性

其特性扩展自 panel，下列是为 datagrid 增加的特性。

 

 

列（Column）的特性

DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。

代码示例：

 1   columns:[[   
 2 
 3       {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
 4 
 5       {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
 6 
 7       {title:'Item Details',colspan:4}   
 8 
 9   ],[   
10 
11       {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
12 
13       {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
14 
15       {field:'attr1',title:'Attribute',width:100},   
16 
17       {field:'status',title:'Status',width:60}   
18 
19  ]]

 

编辑器（Editor）

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为：

例如，文本编辑器（text editor）像下面这样定义：

 

 1   $.extend($.fn.datagrid.defaults.editors, {   
 2 
 3       text: {   
 4 
 5           init: function(container, options){   
 6 
 7               var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   
 8 
 9               return input;   
10 
11           },   
12 
13           getValue: function(target){   
14 
15               return $(target).val();   
16 
17           },   
18 
19          setValue: function(target, value){   
20 
21              $(target).val(value);   
22 
23          },   
24 
25          resize: function(target, width){   
26 
27              var input = $(target);   
28 
29              if ($.boxModel == true){   
30 
31                  input.width(width - (input.outerWidth() - input.width()));   
32 
33              } else {   
34 
35                  input.width(width);   
36 
37              }   
38 
39          }   
40 
41      }   
42 
43  });

 

数据表格视图（DataGrid View）

用 $.fn.datagrid.defaults.view 重写了 defaults。

view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

事件

其事件扩展自 panel，下列是为 datagrid 增加的事件。

方法

 

posted on 2015-05-05 10:24  a-dou  阅读(404)  评论(0)    收藏  举报