.NET(WEBSERVICE) EXT （Tree）JSON数据小demo

最新推荐文章于 2022-05-05 16:14:54 发布

xman俊520

最新推荐文章于 2022-05-05 16:14:54 发布

阅读量541

点赞数

分类专栏： extjs asp.net 文章标签： .net web service json ext TreeStore

本文链接：https://blog.csdn.net/u012421679/article/details/49660341

版权

asp.net 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

extjs

0 篇文章 0 订阅

订阅专栏

刚学习extjs技术，把自己的小心得分享下。。。

.net后台代码

[WebMethod]

public string getTree()
{
string msg = "";
try
{
string sql = "select * from Area";
DataTable dt = SqlHelper.ExecuteDataTable(sql);
msg = JsonConvert.SerializeObject(dt);
}
catch (Exception ex)
{
msg = ex.Message;
}
return msg;

}

2. 前端js代码

Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.layout.container.HBox',
'Ext.window.MessageBox'
]);
Ext.define('Item', {
extend: 'Ext.data.Model',
fields: ['id','pid','text']
})
function getAreaTree(data,pnode,_id)
{
var _Name = [];
var temp = {id:"",pid:"",text:"",children:[]};
for (var i = 0; i < data.length; i++)
{
if (data[i].sonId == 0 && pnode.id == 0)
{
temp = {};
if (_Name.indexOf(data[i].name) >= 0) {
continue;
}
_Name.push(data[i].name);
temp = { id: data[i].fatherId,pid:data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
getAreaTree(data, pnode.children[pnode.children.length - 1], pnode.children[pnode.children.length - 1].pid);
} else if (data[i].sonId == pnode.id) {
temp = { id: data[i].fatherId, pid: data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
}
}
}
Ext.onReady(function () {
var myData = {};
var _strData = [];
DataAccess('getTree', {}, function (result) {
debugger;
var data = result.data;
var _data = eval('(' + data + ')');
var _ids = 0;
var node = { id: _data[0].fatherId, pid: _data[0].sonId, text: _data[0].name, children: [] };
getAreaTree(_data, node, _ids);
myData = node;
var store = new Ext.data.TreeStore({
model: 'Item',
root: myData
});
Ext.create('Ext.tree.Panel', {
title: 'Area',
width: 200,
height: 500,
store: store,
rootVisible: false,
renderTo: 'container'
});
});
});

3.页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
<link href="examples/shared/example.css" rel="stylesheet" />

<script src="JS/jquery-1.7.2.min.js"></script>
<script src="examples/shared/include-ext.js"></script>
<script src="examples/shared/options-toolbar.js"></script>
<script src="JS/dal.js"></script>
<script src="JS/tree.js"></script>
<style type="text/css">
.x-panel-body p {
margin: 10px;
}

#container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Ext树形控件练习</h1>
<div id="container">

</div>
</body>
</html>

未完待续。。。