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

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

1.   .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代码

function DataAccess(methodName, paramObj, callback) {
    Ext.Ajax.request({
        url: "../DataService.asmx/" + methodName,
        params: JSON.stringify(paramObj),
        dataType: 'json',
        success: function (response) {
            try {
                // var respText = Ext.JSON.decode(resp.responseText);
                var xmlDoc = response.responseXML;
                if (xmlDoc != null) {
                    var ais = xmlDoc.getElementsByTagName("string");
                    var data = ais[0].childNodes[0];
                    callback(data);
                }
            } catch (ex) {
                alert(ex);
            }
        }
    });
};

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.页面

   
   
   
   
   
   
   
   
   


   

Ext树形控件练习

   

   

未完待续。。。