[原創] 給 ASP.NET 的 GridView 換炫酷外殼 —— GridView 整合 jquery easyui

本文轉載自查看原文 2014-06-22 22:56 3487 C#/ JavaScript/ ASP.NET

近日給GridView套了個比較炫酷的skin，用 jquery easyui 里的 datagrid 美化了下顯示效果，經過調試功能都已匹配。

原有GridView顯示：

套用 jquery easyui 的 datagrid 后給效果如下，表格列寬可調整，分頁功能可用，但分頁依然是有刷，用url參數實現的，因為內核依然是 GridView，沒有大改。

頁面源代碼：（基本是拖進來自動生成的標准GridView）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=10" /> 
    <title>測試3！</title>
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/URLParser.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" 
            DataSourceID="SqlDataSource1" EmptyDataText="沒有可顯示的數據記錄。" 
            onprerender="GridView1_PreRender" onrowupdating="GridView1_RowUpdating">
            <Columns>
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" 
                    SortExpression="ID" />
                <asp:BoundField DataField="留言人" HeaderText="留言人" SortExpression="留言人" />
                <asp:BoundField DataField="留言人Email" HeaderText="留言人Email" 
                    SortExpression="留言人Email" />
                <asp:BoundField DataField="留言內容" HeaderText="留言內容" SortExpression="留言內容" />
                <asp:BoundField DataField="留言時間" HeaderText="留言時間" SortExpression="留言時間" />
                <asp:BoundField DataField="管理員回復內容" HeaderText="管理員回復內容" 
                    SortExpression="管理員回復內容" />
                <asp:BoundField DataField="管理員回復時間" HeaderText="管理員回復時間" 
                    SortExpression="管理員回復時間" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:LiuYanConnectionString1 %>" 
            DeleteCommand="DELETE FROM [T_留言板] WHERE [ID] = @ID" 
            InsertCommand="INSERT INTO [T_留言板] ([留言人], [留言人Email], [留言內容], [留言時間], [管理員回復內容], [管理員回復時間]) VALUES (@留言人, @留言人Email, @留言內容, @留言時間, @管理員回復內容, @管理員回復時間)" 
            ProviderName="<%$ ConnectionStrings:LiuYanConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [ID], [留言人], [留言人Email], [留言內容], [留言時間], [管理員回復內容], [管理員回復時間] FROM [T_留言板]" 
            
            UpdateCommand="UPDATE [T_留言板] SET [留言人] = @留言人, [留言人Email] = @留言人Email, [留言內容] = @留言內容, [留言時間] = @留言時間, [管理員回復內容] = @管理員回復內容, [管理員回復時間] = @管理員回復時間 WHERE [ID] = @ID" 
            onselected="SqlDataSource1_Selected">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="留言人" Type="String" />
                <asp:Parameter Name="留言人Email" Type="String" />
                <asp:Parameter Name="留言內容" Type="String" />
                <asp:Parameter Name="留言時間" Type="DateTime" />
                <asp:Parameter Name="管理員回復內容" Type="String" />
                <asp:Parameter Name="管理員回復時間" Type="DateTime" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="留言人" Type="String" />
                <asp:Parameter Name="留言人Email" Type="String" />
                <asp:Parameter Name="留言內容" Type="String" />
                <asp:Parameter Name="留言時間" Type="DateTime" />
                <asp:Parameter Name="管理員回復內容" Type="String" />
                <asp:Parameter Name="管理員回復時間" Type="DateTime" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
</body>
</html>

為了便於套用，主要代碼都已經寫成 2 個函數，在 GridView 及 SQLDataSource 的3個事件里調用即可。如果不啟用 GridView 的編輯功能，則 GridView1_RowUpdating 事件里的代碼可省略，這段代碼是為了去除掉用 datagrid 顯示后，更新時莫名其妙的會帶着oldValue。其中 SqlDataSource1_Selected 事件里目的是取得記錄總行數，datagrid 的分頁需要這個參數來計算和統計分頁。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default7 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        EasyUITools.datagridSkin(GridView1);
    }
    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        EasyUITools.datagridSkinUpdate(e);
    }
    protected void SqlDataSource1_Selected(object sender, SqlDataSourceStatusEventArgs e)
    {
        GridView1.Attributes.Add("total", e.AffectedRows.ToString());
    }
}

其中<head>中載入的 URLParser.js 是用於解析 url 的 js 類，百度出來的，感謝原作者，代碼如下：

