Shulou(Shulou.com)06/03 Report--

This article mainly introduces how ASP.NET MVC asynchronously obtains and refreshes ExtJS6 TreeStore, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Getting the construction tree structure from the database is the core technology of ExtJS TreePanel. The common method is to configure proxy in TreeStroe. In this way, root becomes an uncontrolled node.

The root of TreeStroe is actually a cascading json data, most of which write some simple data directly, but it must be read from the database in practical application. My method is to first use Ext.Ajax.request to obtain root data to form TreeStroe. Define a global TreeStroe named mTreeStore, and use Ext.Ajax.request to get root data. The TreeStoreRefresh function is similar, replacing the root of mTreeStore with a new value. The rootVisible property of TreePanel must be true, adding a node click event to display the node's information.

Var mTreeStore = null;Ext.Ajax.request ({async: false, url:'/ api/BasicData_API/GetBasicTablesTreeSource', method: 'get', success: function (response, options) {var TreeRoot = Ext.decode (response.responseText); mTreeStore = Ext.create (' Ext.data.TreeStore', {root: TreeRoot});}, failure: function (response, options) {/ / var responseArray = Ext.decode (response.responseText) Ext.Msg.alert ('server error', 'cause of data processing error:\ n\ r' + response.responseText);}}); function TreeStoreRefresh () {Ext.Ajax.request ({async: false, url:'/ api/BasicData_API/GetBasicTablesTreeSource', method: 'get', success: function (response, options) {var TreeRoot = Ext.decode (response.responseText); if (mTreeStore! = null) {mTreeStore.setRoot (TreeRoot) }, failure: function (response, options) {/ / var responseArray = Ext.decode (response.responseText); Ext.Msg.alert ('server error', 'data processing error cause:\ n\ r' + response.responseText);}}) } Ext.define ('TreeToolbarCls', {extend:' Ext.toolbar.Toolbar', padding:'0 2000, items: [{text: 'refresh', iconCls: 'refresh', handler: TreeStoreRefresh, height: 30, width: 65}]}) Ext.define ('U1TreeClones, {extend:' Ext.tree.Panel', xtype: 'U1TreeSecretxtypedia, / / title:' basic data Dictionary', rootVisible: true, width: 300, store: mTreeStore, scrollable: true, tbar:Ext.create ('TreeToolbarCls'), listeners: {itemclick: NodeClick}}); function NodeClick (node, record, item, index, e, eOpts) {if (typeof (record.data) = "undefined") {return } var message = Ext.String.format ('Level= {0} state= {1}', record.data.Level, record.data.state); Ext.Msg.alert (Node Information, message);}

The following is the background C# code

Define a TreeNode class that contains some inherent attributes of the TreePanel node, and can also be extended arbitrarily, using this you can customize a lot of additional data, such as I define the level of the Level node in it.

[Authorize] [RoutePrefix ("api/BasicData_API")] public class BasicData_APIController: ApiController {[Route ("GetBasicTablesTreeSource")] public HttpResponseMessage GetBasicTablesTreeSource (string condition = null) {List lstF = new List (); ZydAdonet z = ZydAdonet.Instance (); string S1 = "select TableName,title from BaseDataTables order by TableName"; string sqltext = S1; DataTable dt1; string ErrMes; z.Sql2DTReadOnly (S1, out dt1, null, out ErrMes); TreeNode tnd Foreach (DataRow drx in dt1.Rows) {tnd = new TreeNode {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 = "basic data dictionary", expanded = false, iconCls = "folder_close", Level = 0, state = "RootOfTree", leaf = true}; if (lstF.Count > 0) {root.expanded = true; root.leaf = false; root.iconCls = "folder_open"; root.children = lstF;} string JsonStr; JsonStr = JsonConvert.SerializeObject (root) HttpResponseMessage response = Request.CreateResponse (HttpStatusCode.OK, "value"); response.Content = new StringContent (JsonStr, Encoding.GetEncoding ("UTF-8"), "application/json"); response.Headers.CacheControl = new CacheControlHeaderValue () {MaxAge = TimeSpan.FromMinutes (10)}; return response;}} internal class TreeNode {public string id {get; set;} public string text {get; set;} public string iconCls {get; set;} public string state {get; set } public bool leaf {get; set;} public int Level {get; set;} public bool expanded {get; set;} public List children {get; set;}}

More information can be monitored during the interrupt of the NodeClick function:

The final running effect:

Then change the data in the data table, click "Refresh" to achieve the refresh of the TreePanel node.

Thank you for reading this article carefully. I hope the article "how to obtain and refresh ExtJS6 TreeStore asynchronously from ASP.NET MVC" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.