第一篇学的是做一个管理的外框，接着就是数据datagrid绑定了，这里我用asp.net mvc3来做的，主要就是熟悉属性、方法。
打开easyui的demo 就可以看到如下一段代码：
和上篇一样class="easyui-datagrid", data-options="..."，这是一样的,其他我在网上查了查，并做了整理
DataGrid 属性
| 参数名 | 类型 | 描述 | 默认值 |
| title | string | Datagrid面板的标题 | null |
| iconCls | string | 在面板上通过一个CSS类显示16x16图标。 | null |
| border | boolean | 设置面板是否具有边框 | TRUE |
| width | number | datagrid面板的宽度 | auto |
| height | number | datagrid面板的高度 | auto |
| columns | array | DataGrid列配置对象 | null |
| frozenColumns | array | 冻结的列，被现实在左边 | null |
| striped | boolean | 设置是否让单元格显示条纹。默认false。 | FALSE |
| method | string | 通过该方法类型请求远程数据。默认post。 | post |
| nowrap | boolean | 是否包裹数据，默认为包裹数据显示在一行 | TRUE |
| idField | string | 标识字段，或者说主键字段 | null |
| url | string | 请求数据的URL.(josn格式) | null |
| loadMsg | string | 加载数据时显示的信息 | Processing, please wait … |
| pagination | boolean | 是否显示分页工具栏 | FALSE |
| rownumbers | boolean | 是否显示行号 | FALSE |
| singleSelect | boolean | 是否单行选定 | FALSE |
| fit | boolean | 是否自动适应父容器 | FALSE |
| pageNumber | number | 分页初始化行号 | 1 |
| pageSize | number | 初始化分页大小 | 10 |
| pageList | array | 分页大小选择列 | [10,20,30,40,50] |
| queryParams | object | 请求数据时额外发送的参数 | {} |
| sortName | string | 排序列 | null |
| sortOrder | string | 升序还是降序 'asc' 或者 'desc'. | asc |
| toolbar | string | 工具栏(绑定新增，查询按钮...) | null |
Column 属性
| 名称 | 类型 | 描述 | 默认值 |
| title | string | 列字段要现实的名称 | undefined |
| field | string | 列字段 | undefined |
| width | number | 宽度 | undefined |
| rowspan | number | 单元格行数 | undefined |
| colspan | number | 单元格列数 | undefined |
| align | string | 文本对齐方式，同align属性. | undefined |
| sortable | boolean | 是否可以被排序. | undefined |
| checkbox | boolean | 是否具有多选框 | undefined |
| formatter | class | 方法 |
//value 这个field绑定的值 rowData 这行数据内容 rowIndex 选择行的行号
columns: [[
{ field: 'Id', title: '编号', width: 100, sortable: true },
{ field: 'ClassName', title: '类型名称', width: 150, sortable: true },
{ field: 'ClassDescribe', title: '描述', width: 150, sortable: true },
{ field: 'Id', title: '操作', width: 150, sortable: true, formatter: formatOper
function formatOper(index) {
return "<a href=\"javascript:void(0)\" οnclick=\"UsDelete(" + index + ")\">删除</a>";
}
Events（事件）
| Name | Parameters | Description |
| onLoadSuccess | none | 调用远程数据成功是激活 |
| onLoadError | none | 装载错误时激活 |
| onClickRow | rowIndex , rowData | 点击一行时激活，参数包括： |
| rowIndex:点击的行数，从0开始 | ||
| rowData: 当前行的数据 | ||
| onDblClickRow | rowIndex ,rowData | 双击一行是触发，参数包括: |
| rowIndex:点击的行数，从0开始 | ||
| rowData: 当前行的数据 | ||
| onSortColumn | sort,order | 对一列进行排序时激活,参数包括: |
| sort:排序字段名称 | ||
| order: 排序规则，升序，降序 | ||
| onSelect | rowIndex,rowData | 选中一行时激活，参数有: |
| rowIndex:选中的行数 | ||
| rowData: 数据 | ||
| onUnselect | rowIndex,rowData | 取消选中时激活，参数： |
| rowIndex:选中的行数 | ||
| rowData: 数据 |
onDblClickRow: function (rowIndex, rowData) { //双击事件
}
Methods（方法）
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回所有属性 |
| resize | none | 重置大小布局 |
| reload | none | 重新加载数据 |
| fixColumnSize | none | 调整列的大小 |
| loadData | param | 装载数据，以前的数据会被移除 |
| getSelected | none | 返回选中的行，没有则返回空 |
| getSelections | none | 返回所有的行，空则返回空数组 |
| clearSelections | none | 取消所有选中 |
| selectRow | index | 选中一行，参数为行号 |
| selectRecord | idValue | 根据主键查询出一条记录 |
| unselectRow | index | 取消选中一行 |
刷新datagird的两种方法：
1.grid.datagrid('reload');
2.grid.datagrid({ url:'/Admin/SeachProductTypeInfo?Id='+ 6});//带参数查询（刷新datagrid数据）
代码如下：