从这篇博客，我会一步步的为大家讲解，easyui框架中最常用的一个控件datagrid。在使用easyui框架时，datagrid是使用最多的控件，它不仅好用，关键是实用。

我为大家建立一个博客更新的目录。

目录：

基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）

基于asp.net + easyui框架，一步步学习easyui-datagrid——完成，总结（四）

我们先看一下，我们要使用easyui-datagrid实现的界面：

HTML

 <%--表格显示区--%><table id="tt" title="管理员设置" class="easyui-datagrid" style="width: auto; height: 400px;"        idfield="itemid" pagination="true" data-options="iconCls:'icon-save',rownumbers:true,url:'SetAdmin.ashx/ProcessRequest',pageSize:5, pageList:[5,10,15,20],method:'get',toolbar:'#tb',striped:true" fitcolumns="true"> <%--striped="true"--%><%-- 表格标题--%><thead><tr><th data-options="field:'AdminID',checkbox:true"></th><th data-options="field:'AdminName',width:100">用户名</th><th data-options="field:'AdminPassword',width:120,align:'right'">密码</th><th data-options="field:'AdminRightName',width:120,align:'right'">权限</th><th data-options="field:'ActiveDate',width:100">时间</th>               </tr></thead><%--表格内容--%></table><%--功能区--%><div id="tb" style="padding: 5px; height: auto"><%-- 包括添加管理员，修改、删除管理员 --%><div style="margin-bottom: 5px"><a href="javascript:void(0)" οnclick="newUser()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a><a href="javascript:void(0)" οnclick="editUser() " class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a><a href="javascript:void(0)" οnclick="removeUser()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a></div><%-- 查找管理员信息，根据时间、管理员名 --%><div>时间从:<input id="StartTime" class ="easyui-datebox" style="width: 100px" />到:<input id="EndTime" class="easyui-datebox" style="width: 100px" /> 管理员名: <input id="AdminName"/> 按权限：<select id="quanxian" class="easyui-combobox" name="state" datatextfield="AdminRightName" datavaluefield="AdminRightName" style="width: 150px;" panelheight="auto"  runat="server"></select><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="reloadgrid()">Search</a></div></div>

需要引入的js

    <%--基础js--%><script src="../jquery.min.js"></script><%--easyui 的js--%><script charset="utf-8" src="../jquery.easyui.min.js"></script><%--中文js--%><script src="../locale/easyui-lang-zh_CN.js"></script><%--基础样式--%><link href="../themes/default/easyui.css" rel="stylesheet" /><%--图标样式--%><link href="../themes/icon.css" rel="stylesheet" />

到此为止，页面部分的代码就完成了。页面的制作非常的简单，后面几篇博客的内容才是重头戏，下次再见。

========================================================================================================================

基于asp.net+easyui框架的系列博文：

使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介

Asp.net之真假分页大揭秘、使用AspNetPager实现真分页

Asp.net前端页面开发总结

Asp.net 一般处理程序+扩展

Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)

基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载

基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单

基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）

基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）

基于asp.net + easyui框架，一步步学习easyui-datagrid——完成，总结（四）

=========================================================================================================================