vps做网站教程,深圳英文网站开发,邢台企业网站建设咨询,焦作网站建设公司排名1. DataGrid（数据网格）与 Tree（树）
1.1 Datagrid 数据网格
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目…1. DataGrid（数据网格）与 Tree（树）
1.1 Datagrid 数据网格
扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。 依赖
panelresizablelinkbuttonpagination用法
从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。
table class="easyui-datagrid"
thead
tr
th data-options="field:'code'"Code/th
th data-options="field:'name'"Name/th
th data-options="field:'price'"Price/th
/tr
/thead
tbody
tr
td001/tdtdname1/tdtd2323/td
/tr
tr
td002/tdtdname2/tdtd4612/td
/tr
/tbody
/table
通过 table 标记创建数据网格（datagrid）。嵌套的 th 标签定义表格中的列。
table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"
thead
tr
th data-options="field:'code',width:100"Code/th
th data-options="field:'name',width:100"Name/th
th data-options="field:'price',width:100,align:'right'"Price/th
/tr
/thead
/table
也可以使用 javascript 创建数据网格（datagrid）。 table id="dg"/table$('#dg').datagrid({url:'datagrid_data.json',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]});
通过一些参数查询数据。
$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
});
在向服务器改变数据之后，更新前台数据。
$('#dg').datagrid('reload'); // reload the current page data
数据网格（DataGrid）属性
该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。
名称类型描述默认值columnsarray数据网格（datagrid）的列（column）的配置对象，更多细节请参见列（column）属性。undefinedfrozenColumnsarray和列（column）属性一样，但是这些列将被冻结在左边。undefinedfitColumnsboolean设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。falseresizeHandlestring调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。 该属性自版本 1.3.2 起可用。rightautoRowHeightboolean定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。truetoolbararray,selector数据网格（datagrid）面板的头部工具栏。可能的值： 1、数组，每个工具选项与链接按钮（linkbutton）一样。 2、选择器，只是工具栏。 在 div 标签内定义工具栏： $('#dg').datagrid({toolbar: '#tb'});div id="tb"a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/aa href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a/div 通过数组定义工具栏： $('#dg').datagrid({toolbar: [{iconCls: 'icon-edit',handler: function(){alert('edit')}},'-',{iconCls: 'icon-help',handler: function(){alert('help')}}]});nullstripedboolean设置为 true，则把行条纹化。（即奇偶行使用不同背景色）falsemethodstring请求远程数据的方法（method）类型。postnowrapboolean设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。trueidFieldstring指示哪个字段是标识字段。nullurlstring从远程站点请求数据的 URL。nulldataarray,object要加载的数据。该属性自版本 1.3.2 起可用。 代码实例： $('#dg').datagrid({data: [{f1:'value11', f2:'value12'},{f1:'value21', f2:'value22'}]});nullloadMsgstring当从远程站点加载数据时，显示的提示消息。Processing, please wait …paginationboolean设置为 true，则在数据网格（datagrid）底部显示分页工具栏。falserownumbersboolean设置为 true，则显示带有行号的列。falsesingleSelectboolean设置为 true，则只允许选中一行。falsecheckOnSelectboolean如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。 该属性自版本 1.3 起可用。trueselectOnCheckboolean如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。 该属性自版本 1.3 起可用。truepagePositionstring定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。 该属性自版本 1.3 起可用。bottompageNumbernumber当设置了 pagination 属性时，初始化页码。1pageSizenumber当设置了 pagination 属性时，初始化页面尺寸。10pageListarray当设置了 pagination 属性时，初始化页面尺寸的选择列表。[10,20,30,40,50]queryParamsobject当请求远程数据时，发送的额外参数。 代码实例： $('#dg').datagrid({queryParams: {name: 'easyui',subject: 'datagrid'}});{}sortNamestring定义可以排序的列。nullsortOrderstring定义列的排序顺序，只能用 'asc' 或 'desc'。ascmultiSortboolean定义是否启用多列排序。该属性自版本 1.3.4 起可用。falseremoteSortboolean定义是否从服务器排序数据。trueshowHeaderboolean定义是否显示行的头部。trueshowFooterboolean定义是否显示行的底部。falsescrollbarSizenumber滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。18rowStylerfunction返回例如 'background:red' 的样式。该函数需要两个参数： rowIndex：行的索引，从 0 开始。 rowData：该行相应的记录。 代码实例： $('#dg').datagrid({rowStyler: function(index,row){if (row.listprice80){return 'background-color:#6293BB;color:#fff;'; // return inline style// the function can return predefined css class and inline style// return {class:'r1', style:{'color:#fff'}};}}});loaderfunction定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数： param：要传递到远程服务器的参数对象。 success(data)：当检索数据成功时调用的回调函数。 error()：当检索数据失败时调用的回调函数。json loaderloadFilterfunction返回要显示的过滤数据。该函数有一个参数 'data' ，表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。 代码实例： // removing 'd' object from asp.net web service json output$('#dg').datagrid({loadFilter: function(data){if (data.d){return data.d;} else {return data;}}});editorsobject定义编辑行时的编辑器。predefined editorsviewobject定义数据网格（datagrid）的视图。default view列（Column）属性
数据网格（DataGrid） 的列（Column）是一个数组对象，它的每个元素也是一个数组。元素数组的元素是一个配置对象，它定义了每个列的字段。
代码实例：
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
名称类型描述默认值titlestring列的标题文本。undefinedfieldstring列的字段名。undefinedwidthnumber列的宽度。如果未定义，则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能。undefinedrowspannumber指示一个单元格占据多少行。undefinedcolspannumber指示一个单元格占据多少列。undefinedalignstring指示如何对齐该列的数据，可以用 'left'、'right'、'center'。undefinedhalignstring指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。undefinedsortableboolean设置为 true，则允许该列被排序。undefinedorderstring默认的排序顺序，只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。undefinedresizableboolean设置为 true，则允许该列可调整尺寸。undefinedfixedboolean设置为 true，则当 'fitColum
