jqGrid

先看一下官方的簡單介紹:

主要特性:

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;

    } 
}