65.9K
CodeProject 正在变化。 阅读更多。
Home

用于 asp.net 和 asp.net mvc 的 jquery javascript ajax grid

Vishal_007
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.70/5 (19投票s)

2014年8月19日

CPOL

3分钟阅读

viewsIcon

35571

downloadIcon

19

使用 javascript 和 asp.net 实现轻松、免费、快速的 ajax 网格

引言

我知道我们开发人员在开发时遇到的问题，尤其是在显示记录列表时，客户需要排序、搜索、过滤等等。为了解决这个问题，我创建了自己的基于 javascript 的 ajax 网格，可以轻松集成到 asp.net 和 asp.net MVC 应用程序中。

有哪些优势？

  1. 易于集成
  2. 非常快（使用 100 万条记录测试）。
  3. 没有外部 DLL。
  4. 纯 Javascript。
  5. 搜索选项
  6. 排序
  7. Ajax 分页

为了实现这一点，我将向您展示逐步的代码及其执行过程，并附带一些图像和详细信息。

背景

我们需要什么？

我使用纯 javascript 和 jquery ajax 函数创建了这个脚本，所以您必须获取 jquery 版本 1.4 或更高版本的引用。我将附上 CSS 和其他图像文件，所以您无需担心。现在我将向您展示我们将如何实现代码。

使用代码

第一步：为了实现这一点，请执行下面提到的必要步骤。创建数据库 Grid。创建表公司以及列表的存储过程。请执行下面提到的脚本。

////Execute below script//////////

create database Grid

create table company
(
companyid int identity(1,1) primary key,
companyname nvarchar(50),
companyemail nvarchar(100),
companywebsite nvarchar(250)

)

Create Listing Procedure:

USE [Grid]
GO

