ASP.NET+Extjs2.0读取Json数据显示在GridPanel面板上面

最新推荐文章于 2015-03-11 15:15:29 发布

LMAOhuaNL

最新推荐文章于 2015-03-11 15:15:29 发布

阅读量3.1k

点赞数

分类专栏： asp.Net Ext Js java 文章标签： json extjs asp.net header stylesheet function

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6798792

版权

asp.Net 同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

Ext Js

20 篇文章 0 订阅

订阅专栏

java

11 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReaderJson.aspx.cs" Inherits="ReaderJson" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--Ext2.0官方下载css文件-->
    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <!--Ext2.0官方下载ext-base.js文件-->
    <script src="ExtJs/ext-base.js" type="text/javascript"></script>
    <!--Ext2.0官方下载ext-all.js文件-->
    <script src="ExtJs/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        //IE9必须加上此段代码
        if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {
            Range.prototype.createContextualFragment = function (html) {
                var frag = document.createDocumentFragment(),
                div = document.createElement("div");
                frag.appendChild(div);
                div.outerHTML = html;
                return frag;
            };
        }
        //加载事件
        Ext.onReady(function () {
            var store = new Ext.data.JsonStore({
                url: 'users.json', //后缀名为json的文件
                root: 'users',     //读取里面的users对象
                fields: ['Name', 'No', 'Age', 'Address'] //读取里面的属性
            });
            store.load({
                callback: function (rs, op, c) {
                    //循环读取users.json文件里面的users对象
                    for (var i = 0; i < rs.length; i++) {
                        alert("编号："+rs[i].get("No")+"\n姓名：" + rs[i].get("Name") + "\n" + "年龄：" + rs[i].get("Age")+"\n地址："+rs[i].get("Address")); //显示json数据
                    }
                }
            });
            //将json数据放到GridPanel上面
            var grid = new Ext.grid.GridPanel({
                store: store,//数据来源store
                columns: [
                    { id: 'No', header: "No", width: 200, sortable: true, dataIndex: 'No' }, //第一列
                    { header: "Name", width: 120, sortable: true, dataIndex: 'Name' },       //第二列
                    { header: "Age", width: 120, sortable: true, dataIndex: 'Age' },         //第三列
                    { header: "Address", width: 120, sortable: true, dataIndex: 'Address' }  //第四列
                ], viewConfig: { forceFit: true },
                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                width: 600,
                height: 300,
                frame: true,
                title: 'GridPanel显示json数据',
                iconCls: 'icon-grid',
                renderTo: "showJson" //呈现在showJson层中
            });

        });
    </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div id="showJson">  
    </div>
    </form>
</body>
</html>

//users.json文件

{
	users:[
		{No:'1001',Name:'张三',Age:'18',Address:'深圳罗湖'},
		{No:'1002',Name:'李四',Age:'22',Address:'深圳福田'},
		{No:'1003',Name:'王五',Age:'21',Address:'深圳宝安'}
	],rows:'3'
}

预览效果如下：

LMAOhuaNL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
ASP.NET+Extjs2.0读取Json数据显示在GridPanel面板上面

//IE9必须加上此段代码 if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) { Range.prototype.createC
复制链接

扫一扫