/**
*@param {string} url 完整的URL地址
*@returns {object} 自定義的對象
*@description 用法示例：var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file='index.html'

myURL.hash= 'top'

myURL.host= 'abc.com'

myURL.query= '?id=255&m=hello'

myURL.params= Object = { id: 255, m: hello }

myURL.path= '/dir/index.html'

myURL.segments= Array = ['dir', 'index.html']

myURL.port= '8080'

yURL.protocol= 'http'

myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

*/
function parseURL(url) {
 var a =  document.createElement('a');
 a.href = url;
 return {
 source: url,
 protocol: a.protocol.replace(':',''),
 host: a.hostname,
 port: a.port,
 query: a.search,
 params: (function(){
     var ret = {},
         seg = a.search.replace(/^\?/,'').split('&'),
         len = seg.length, i = 0, s;
     for (;i<len;i++) {
         if (!seg[i]) { continue; }
         s = seg[i].split('=');
         ret[s[0]] = s[1];
     }
     return ret;
 })(),
 file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
 hash: a.hash.replace('#',''),
 path: a.pathname.replace(/^([^\/])/,'/$1'),
 relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
 segments: a.pathname.replace(/^\//,'').split('/')
 };
}

主要套用代碼 EasyUITools.cs 如下：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
///EasyUITools 的摘要說明
/// </summary>
public class EasyUITools
{

    public static void datagridSkin(GridView gv)
    {
        datagridSkin(gv, null);
    }

    public static void datagridSkin(GridView gv, string sTitle)
    {
        if (gv.Rows.Count > 0)
        {
            string sDataOptions = "rownumbers:true,singleSelect:true";
            if (gv.AllowPaging)
            {
                int iPageNumber = 0;
                if (int.TryParse(gv.Page.Request.QueryString[gv.ID + "_pn"], out iPageNumber))
                    gv.PageIndex = iPageNumber - 1;
                int iPageSize = 10;
                if (int.TryParse(gv.Page.Request.QueryString[gv.ID + "_ps"], out iPageSize))
                    gv.PageSize = iPageSize;
                sDataOptions += ",pagination:true";
            }


            gv.CssClass = "easyui-datagrid";
            gv.Attributes.Add("data-options", sDataOptions);
            gv.Attributes.Add("dg-name", gv.ID);
            if (sTitle != null)
                gv.Attributes.Add("title", sTitle);
            gv.BorderWidth = 1;

            int i = 0;
            foreach (TableCell cell in gv.HeaderRow.Cells)
            {
                cell.Attributes.Add("data-options", "field:'item" + i.ToString() + "'");
                i++;
            }
            //使用<TH>替換<TD> 
            gv.UseAccessibleHeader = true;
            //HeaderRow將被<thead>包裹，數據行將被<tbody>包裹
            gv.HeaderRow.TableSection = TableRowSection.TableHeader;
            //FooterRow將被<tfoot>包裹
            //gv.FooterRow.TableSection = TableRowSection.TableFooter;

            if (gv.AllowPaging)
            {
                gv.BottomPagerRow.Visible = false;
                gv.Page.ClientScript.RegisterStartupScript(gv.Page.GetType(), "_dg_" + gv.ID, @"<script type=""text/javascript"">
$(function () {
    var dg = $(""[dg-name='" + gv.ID + @"']"");
    var pager = dg.datagrid().datagrid('getPager');
    var dgtotal = dg.attr('total');
    if (typeof (dgtotal) == 'undefined')
        alert('未設置GridView的total屬性，請在SqlDataSource的Selected事件中或其他方式設置！');
    var currentUrl = parseURL(location.href);
    pager.pagination({
        showRefresh: false,
        total: dgtotal,
        pageNumber: currentUrl.params['" + gv.ID + @"_pn'],
        pageSize: currentUrl.params['" + gv.ID + @"_ps'],
        onSelectPage: function (pageNumber, pageSize) {
            $(""[dg-name='" + gv.ID + @"']"").datagrid().datagrid('getPager').pagination('loading');
            currentUrl.params['" + gv.ID + @"_pn'] = pageNumber;
            currentUrl.params['" + gv.ID + @"_ps'] = pageSize;
            var params = [];
            for (var key in currentUrl.params)
                params.push(key + '=' + currentUrl.params[key]);
            location = currentUrl.path + '?' + params.join('&');
            return false;
        }
    });
})
</script>");
            }
        }
    }
    public static void datagridSkinUpdate(GridViewUpdateEventArgs e)
    {
        // 清除莫名其妙多出的來的OldValue
        for (int i = 0; i < e.NewValues.Count; i++)
        {
            string oldValue = (string)e.OldValues[i];
            string newValue = (string)e.NewValues[i];
            if (oldValue == null || oldValue == "")
                e.NewValues[i] = newValue.Substring(0, newValue.Length - 1);
            else if (oldValue.Length < newValue.Length)
            {
                int iLength = newValue.Length - oldValue.Length;
                if (newValue.LastIndexOf(oldValue) == iLength)
                    e.NewValues[i] = newValue.Substring(0, iLength - 1);
            }
        }
    }

}

有興趣的朋友可以到這里下載源碼：

http://pan.baidu.com/s/1mg7epCG

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ASP.Net GridView 基礎 Template模板 ASP.Net GridView 基礎綁定字段 asp.net GridView 用法詳解 ASP.NET動態生成GridView的使用【asp.net】將GridView數據導出Excel asp.net gridview 實現編輯 asp.net 中Gridview 使用總結 Asp.net動態添加GridView列 ASP.NET GridView綁定數據《ASP.NET》數據綁定——GridView