Extjs中grid采用json进行数据绑定的实例
2010-09-06 00:59
585 查看
刚开始学习extjs，真是摸不着头呀。
做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。
一下是代码。
首先：把ext-3.1.0文件夹放到根目录下。
新建一个Default.aspx。
view plaincopy to clipboardprint?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
在创建一个名为grid1.js的js文件显示grid。
view plaincopy to clipboardprint?
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
数据源re.aspx.cs页面
view plaincopy to clipboardprint?
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
运行显示看看结果吧
做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。
一下是代码。
首先：把ext-3.1.0文件夹放到根目录下。
新建一个Default.aspx。
view plaincopy to clipboardprint?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
在创建一个名为grid1.js的js文件显示grid。
view plaincopy to clipboardprint?
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
数据源re.aspx.cs页面
view plaincopy to clipboardprint?
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
string str = "{ /"results/":19,/"datastr/":[ { /"productID/":/"1/",/"productCode/":/"083-QMC16009-19/B/",/"productName/":/"C1系列600柜/"}, { /"productID/":/"2/",/"productCode/":/"083-QMC1-600B1-R/L/",/"productName/":/"600侧山左右各1/"}, { /"productID/":/"3/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山/"}, { /"productID/":/"4/",/"productCode/":/"083-QMC1-600B1-L/",/"productName/":/"左侧山(两边铣)/"}, { /"productID/":/"5/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"6/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"7/",/"productCode/":/"083-QMC1-600H2/",/"productName/":/"600身后板/"}, { /"productID/":/"8/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"9/",/"productCode/":/"083-QMC1-600SF2/",/"productName/":/"大拉板/"}, { /"productID/":/"10/",/"productCode/":/"083-QMC1-600SF2H/",/"productName/":/"滑道条/"}, { /"productID/":/"11/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"12/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"13/",/"productCode/":/"QMC1-600G3/",/"productName/":/"金属衣杆/"}, { /"productID/":/"14/",/"productCode/":/"F-QMC1600L2-3-1/",/"productName/":/"电视柜/"}, { /"productID/":/"15/",/"productCode/":/"F-QMC1600L2-3CDB/",/"productName/":/"顶底山条/"}, { /"productID/":/"16/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"17/",/"productCode/":/"F-QMC1600L2-3CD/",/"productName/":/"顶底板/"}, { /"productID/":/"18/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"380/500后身板/"}, { /"productID/":/"19/",/"productCode/":/"F-QMC1-H807/",/"productName/":/"后身板/"} ]} ";
Response.Write(str);
运行显示看看结果吧
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs 4.0 Grid 数据绑定 json 分页 不分页
- ExtJs与JSON格式数据绑定的方法（grid）
- ExtJs:grid中json的数据绑定（转）
- Extjs Grid 数据绑定 json 分页 不分页
- extjs的grid应用（java 使用json绑定数据 翻页）
- Android采用ListView实现数据列表显示2-使用SimpleAdapter进行数据绑定
- Extjs中的store数据进行json序列化
- struts2 使用json与extjs进行数据交互
- Extjs grid 获取json数据时报各种错误的原因(缺少分号,语法错误)
- ExtJS：Grid数据导出至excel实例
- struts2 使用json与extjs进行数据交互
- ExtJS：Grid数据导出至excel实例
- Extjs创建form表单以及绑定动态数据到grid
- ExtJs4 中 获取grid列表数据绑定到form表单
- 【Java】SpringBoot 引入fastjson库进行json格式数据返回实例
- ExtJs与JSON格式数据绑定的方法
- android 客户端与服务器端之间采用JSON进行数据通信之一
- 用UDP进行广播后绑定发送Json数据进行通讯
- 如何使用json在前后台进行数据传输实例介绍
- 根据Extjs中grid列表表头自动排序导出数据的实例