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

主要特性:

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 >