ASP.NET+Extjs2.0讀取Json資料顯示在GridPanel面板上面

阿新 • • 發佈：2019-01-14

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

預覽效果如下：

ASP.NET+Extjs2.0讀取Json資料顯示在GridPanel面板上面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReaderJson.aspx.cs" Inherits="ReaderJson" %> <!DOCTYPE html PUBLIC "-//

Asp.net C# 使用Newtonsoft.Json 實現DataTable轉Json格式資料

轉自：http://dongguojun.iteye.com/blog/737890 1.這裡下載:http://www.newtonsoft.com/products/json/ 安裝: 1.解壓下載檔案,得到Newtonsoft.Json.dll 2.在

在ASP.NET中將Excel檔案中資料匯入資料庫並顯示進度條

在ASP.NET中經常會遇到Excel檔案匯入資料庫的問題，遇到資料量比較大的時候，最好顯示進度條。進度條設計是參考網上某牛人提供的程式碼，利用JS實現的，謝謝這個大牛了（忘記了當時記錄下他的大名了，:(）。具體思路：首先將後臺伺服器上ProgressBar.htm 頁面內

【Asp.net MVC4.0學習筆記】找不到DbContext和無法檢索元資料

編譯環境：Visual Studio 2012；解決問題：找不到DbContext需要安裝EntityFramework，安裝方法如下：工具->庫程式包管理器->程式包管理器控制檯，開啟控制檯後，輸入命令Install-package Ent

【ASP.NET】GridView連線資料庫，顯示資料

前端 1、新增控制元件GridView，新增資料來源，接著按步驟選擇自己的資料庫新增資料來源顯示資料有倆種方法：（1）一種方法是在GridView控制元件上直接按步驟新增資料來源，及設計想要顯

在Asp.net core使用配置Json創建動態目錄樹

ref 一個 left 設置構造 path pat aspnet 演示一、前言　　使用動態目錄樹可以使左邊欄中的目錄更加靈活，本文介紹如何將目錄保存在json配置文件中，再讀取出來經過處理後生成目錄樹。二、數據結構　　1. TreeMenuNode類名　　將Tr

asp.net 重寫OnException返回json或跳轉新頁面

message ide string exce () toupper tpc exceptio tostring protected override void OnException(ExceptionContext filterContext)

WebApi遷移ASP.NET Core2.0

content .config true 進入服務設置網關系統 win WebApi遷移ASP.NET Core2.0 一步一步帶你做WebApi遷移ASP.NET Core2.0 隨著ASP.NET Core 2.0發布之後，原先運行在Windows II

Asp.NET Core2.0 項目實戰入門視頻課程_完整版

第5章 frame 封裝今天使用結束技巧標題技術分享 END OR START? 看到這個標題，你開不開心，激不激動呢？沒錯，.net core的入門課程已經完畢了。52ABP.School項目從11月19日，第一章視頻的試錄制，到今天完整版出爐，離不開各位的

ASP.NET 4.0驗證請求 System.Web.HttpRequestValidationException: A potentially dangerous Request.F

asp.net oss 程序 sys validate time 拷貝 bsp 包括 System.Web.HttpRequestValidationException: A potentially dangerous Request.F 在使用類似eWebedtior

asp.net core1.x/asp.net core2.0中如何加載多個配置文件

加載自己團隊多配置文件做的 ted 文章 pos 簡單寫這篇文章，來簡單的談一下，asp.net core中，如何加載多配置文件，如有錯誤請斧正。在1.x的時候，我們是自己配置 WebHostBuilder而在2.0的時候，ef core團隊，將配置寫到了

用VSCode開發一個asp.net core2.0+angular5項目(5): Angular5+asp.net core 2.0 web api文件上傳

owb bus sed loaded runt ace created one 做了第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.

ASP.Net Core 返回的json數據，自定義日期格式

AR 定義序列 lec www configure 所有序列化都在 //代碼位置：Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddMvc(

基於ASP.NET 4.0開發的微商城系統OdnShop，開源發布

如果支付程序 TP 選項虛擬字符串如果能均可基於ASP.NET 4.0開發的開源微商城系統，我們的目標是構建一個核心完善而又輕量級的微商城平臺，目前基本的核心功能，包括微信登陸/支付，產品管理，購物車與訂單管理等，輕量級是為了更加便於理解源碼和二次開發。使

asp.net core2.1 bundleconfig.json合並壓縮資源文件

源代碼 bundle 16px 綁定 apr onf 中轉 vertica 空值在asp.net core中則可以使用BuildBundlerMinifier來進行css，js的壓縮合並 1、使用NuGet安裝 BuildBundlerMinifier（也可以在vs中下載

asp.net 2.0 分析器錯誤訊息: 檔案.aspx.cs”不存在錯誤

布webapplication時後老是報告分析器錯誤訊息: 檔案.aspx.cs”不存在錯誤,差點抓狂,後來在網上搜到原因是: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="{0}" Inherits="{1}" %&g

經典ASP NET MVC3 0入門詳解

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

ASP.NET 4.0配置檔案中的ClientIDMode屬性

ASP.NET 4.0配置檔案中的ClientIDMode屬性來自森大科技官方部落格 http://www.cnsendblog.com/index.php/?p=99時光流逝，我們心愛的ASP.NET也步入了4.0的時代，微軟在ASP.NET 4.0中對很多特性做了修改。比如我將要討論的控制元件ID機制就是

ASP.NET 4.0配置文件中的ClientIDMode屬性

ont .cn 微軟 tex left 現在判斷 mode name ASP.NET 4.0配置文件中的ClientIDMode屬性來自森大科技官方博客 http://www.cnsendblog.com/index.php/?p=99 時光流逝，我們心愛的ASP.N

C++學習筆記-利用rapidJSON讀取JSON資料

JSON檔案如下： { "errorCode":0, "reason":"OK", "result": {"userId":10086,"name":"中國移動"}, "numbers":[110,120,119,911] } 目錄結構如下：

ASP.NET+Extjs2.0讀取Json資料顯示在GridPanel面板上面

相關推薦