jqGrid for ASP.NET

先看一下官方的简单介绍:

主要特性:

1.速度快:以JSON格式 从 服务器端传回所需要的数据.

2.100万条数据,操作分页,过滤,查询 不用谢一行代码,而且速度非常快.

3.几乎不使用viewstate.

4.在客户端 渲染.

5.支持层级关系,排序,过滤,分页

6.主题更换,

7.内置了多国语言包.

 

下载地址:http://www.trirand.net/download.aspx

 

1.首先介绍一下 它的外观.

外观引用的是 jquery UI,有25种  现成的外观可供选择.

 

所有这些外观的改变,只需改变 引用的 jquery ui的地址(只改红圈内的文字)

那么 红圈内文字的可选项都有什么呢? 下面的图片就将展示这些:

如果这些都不能满足我们的需要,还可以自己去定制 我们自己的外观,定制地址 :http://jqueryui.com/themeroller/

进入这个地址,左上边的 既是 我们定制 自己页面的 面板.里面有各种选项,供我们选择.

定制完毕后 点击  Download theme ,下面进入下载页面 .这里的 下拉框里有很多 UI,选择 custom theme既是我们刚才定制的主题.

点击下载, 解压缩后  根据这个目录 找到这个文件,复制到项目中,并添加引用.下面展现的就是

我们所定制的主题外观了,

 

 

2.介绍一下 grid展示的数据源都有哪些:

1.最简单的就是 asp.net提供的数据源控件.完全可视化操作,无需一句代码.

  这样就可以完成 数据的展示.

而这个 JQgrid就是一个 重写的 gird控件,那么我们就可以 将他添加到 工具箱中来 .(首先要下载Dll文件.)

添加后是这样的:.里面有 图表, 日期控件,grid还有 tree;

2.xml数据源

xml文件:

后台代码:

前台html:

head之间的引用:

引用的解释: 1.jquery文件,

                      2.jqgrid提供的语言包

                      3.jqgrid提供的 基础包

                      4.jqgrid提供的基础样式包

                       5.jqgrid提供的自动完成 js包

                      6.引用的jquery ui包

3.既然支持后台 dataset附加 数据源,那么 .net的各种方法都能使用了,因为他就是重写 grid的一个控件,

那么还可以使用linqtosql来给他附加数据源.

 

3.下面介绍一些gird的其他能力.(增删改查)

那么就需要看一下他具有的事件了:

本身具备的很多事件,供开发者调用.

下面看一个添加行的实例:

点击左下角的加号,弹出 右边的添加框.那么这个框 可以由自己来定制:入下面图片

下面,当点击  Add new Row时候就会触发 RowAdding 事件:

那么后台是如何获取 前台添加的数据的呢:下面看(xml作为数据源)

protected void Jqgrid1_RowAdding(object sender, Trirand.Web.UI.WebControls.JQGridRowAddEventArgs e)
  {
      XmlElement x;
      XmlDocument xd = new XmlDocument();
      xd.Load(Server.MapPath("XMLFile.xml"));
      XmlNode root = xd.SelectSingleNode("Employee"); //获取xml根节点

      XmlNode node = xd.CreateElement("em");

      x = xd.CreateElement("id");
      x.InnerText = e.RowData["id"]; //获取 添加行的id列
      node.AppendChild(x);

      x = xd.CreateElement("name");
      x.InnerText = e.RowData["name"];
      node.AppendChild(x);

      x = xd.CreateElement("phone");
      x.InnerText = e.RowData["phone"];
      node.AppendChild(x);

      root.AppendChild(node);

      xd.Save(Server.MapPath("XMLFile.xml"));
      DataSet ds = new DataSet();
      ds.ReadXml(Server.MapPath("XMLFile.xml"));
      Jqgrid1.DataSource = ds;
      Jqgrid1.DataBind();

  }

xml文件的变化:

行编辑:

还可以自定义 编辑页面的控件.

下面看一个例子:

代码:

只需配置 EditType 和 EditorControlID即可 :那么 EditType有 几种类型:至于EditorControlID就是

我们自己定义的控件了:.

就是这么简单.

 

下面看一下查询功能:

有两种查询方式,第一种是 直接在 列上面查询,还有一种就是弹出框查询.

 

下面看一下如何配置: 只需配置一句.下面还要在 列 上配置一些东西.

主要是Searchable设置为true   还有就是 配置 查询操作: 有很多种.

到底为之,查询功能就完事了.

 

下面配置 弹出框式的查询:只需配置这一句,就OK了.

 

下面看一下排序功能:

 

下面 还有 支持一些文件类型的导出(PDF,Excel)

后台代码:调用这个代码,穿进去一个datatable即可,(必须引用iTextSharp.dll)

生成PDF

