您的位置：首页 > 编程语言 > ASP

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

2011-09-21 22:28 447 查看

<%@ 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'
}

预览效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航