jqgrid的导入和导出:jqGridImport & jqGridExport

最新推荐文章于 2022-01-28 11:18:37 发布

zgjsczwj

最新推荐文章于 2022-01-28 11:18:37 发布

阅读量8.8k

点赞数

分类专栏： jqGrid 文章标签： import json razor asp.net mvc xml

jqGrid 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天看到一个很好的ASP.NET MVC Razor使用jqGrid的示例，本文正是学习此示例中的一个功能。有关jqGridImport的文档，请参考这里

jqGrid还有一个很有用的功能，可以导入和导出jqGrid的配置，这就意味着：使用c#的匿名类加上JsonResult(ASP.NET MVC)用C#的代码生成jqGrid，而不再使用js代码，很多人都怕写js，宁愿写两行C#都不愿意写一行js，这个功能对于不愿意写js的兄弟来说真是一个福音啊，天也不早了，直接上内容吧。

Razor下View是这样写的

 
          @{ 
         
 
               
          Layout = null; 
         
 
          } 
         
 
          <!DOCTYPE html> 
         
 
          < 
          html 
          > 
         
 
          < 
          head 
          > 
         
 
               
          < 
          title 
          >jqGridImport</ 
          title 
          > 
         
 
               
          < 
          link 
          href 
          = 
          "@Url.Content(" 
          ~/Content/themes/base/site.css")"  
          rel 
          = 
          "Stylesheet" 
          type 
          = 
          "text/css" 
          /> 
         
 
               
          < 
          link 
          href 
          = 
          "@Url.Content(" 
          ~/Content/themes/base/jquery.ui.css")"  
          rel 
          = 
          "Stylesheet" 
          type 
          = 
          "text/css" 
          /> 
         
 
               
          < 
          link 
          href 
          = 
          "@Url.Content(" 
          ~/Content/themes/base/jquery.jqgrid.css")"  
          rel 
          = 
          "Stylesheet" 
          type 
          = 
          "text/css" 
          /> 
         
 
               
          < 
          script 
          src 
          = 
          "@Url.Content(" 
          ~/Scripts/jquery.js")"  
          type 
          = 
          "text/javascript" 
          ></ 
          script 
          > 
         
 
               
          < 
          script 
          src 
          = 
          "@Url.Content(" 
          ~/Scripts/jquery.ui.js")"  
          type 
          = 
          "text/javascript" 
          ></ 
          script 
          > 
         
 
               
          < 
          script 
          src 
          = 
          "@Url.Content(" 
          ~/Scripts/i18n/grid.locale-cn.js")"  
          type 
          = 
          "text/javascript" 
          ></ 
          script 
          > 
         
 
               
          < 
          script 
          src 
          = 
          "@Url.Content(" 
          ~/Scripts/jquery.jqgrid.js")"  
          type 
          = 
          "text/javascript" 
          ></ 
          script 
          > 
         
 
               
          < 
          script 
          type 
          = 
          "text/javascript" 
          > 
         
 
                   
          $(function () { 
         
 
                       
          $('#grid').jqGridImport({ 
         
 
                           
          imptype: 'json', 
         
 
                           
          impurl: '@Url.Action("Import", "Home")', 
         
 
                           
          mtype: 'GET', 
         
 
                           
          jsonGrid: { 
         
 
                               
          config: 'configs' 
         
 
                           
          } 
         
 
                       
          }); 
         
 
                   
          }); 
         
 
               
          </ 
          script 
          > 
         
 
          </ 
          head 
          > 
         
 
          < 
          body 
          style 
          = 
          "padding: 10px;" 
          > 
         
 
               
          < 
          div 
          > 
         
 
                   
          < 
          table 
           id 
          = 
          "grid" 
          > 
         
 
                   
          </ 
          table 
          > 
         
 
                   
          < 
          div 
           id 
          = 
          "pager" 
          > 
         
 
                   
          </ 
          div 
          > 
         
 
               
          </ 
          div 
          > 
         
 
          </ 
          body 
          > 
         
 
          </ 
          html 
          > 
         

这里我对代码中用到的几个选项做个说明，没有用到的请参考这里的文档

imptype:jqGrid导入"模板"(请允许我给它起了这么一个不伦不类的名称，下同)是json格式的，当然，还可以是xml格式的，但是我想一般也没有人用xml，就没有深究。

impurl:jqGrid导入"模板"是从该url获取的。

