C1Grid通过Jsonp方式填入数据

收藏

关于WijGrid的远程数据问题:
      从下载的例子中和http://wijmo.com/demo/explore/上我了解到了，
wijGrid从一个网址取数据有两种格式：
      1.http://wijmo.com/demo/explore/?w ... e%20custom%20paging中的OData方式，
               data: new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Products", {
                     ajax: { dataType: "jsonp" },
                     pageSize: 10
                  }),
                  columnsAutogenerationMode: "none",
                  columns: [
                     { dataKey: &quot

roductID", headerText: &quot

roductID", dataType: "number", dataFormatString: "d" },
{ dataKey: &quot

roductName", headerText: &quot

roductName" },
                     { dataKey: "UnitPrice",  headerText: "UnitPrice", dataType: "currency" },
                     { dataKey: "UnitsInStock", headerText: "UnitsInStock", dataType: "number", dataFormatString: "d" },
                     { dataKey: "Discontinued", headerText: "Discontinued", dataType: "boolean" }
                  ]
            });
         直接键入网址http://services.odata.org/V2/Northwind/Northwind.svc/Products后了解到了，OData是一种
序列化对象的XML格式。后来本人下载了AspNet.WebApi.OData包，但是由于缺少wijmo.data.ajax.js文件，只好作罢！
      2.下载到本地的Wijmo示例中的Grid/DataSources.cshtml中有：
         data: new wijdatasource({
                  proxy: new wijhttpproxy({
                     url: "http://ws.geonames.org/searchJSON",
                     dataType: "jsonp",
                     data: {
                        username: "demo",
                        featureClass: &quot

",
                        style: "full",
                        maxRows: 5,
                        name_startsWith: "ab"
                     },
                     key: "geonames"
                  }),
                  reader: new wijarrayreader([
                  { name: "label", mapping: function (item) { return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName } },
                  { name: "name", mapping: "name" },
                  { name: "countryCode", mapping: "countryCode" },
                  { name: "continentCode", mapping: "continentCode" }
               ])
            })
            通过键入网址http://www.geonames.org/searchJSON?username=demo了解到了WijGrid需要的Json格式。
3.之后，我开始仿照第二种格式，首先在页面js中加入：
data: new wijdatasource({
                  proxy: new wijhttpproxy({
                     url: "@mypath",
                     dataType: "jsonp",
                     data: {
                     },
                     key: "addresses"
                  }),
                  reader: new wijarrayreader([
                  { name: "name", mapping: "name" },
                  { name: "address", mapping: "address" }
               ])
            })
从网址@path中我可以取到数据：{"totalResultsCount":3,"addresses":[{"Id":16,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州城关","phone":"1234567","phone2":null,"status":false},{"Id":17,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州西固","phone":"1234567","phone2":null,"status":false},{"Id":18,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州安宁","phone":"1234567","phone2":null,"status":false}]}
   但是我的页面Grid中没有显示。
   我的问题是：如何通过Jsonp的方式将数据加入到C1Grid中呢？

Alice · Alice

回复 1楼ronger的帖子

这个问题已经收到，需要调查下。

Alice · Alice

回复 1楼ronger的帖子

我们博客和论坛都有相关的例子和文章，描述用法。论坛上的是介绍这个grid表格，博客上表述服务器端的控件使用。
论坛：http://gcdn.gcpowertools.com.cn/showtopic.aspx?topicid=4317
博客：http://blog.gcpowertools.com.cn/post/2012/11/15/Wijmo-更优美的jQuery-UI部件集：服务器端Grid魔法.aspx

ronger · ronger

模拟了一下博客中的内容：http://blog.gcpowertools.com.cn/post/2012/11/15/Wijmo-更优美的jQuery-UI部件集：服务器端Grid魔法.aspx。
1. public class WijmoGridResult
{
      public List<Address> Items { get; set; }
      public int TotalRowCount { get; set; }
}
2. 在Controller中新建方法：public JsonResult Test2()
      {
         List<Address> Items2 = unitOfWork.AddressRepository.Get().ToList();
         var result = new WijmoGridResult
         {
            Items = Items2,
            TotalRowCount = Items2.Count()
         };
         return Json(result, JsonRequestBehavior.AllowGet);
      }
3.通过网址  ..../Test2可以取到数据：
{"Items":[{"Id":1,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州城关","phone":"1234567","phone2":null,"status":false},{"Id":2,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州西固","phone":"1234567","phone2":null,"status":false},{"Id":3,"Ip":"::1","UserId":0,"UserName":null,"name":null,"address":"兰州安宁","phone":"1234567","phone2":null,"status":false}],"TotalRowCount":3}
4.在cshtml网页上有：
<script type="text/javascript">
      $(document).ready(function () {
         var dataReader = new wijarrayreader([
         { name: "address", mapping: "address" },
         { name: "phone", mapping: "phone" }
         ]);
         var dataSource = new wijdatasource({
            proxy: new wijhttpproxy({
                  url: "@Url.Action("Test2")",
                  dataType: "json"
         }),
            dynamic: true,
         reader: {
            read: function (datasource) {
                  var count = datasource.data.TotalRowCount;
                  datasource.data = datasource.data.Items;
                  datasource.data.totalRows = count;
                  dataReader.read(datasource);
            }
         }
      });
      $("#remoteTable").wijgrid({
         pageSize: 2,
         data: dataSource,
         allowPaging: true,
         allowSorting: true
      });
      });
</script>
<table id="remoteTable"></table>
5.效果图：

ronger · ronger

已经实现，非常感谢!

Alice · Alice

模拟了一下博客中的内容：http://blog.gcpowertools.com.cn/post/2012/11/15/Wijmo-更优美的jQuery-UI部件集：服务器端Grid魔法.aspx。
1. public class WijmoGridResult
{
public List<Address> Items { get;
ronger 发表于 2014-9-1 20:06:00

非常细致的反馈步骤，奖励300金币。具体参考：http://gcdn.gcpowertools.com.cn/ ... ;postid=62979#62979

		自动登录	找回密码
密码			立即注册

C1Grid通过Jsonp方式填入数据

5 个回复

本帖子中包含更多资源

评分

活字格认证

微信认证勋章

元老葡萄