ASP .NET MVC异步获取和刷新ExtJS6 TreeStore

从数据库获取构造树结构是ExtJS树面板的核心技术，常用方法是TreeStroe里配置代理人，这种方式的根成了一个不受控制的节点。

TreeStroe的根实际是一个层叠json数据，大部分情况是直接写一些简单数据，但在实际应用中必定是要从数据库读取的。我的方法是先用延伸文件系统Ajax.request获取根数据形成TreeStroe。定义一个全局的TreeStroe名字是mTreeStore，用延伸文件系统Ajax.request获得根数据TreeStoreRefresh。函数与此类似，将mTreeStore的根换为新值树形面板。的根可见属性必须为没错，增加一个节点单击事件显示节点的信息。

var mTreeStore=null延伸文件系统Ajax.request({ async: false，URL : '/API/BasicData _ API/getbasictabletreesource '，method: 'get '，success:函数(响应，选项){ var树根=ext。解码(响应。响应ext)；mTreeStore=ext。创建(' ext。数据。treestore '，{ root :树根})；}，failure:函数(响应，选项){//var response array=ext。解码(响应。响应ext)；延伸文件系统Msg.alert('服务器错误', '数据处理错误原因： \ n \ r '响应。响应文本)；}});函数treestorrefresh(){ Ext .Ajax.request({ async: false，URL : '/API/BasicData _ API/getbasictabletreesource '，method: 'get '，success:函数(响应，选项){ var树根=ext。解码(响应。响应ext)；如果(mTreeStore！=null){ mtreestore。setroot(树根)；} }，failure:函数(响应，选项){//var response array=ext。解码(响应。响应ext)；延伸文件系统Msg.alert('服务器错误', '数据处理错误原因： \ n \ r '响应。响应文本)；} });}Ext.define('TreeToolbarCls '，{ ext : ' ext。工具栏。工具栏'，填充： ' 0 0 0 '，项目： [{ text: '刷新，iconCls: 'refresh '，handler: TreeStoreRefresh，height: 30，width : 65 }]})；Ext.define('U1TreeCls '，{ extend: 'Ext.tree.Panel '，xtype: 'U1Tree_xtype '，//title: '基础数据字典、rootVisible: true、width: 300、store: mTreeStore、scrollable: true、tbar : ext。create(' TreeToolbarCls ')、listener 3360 { item click : node click } })；函数节点点击(节点、记录、项、索引e、eOpts){ if(记录类型。data)=' undefined '){ return；} var message=Ext .字符串。格式('级别={ 0 } br/状态={ 1 } '，记录。数据。级别，记录。数据。国家)；延伸文件系统Msg.alert('节点信息，消息);}下面是后台C#代码

定义一个TreeNode类，包含TreePanel节点固有的一些属性，也可以任意扩充，利用这个可以自定义许多附加数据，如我在里面定义水平表示节点的级别。

[授权][RoutePrefix(' API/BasicData _ API ')]公共类BasicData _ API控制器： API控制器{[Route(' getbasictabletreesource ')]公共HttpResponseMessage getbasictabletreesource(字符串条件=null){ listreenode LStf=new listreenode()；ZydAdonet z=ZydAdonet .instance()；字符串s1='从基本数据表中选择TableName，标题按TableName排序；字符串sqltext=s1DataTable dt1字符串错误；z.Sql2DTReadOnly(s1，out dt1，null，out ErrMes)；TreeNode tnddt1中的foreach (DataRow drx).行){ tnd=new tree node { id=DRX[' TableName '].ToString()，text=drx['title'].ToString()，Level=1，iconCls='table_6 '，state=drx['TableName'].ToString() ' OK '，leaf=true }；lstF .add(tnd)；} TreeNode root=new TreeNode { text='基础数据字典，expanded=false，iconCls='folder_close '，Level=0，state=' RootOfTree '，leaf=true }；if (lstF .计数0){ root。展开=真；root . leaf=false root . IConCLs=' folder _ open root . children=LStf }字符串JsonStrJsonStr=JsonConvert .SerializeObject(根);超文本传送协议（Hyper Text Transport Protocol的缩写）响应消息响应=请求CreateResponse(HttpStatusCode .好，"值");回应内容=新的字符串内容(JsonStr，Encoding).GetEncoding('UTF-8 '，' application/JSON ')；回应标题。CacheControl=new CacheControlHeaderValue(){ MaxAge=TimeSpan .from MINUTES(10)}；返回响应；} }内部类TreeNode {公共字符串id { get设置；}公共字符串文本{获取设置；}公共字符串iconCls { get设置；}公共字符串状态{获取设置；}公共bool leaf { get设置；}公共int Level { get设置；}公共bool扩展了{获取设置；}公共列表树节点子级{获取设置；} }在节点点击函数中断可以监视到更多的信息：

最后的运行效果：

然后更改数据表里的数据，点"刷新"就实现了TreePanel节点的刷新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。