private void ExportToPDF(DataTable dt)
    {
        Document pdfDoc = new Document();
        MemoryStream pdfStream = new MemoryStream();
        PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, pdfStream);
        pdfDoc.Open();//Open Document to write        
        pdfDoc.NewPage();
        Font font8 = FontFactory.GetFont("ARIAL", 7);
        PdfPTable PdfTable = new PdfPTable(dt.Columns.Count);
        PdfPCell PdfPCell = null;
        //Add Header of the pdf table        
        for (int column = 0; column < dt.Columns.Count; column++)
        {
            PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Columns[column].Caption, font8)));
            PdfTable.AddCell(PdfPCell);
        }            //How add the data from datatable to pdf table     
        for (int rows = 0; rows < dt.Rows.Count; rows++)
        {

            for (int column = 0; column < dt.Columns.Count; column++)
            {
                PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Rows[rows][column].ToString(), font8)));
                PdfTable.AddCell(PdfPCell);
            }
        }
        PdfTable.SpacingBefore = 15f; // Give some space after the text or it may overlap the table      
        pdfDoc.Add(PdfTable); // add pdf table to the document      
        pdfDoc.Close();
        pdfWriter.Close();
        Response.ClearContent();
        Response.ClearHeaders();
        Response.ContentType = "application/pdf";
        Response.AppendHeader("Content-Disposition", "attachment; filename=gridexport.pdf");
        Response.BinaryWrite(pdfStream.ToArray());
        Response.End();
    }

 

生成Excel

   Jqgrid1.ExportToExcel("s.xls");

表格高级应用:

 

综合代码:

 

前台:

