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

       從這篇博客，我會一步步的爲你們講解，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)" onclick="newUser()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
            <a href="javascript:void(0)" onclick="editUser() " class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
            <a href="javascript:void(0)" onclick="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'" onclick="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——完成，總結（四）

 

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