ASP.NET MVC 비동기 가 져 오기 및 새로 고침 ExtJS 6 TreeStore

데이터베이스 에서 구조 트 리 구 조 를 얻 는 것 은 ExtJS TreePanel 의 핵심 기술 로 자주 사용 되 는 방법 은 TreeStroe 에서 proxy 를 설정 하 는 것 이다.이런 방식 의 root 는 제어 되 지 않 는 노드 가 되 었 다.
TreeStroe 의 root 는 실제 적 으로 json 데 이 터 를 레이 어드 하 는 것 입 니 다.대부분의 경우 간단 한 데 이 터 를 직접 쓰 지만 실제 응용 에 서 는 반드시 데이터 베이스 에서 읽 어야 합 니 다.제 방법 은 먼저 Ext.ajax.request 로 루트 데 이 터 를 얻어 TreeStroe 를 만 드 는 것 입 니 다.전역 적 인 TreeStroe 이름 을 mTreeStore 로 정의 하고 Ext.ajax.request 로 루트 데 이 터 를 얻 습 니 다.TreeStore Refresh 함 수 는 이와 유사 하 며,mTreeStore 의 루트 를 새 값 으로 바 꿉 니 다.TreePanel 의 rootVisible 속성 은 true 여야 합 니 다.노드 를 누 르 면 이벤트 표시 노드 의 정 보 를 추가 해 야 합 니 다.

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('     ', '        :
\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('     ', '        :
\r' + response.responseText);
  }
 });
}

Ext.define('TreeToolbarCls', {
 extend: 'Ext.toolbar.Toolbar',
 padding:'0 0 0 0',
 items: [{
  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'),
 listeners:
 {
  itemclick: NodeClick
 }
});

function NodeClick(node, record, item, index, e, eOpts)
{
 if (typeof (record.data) == "undefined")
 {
  return;
 }
 var message = Ext.String.format('Level={0}<br/>state={1}', record.data.Level, record.data.state);
 Ext.Msg.alert("    ", message);
}

다음은 백 스테이지 C\#코드 입 니 다.
TreeNode 클래스 를 정의 합 니 다.TreePanel 노드 의 고유 한 속성 을 포함 하고 임의로 확장 할 수 있 습 니 다.이 를 이용 하여 많은 추가 데 이 터 를 사용자 정의 할 수 있 습 니 다.예 를 들 어 제 가 안에서 Level 이 노드 의 단 계 를 표시 하 는 것 을 정의 할 수 있 습 니 다.

 [Authorize]
 [RoutePrefix("api/BasicData_API")]
 public class BasicData_APIController : ApiController
 {
  [Route("GetBasicTablesTreeSource")]
  public HttpResponseMessage GetBasicTablesTreeSource(string condition = null)
  {
   List<TreeNode> lstF = new List<TreeNode>();
   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 = "      ",
    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<TreeNode> children { get; set; }
 }

NodeClick 함수 가 중단 되면 더 많은 정 보 를 감시 할 수 있 습 니 다.

마지막 실행 효과:

그리고 데이터 테이블 의 데 이 터 를 변경 하고'새로 고침'을 누 르 면 TreePanel 노드 의 새로 고침 을 실현 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.