找回密码
 立即注册

QQ登录

只需一步,快速开始

ronger

论坛元老

5

主题

31

帖子

8637

积分

论坛元老

积分
8637

活字格认证

ronger
论坛元老   /  发表于:2014-8-31 12:34  /   查看:6257  /  回复:5
关于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: &quotroductID", headerText: &quotroductID", dataType: "number", dataFormatString: "d" },
                        { dataKey: &quotroductName", headerText: &quotroductName" },
                        { 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中呢?

5 个回复

正序浏览
Alice
社区贡献组   /  发表于:2014-9-2 09:14:00
6#
模拟了一下博客中的内容: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
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
ronger
论坛元老   /  发表于:2014-9-1 20:06:00
5#
已经实现,非常感谢!
回复 使用道具 举报
ronger
论坛元老   /  发表于:2014-9-1 20:06:00
地板
模拟了一下博客中的内容: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.效果图:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1金币 +300 收起 理由
Alice + 300 反馈解决方案。

查看全部评分

回复 使用道具 举报
Alice
社区贡献组   /  发表于:2014-9-1 18:11:00
板凳
回复 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
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
Alice
社区贡献组   /  发表于:2014-9-1 14:08:00
沙发
回复 1楼ronger的帖子

这个问题已经收到,需要调查下。
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部