mtype:这个简单，是获取导入"模板"的http方法。

jsonGrid：从哪里获取json格式的导入"模板"配置选项，这里稍作解释，从impurl中获取的是一个对象,jsonGrid中的config指的是获取到的这个对象的哪个属性是配置选项，过会看了后台代码就比较好理解了。

OK，现在来看后台代码是啥样的吧：

 
          public 
           ActionResult Import() 
         
          { 
         
          var configs =  
          new 
         
          { 
         
          url =  
          "/User/Index" 
          , 
         
          datatype =  
          "json" 
          , 
         
          mtype =  
          "GET" 
          , 
         
          colNames =  
          new 
          [] {  
          "主键" 
          ,  
          "姓名" 
          ,  
          "邮箱" 
          }, 
         
          colModel =  
          new 
          [] {  
         
          new 
          { name =  
          "ID" 
          , index =  
          "ID" 
          , width = 200, hidden= 
          true 
          , align =  
          "left" 
          }, 
         
          new 
          { name =  
          "Name" 
          , index =  
          "Name" 
          , width = 200,hidden= 
          false 
          , align =  
          "left" 
          }, 
         
          new 
          { name =  
          "Mail" 
          , index =  
          "Mail" 
          , width = 200,hidden= 
          false 
          , align =  
          "left" 
          }  
         
          }, 
         
          sortname =  
          "Name" 
          , 
         
          sortorder =  
          "asc" 
          , 
         
          rowNum = 10, 
         
          rowList =  
          new 
          [] { 10, 15, 20 }, 
         
          pager =  
          "#pager" 
          , 
         
          viewrecords =  
          true 
          , 
         
          height =  
          "auto" 
          , 
         
          width =  
          "auto" 
         
          }; 
         
          return 
          Json( 
          new 
           { configs = configs }, JsonRequestBehavior.AllowGet); 
         
          }

以上这个Action就是提供导入"模板"配置选项的服务，假设你的View名称为ImportDemo.cshtml的话，那么整个请求用到的代码还应该包括一个MVC打开视图的Action:

 
          public 
           ActionResult ImportDemo() 
         
          { 
         
          return 
          View(); 
         
          }

最终，只要你开启ImportDemo视图，就会自动到Import服务中获取"模板"

源代码下载

附官方文档，很是对不起，昨晚我说官方没有文档，今天早上来就发现了

Importing

This method reads the grid configuration according to the rules in options and constructs the grid. When constructing the grid for first time it is possible to pass data to it again with the configuration. This is done with jqGirdImport

   jQuery("#grid_id").jqGridImport(options);

Where

grid_id is the id of the table element where the grid should be constructed
options is array of pair name:value to set different configuration listed bellow

Option	Type	Description	Default
imptype	string	Determines the type of import Can be one of the following values xml, json, xmlstring, jsonstring	xml
impstring	string	in case of xmlstring or jsonstring this should be set
impurl	string	valid url to the configuration when xml or json. The data is obtained via ajax request
mtype	string	Determines the type of request. Can be GET or POST	GET
impData	object	additional data that can be passed to the url in pair name:value	empty object {}
xmlGrid	object	describes from where to read the xml configuration and from where the data if any. The option config describes the configuration tag. The option data describes the data tag	config : “roots>grid”, data: “roots>rows”
jsonGrid	object	describes from where to read the json configuration and from where the data if any. The option config describes the configuration tag. The option data describes the data tag	config : “grid”, data: “data”
ajaxOptions	object	Additional options which can be passed to the ajax request	empty object {}

Events

There is only one event which can be called in jqGridImport.

Event	Description
importComplete	This event is called after the successfully import and when the grid is constructed. To this event we pas the request from server. Use this event to set additional parameters in the grid or to construct the navigator

分类: jQuery

zgjsczwj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jqgrid的导入和导出:jqGridImport & jqGridExport

今天看到一个很好的ASP.NET MVC Razor使用jqGrid的示例，本文正是学习此示例中的一个功能。有关jqGridImport的文档，请参考这里jqGrid还有一个很有用的功能，可以导入和导出jqGrid的配置，这就意味着：使用c#的匿名类加上JsonResult(ASP.NET MVC)用C#的代码生成jqGrid，而不再使用js代码，很多人都怕写js，宁愿写两行C#都不愿意写一行
复制链接

扫一扫

专栏目录