<form id="form1" runat="server">
   <cc1:JQGrid ID="Jqgrid1" Width="800" Height="300" runat="server" OnRowAdding="Jqgrid1_RowAdding"
       OnRowEditing="Jqgrid1_RowEditing">
       <ToolBarSettings ShowAddButton="true" ShowEditButton="true" ShowDeleteButton="true"
           ShowSearchToolBar="true" ShowSearchButton="true" />
       <Columns>
           <cc1:JQGridColumn DataField="id" Editable="true" Searchable="true" SearchToolBarOperation="BeginsWith">
           </cc1:JQGridColumn>
           <cc1:JQGridColumn DataField="phone" Editable="true">
           </cc1:JQGridColumn>
           <cc1:JQGridColumn DataField="name" Editable="true" EditType="DropDown" EditorControlID="DropDownList1">
           </cc1:JQGridColumn>
       </Columns>
       <HierarchySettings HierarchyMode="Parent" />
       <ClientSideEvents SubGridRowExpanded="showSubGrid" />
       <AddDialogSettings CancelText="Cancel Add" Caption="Add a new row" ClearAfterAdding="true"
           CloseAfterAdding="true" Draggable="true" Height="800" Width="800" TopOffset="20"
           LeftOffset="40" LoadingMessageText="Adding a new row" Modal="true" ReloadAfterSubmit="true"
           Resizable="false" SubmitText="Add new Row" />
       <EditDialogSettings CancelText="Cancel Editing" Caption="Edit Dialog" CloseAfterEditing="true"
           Draggable="true" Height="400" Width="400" TopOffset="50" LeftOffset="20" LoadingMessageText="Currently Editing Data"
           Modal="true" ReloadAfterSubmit="true" Resizable="true" SubmitText="修改" />
       <DeleteDialogSettings CancelText="Cancel delete" Draggable="true" Height="400" Width="400"
           TopOffset="100" LeftOffset="100" LoadingMessageText="Deleting" Modal="false"
           ReloadAfterSubmit="true" Resizable="true" SubmitText="Do delete" />
       <SearchDialogSettings Height="500" Width="500" Draggable="true" FindButtonText="Find"
           ResetButtonText="Reset" LeftOffset="100" TopOffset="100" Modal="true" MultipleSearch="true" />
       <SearchDialogSettings MultipleSearch="true" />
       <SortSettings SortAction="ClickOnHeader" SortIconsPosition="Vertical" InitialSortColumn="id"
           InitialSortDirection="Asc" />
   </cc1:JQGrid>
   <script type="text/javascript">
       function showSubGrid(subgrid_id, row_id) {
           showSubGrid_Jqgrid2(subgrid_id, row_id);   //调用 jqGird2 的OnDataRequesting事件

       }   
   </script>
   <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
       DataTextField="ModuleName" DataValueField="ModuleName">
   </asp:DropDownList>
   <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MLXConnectionString %>"
       SelectCommand="SELECT [ModuleName] FROM [Modules]"></asp:SqlDataSource>
   <asp:Button ID="Button1" runat="server" Text="导出PDF" OnClick="Button1_Click" />
   <asp:Button ID="Button2" runat="server" Text="导出Excel" OnClick="Button2_Click" />
   <cc1:JQGrid ID="Jqgrid2" Width="800" Height="300" runat="server" OnDataRequesting="Jqgrid2_DataRequesting">
       <Columns>
           <cc1:JQGridColumn DataField="title" Editable="true" Searchable="true" SearchToolBarOperation="BeginsWith">
           </cc1:JQGridColumn>
           <cc1:JQGridColumn DataField="end" Editable="true">
           </cc1:JQGridColumn>
        
       </Columns>
       <ToolBarSettings ShowAddButton="true" ShowEditButton="true" ShowDeleteButton="true"
           ShowSearchToolBar="true" ShowSearchButton="true" />
       <HierarchySettings HierarchyMode="Child" />
   </cc1:JQGrid>
   </form>

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data;
using System.Xml;
using Trirand;
using iTextSharp.text;
using System.IO;
using iTextSharp.text.pdf;

 

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataSet dt = new DataSet();
        dt.ReadXml(Server.MapPath("XMLFile.xml"));

        Jqgrid1.DataSource = dt;
        Jqgrid1.DataBind();

 

 

 

    }
    protected void Jqgrid1_RowAdding(object sender, Trirand.Web.UI.WebControls.JQGridRowAddEventArgs e)
    {
        XmlElement x;
        XmlDocument xd = new XmlDocument();
        xd.Load(Server.MapPath("XMLFile.xml"));
        XmlNode root = xd.SelectSingleNode("Employee");

        XmlNode node = xd.CreateElement("em");

        x = xd.CreateElement("id");
        x.InnerText = e.RowData["id"];
        node.AppendChild(x);

        x = xd.CreateElement("name");
        x.InnerText = e.RowData["name"];
        node.AppendChild(x);

        x = xd.CreateElement("phone");
        x.InnerText = e.RowData["phone"];
        node.AppendChild(x);

        root.AppendChild(node);

        xd.Save(Server.MapPath("XMLFile.xml"));
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("XMLFile.xml"));
        Jqgrid1.DataSource = ds;
        Jqgrid1.DataBind();

    }
    protected void Jqgrid1_RowEditing(object sender, Trirand.Web.UI.WebControls.JQGridRowEditEventArgs e)
    {

        XmlDocument xd = new XmlDocument();
        xd.Load(Server.MapPath("XMLFile.xml"));
        XmlNode root = xd.SelectSingleNode("Employee");
        int rowIndex = int.Parse(e.RowKey);
        root.ChildNodes[rowIndex - 1].ChildNodes[0].InnerText = e.RowData["id"];
        root.ChildNodes[rowIndex - 1].ChildNodes[1].InnerText = e.RowData["name"];
        root.ChildNodes[rowIndex - 1].ChildNodes[2].InnerText = e.RowData["phone"];

        xd.Save(Server.MapPath("XMLFile.xml"));
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("XMLFile.xml"));
        Jqgrid1.DataSource = ds;
        Jqgrid1.DataBind();

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("XMLFile.xml"));
        ExportToPDF(ds.Tables[0]);

    }
    private void ExportToPDF(DataTable dt)
    {
        Document pdfDoc = new Document();
        MemoryStream pdfStream = new MemoryStream();
        PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, pdfStream);
        pdfDoc.Open();//Open Document to write        
        pdfDoc.NewPage();
        Font font8 = FontFactory.GetFont("ARIAL", 7);
        PdfPTable PdfTable = new PdfPTable(dt.Columns.Count);
        PdfPCell PdfPCell = null;
        //Add Header of the pdf table        
        for (int column = 0; column < dt.Columns.Count; column++)
        {
            PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Columns[column].Caption, font8)));
            PdfTable.AddCell(PdfPCell);
        }            //How add the data from datatable to pdf table     
        for (int rows = 0; rows < dt.Rows.Count; rows++)
        {

            for (int column = 0; column < dt.Columns.Count; column++)
            {
                PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Rows[rows][column].ToString(), font8)));
                PdfTable.AddCell(PdfPCell);
            }
        }
        PdfTable.SpacingBefore = 15f; // Give some space after the text or it may overlap the table      
        pdfDoc.Add(PdfTable); // add pdf table to the document      
        pdfDoc.Close();
        pdfWriter.Close();
        Response.ClearContent();
        Response.ClearHeaders();
        Response.ContentType = "application/pdf";
        Response.AppendHeader("Content-Disposition", "attachment; filename=gridexport.pdf");
        Response.BinaryWrite(pdfStream.ToArray());
        Response.End();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Jqgrid1.ExportToExcel("s.xml");

    }
    protected void Jqgrid2_DataRequesting(object sender, Trirand.Web.UI.WebControls.JQGridDataRequestEventArgs e)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("son.xml"));

        Jqgrid2.DataSource = ds;
        Jqgrid2.DataBind();
     //   string pid = e.ParentRowKey;

    }
}