? ? ? ?從這篇博客，我會一步步的為大家講解，easyui框架中最常用的一個控件datagrid。在使用easyui框架時，datagrid是使用最多的控件，它不僅好用，關鍵是實用。

? ? ? 我為大家建立一個博客更新的目錄。

目錄：

? ? ? 基于asp.net + easyui框架，一步步學習easyui-datagrid——界面（一）

? ? ? 基于asp.net + easyui框架，一步步學習easyui-datagrid——實現(xiàn)分頁和搜索（二）

? ? ? 基于asp.net + easyui框架，一步步學習easyui-datagrid——實現(xiàn)添加、編輯、刪除（三）

? ? ? 基于asp.net + easyui框架，一步步學習easyui-datagrid——完成，總結（四）

? ? ? 我們先看一下，我們要使用easyui-datagrid實現(xiàn)的界面：

HTML

<%--表格顯示區(qū)--%><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><%--表格內(nèi)容--%></table><%--功能區(qū)--%><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><%-- 查找管理員信息，根據(jù)時間、管理員名 --%><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" />

? ? ? ? ? 到此為止，頁面部分的代碼就完成了。頁面的制作非常的簡單，后面幾篇博客的內(nèi)容才是重頭戲，下次再見。

??

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

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

?

使用Jquery+EasyUI框架開發(fā)項目+下載+幫助--EasyUI的簡介

Asp.net之真假分頁大揭秘、使用AspNetPager實現(xiàn)真分頁

Asp.net前端頁面開發(fā)總結

Asp.net 一般處理程序+擴展

Asp.Net構架(Http請求處理流程)、Asp.Net 構架(Http Handler 介紹)、Asp.Net 構架(HttpModule 介紹)

基于asp.net + easyui框架，js實現(xiàn)上傳圖片之前判斷圖片格式，同時實現(xiàn)預覽，兼容各種瀏覽器+下載

基于asp.net+ easyui框架，js提交圖片，實現(xiàn)先上傳圖片再提交表單

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

基于asp.net + easyui框架，一步步學習easyui-datagrid——實現(xiàn)分頁和搜索（二）

基于asp.net + easyui框架，一步步學習easyui-datagrid——實現(xiàn)添加、編輯、刪除（三）

基于asp.net + easyui框架，一步步學習easyui-datagrid——完成，總結（四）

?

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

?

?

轉載于:https://www.cnblogs.com/ainima/p/6331026.html

總結

以上是生活随笔為你收集整理的基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。