/****** Object:  StoredProcedure [dbo].[select_company_listing]    Script Date: 17-08-2014 12:55:57 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE procedure [dbo].[select_company_listing]
(

@companyname nvarchar(50),
@companyemail nvarchar(100),
@companywebsite nvarchar(250),
@FromPage int=0,
@ToPage int=0,
@intTotal int output

)
as
declare @strsql nvarchar(4000)
declare @strCountsql nvarchar(1000)
declare @xx int
set @xx = 0
begin
set @strsql = ‘With CompanyEntities As (
Select ROW_NUMBER() Over (Order By companyname) As Row,companyid,companyname,companyemail,companywebsite
FROM Company WHERE  1=1  ‘
if @companyname <> ”
begin
set @strsql= @strsql + ‘ and companyname like ”%’+ @companyname + ‘%” ‘
end
if @companyemail <> ”
begin
set @strsql= @strsql + ‘ and companyemail like ”%’+ @companyemail + ‘%” ‘
end
if @companywebsite <> ”
begin
set @strsql= @strsql + ‘ and companywebsite like ”%’+ @companywebsite + ‘%” ‘
end

set @strsql= @strsql + ‘ )’

set @strsql= @strsql + ‘Select companyid,companyname,companyemail,companywebsite  From CompanyEntities Where’
set @strsql= @strsql + ‘ Row Between ‘ +  convert(varchar,@FromPage) + ‘ AND ‘ + convert(varchar,@ToPage) + ‘ Order By Row Asc  ‘

CREATE TABLE #TempLocal (ct int);

set @strCountsql = ‘ INSERT INTO #TempLocal (ct) SELECT count(companyid) FROM Company WHERE  1=1 ‘
if @companyname <> ”
begin
set @strCountsql= @strCountsql + ‘ and companyname like ”%’+ @companyname + ‘%” ‘
end
if @companyemail <> ”
begin
set @strCountsql= @strCountsql + ‘ and companyemail like ”%’+ @companyemail + ‘%” ‘
end
if @companywebsite <> ”
begin
set @strCountsql= @strCountsql + ‘ and companywebsite like ”%’+ @companywebsite + ‘%” ‘
end

–print @strCountsql
exec(@strsql)
exec (@strCountsql)

SELECT  @intTotal=ct FROM #TempLocal;
DROP TABLE #TempLocal;

end

 

Insert Records:

\\\\\\\\\\\\\Insert Records\\\\\\\\\\\\\\\\\\\\
DECLARE @CT INT

SET @CT = 1

WHILE @CT <> 1000001
BEGIN

INSERT INTO company
(companyname
,companyemail
,companywebsite)
VALUES
(‘A’ + CONVERT(varchar,@CT)
,’A’ + CONVERT(varchar,@CT) + ‘@test.com’
,’A’ + CONVERT(varchar,@CT) + ‘website.com’)

SET @CT = @CT + 1
END

现在数据库已准备就绪，所以我们现在要创建一个网站。请按照以下步骤操作。

创建数据库后，您需要在 Visual Studio 中创建一个网站。

打开 Visual Studio –> 文件 — > 新建 –> 网站

选择语言 C#。

创建脚本文件夹并在其中添加 commongrid.js 文件。

请将以下代码复制到 commongrid.js 文件中。在此文件中，我们将创建 javascript 函数，该函数将接受 ajax 请求并生成动态 ajax 网格。这是一个很长的代码，所以先放着，稍后我会向您解释哪个函数会做什么。

这是一个三层架构的示例应用程序，我们将创建 BusinessLogic 文件夹、DataAccess 文件夹来处理业务逻辑和数据库相关的操作。

在继续之前，我们将创建一个名为 BusinessLogic 的文件夹。 在其中，我们将创建一个名为 BLCompany.cs 的文件，在其中我们将提到所有数据库列的属性，如下所示。

  private int _companyid;
    private string _companyname;
    private string _companyemail;
    private string _companywebsite;

public int ID
    {
        get
        {
            return _companyid;
        }
        set
        {
            _companyid = value;
        }
    }
    public string companyname
    {
        get
        {
            return _companyname;
        }
        set
        {
            _companyname = value.Replace("'", "''");
        }
    }

    public string companyemail
    {
        get
        {
            return _companyemail;
        }
        set
        {
            _companyemail = value.Replace("'", "''");
        }
    }
    public string companywebsite
    {
        get
        {
            return _companywebsite;
        }
        set
        {
            _companywebsite = value.Replace("'", "''");
        }
    }

然后，我们将创建 DataAccess 文件夹来调用存储过程并返回数据集。我这里没有描述大量的代码，只是给出了一个概述，因为一旦您找到示例应用程序，您就可以轻松地获得整个想法。我只会展示如何调用和生成 ajax 网格。

现在我们已经准备好了我们的业务逻辑和数据访问层。现在我们将创建一个中间页面，ajax 请求将在其中处理。为了实现这一点，创建一个名为 ajax 的文件夹。 在其中创建名为 GetCompanyList.aspx 的页面。 此页面将处理来自网格将填充的页面的请求。此页面将接受请求并将 html 返回给 ajax 调用。

我们将在该页面中执行的两个主要方法如下所示

// Dataset will receive the data by calling business logic function
// ds = objdoc.SelectCompanyList();
//
// Pager class where html paging will be populate.
// GetPagging(objdoc.Total, Convert.ToInt32(ConfigurationManager.AppSettings["ListingPageSize"]), strpath, pageno);
//

现在我们已经完成了这一步，并移动到我们的网格将填充的主页面。

创建 Grid.aspx 页面。 添加 jquery 1.4 或更高版本的引用。 示例中附带了 Css 和图像。 添加 commongrid.js 和 validate.js 文件作为引用。

在 HTML 中

<input id="gridcurrentPage" value="1" style="display: none;" />
This hidden page will help ajax to handle current page.
 <div id="dvgridpaging"></div> \\Ajax request will populate paging in this div.
 <div id="dvgrid" class="grid-overflow"></div> \\ Ajax request will populate html grid in this div.

请将以下 html 粘贴到您的 grid.aspx 页面。

<div id="disablingDiv"></div>
    <div id="divloading" style="position: absolute; display: none;">
        <img src='css/images/loading.gif' alt='loading' />
    </div>

 <div class="g12">
        <h1>Company List</h1>       
        <input id="gridcurrentPage" value="1" style="display: none;" />
        <div id="dvgridpaging"></div>
        <div id="dvgrid" class="grid-overflow"></div>
    </div>
    <script type="text/javascript" src="scripts/validate.js" language="javascript"></script>    
    <script type="text/javascript" src="scripts/commongrid.js" language="javascript"></script>        
    <script type="text/javascript" language="javascript">
        var g_columns = ['Name', 'Email', 'Website'];
        var g_columns_sorting = ['1', '1', '1', '1', '1', '1', '1', '1'];
        var g_columns_width = ['30%', '35%', '35%'];
        var g_columns_search = ['1', '1', '1'];
        var pagesize = '<%=ConfigurationManager.AppSettings["ListingPageSize"]%>';
        var requestURL = "Ajax/GetCompanyList.aspx?grid=1&";
        var db_schema_name = ['companyname', 'companyemail', 'companywebsite'];
        var p = readCookie('currentpage')
        if (p) {
            if (p != "") {
                document.getElementById("gridcurrentPage").value = p;
            }
        }

        var x = readCookie('where')
        if (x) {
            if (x != "") {
                CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', x);
            }
            else {
                CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', '');
            }
        }
        else {
            CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', '');
        }
        eraseCookie("column");
        eraseCookie("order");
        eraseCookie("details");
  
    </script>

完成....容易吧？... 是的，现在一旦页面加载，它将调用 CreateDynamicGrid 函数，该函数位于 commongrid.js 文件中。就这些了，commongrid.js 文件将调用 GetCompanyList.aspx 文件，该文件位于 ajax 文件夹中，它将返回网格，该网格将填充在 <div id="dvgrid" class="grid-overflow"></div> 标签中。

关注点

我为什么写这个？当我的客户希望在每一列和网格顶部都有搜索功能时。我在谷歌上搜索过，但没有找到，所以产生了创建简单网格的想法，并创建了它，分享就是关怀，所以为什么我不能帮助别人....所以分享了....快乐编码....

© . All rights reserved.