AJAXは無限階層uitreeデータの追加・削除・変更を実現します-jsチュートリアル-php.cn

今回は無限階層uitreeデータの追加、削除、変更を実現するAJAXを紹介します以下は実際的なケースです。一見。

閲覧ディレクトリ

• 無制限の採点 • jstree プラグイン
• デモ
• 地域エンティティの作成
• jstree プラグインのデータオブジェクト Dto を満たす
• データ変換
• 変換されたデータを取得するための初期化
•フロントデスクデータ読み込み
•その他の操作
•ボタンを使用して追加、削除、変更

無限採点

多くの場合、階層関係のレベルがわかりません。無限グレーディングを使用します。

無限グレーディングといえば、再帰呼び出しについてもう一度話さなければなりません。 (頻繁な再帰はパフォーマンスに非常に負荷がかかると言われています) ここでは、最初に無限の階層データを格納するテーブル構造を設計する必要があります。もちろん、以下はすべて私自身のいじりの結果であり、標準的なものではありません。誰かがより良いデザインを持っている場合は、お気軽に教えてください。

実際に言うのは簡単で、ID と親 ID の関係です。

同様に、Id は一意である必要があり、ParenId は Id 列に存在する必要があります。このようにして、並べ替えの列をもう 1 つ追加すると、さらに完璧になります。

jstree プラグイン

公式アドレス:

https://www.jstree.com/

このプラグインを使用する理由?

データバインディングを行うための便利なAPIがあり、ノードのドラッグによる追加、削除、変更をサポートしているため、この機能は個人的には非常に強力だと思います。

デモ

今度は、jstree プラグインに基づいて無制限の階層データ操作を実装します。地域データの操作を例として、Code First を使用してデモコードを作成します。

リージョンエンティティを作成します

プラグインによって自動的に生成されたノードIDと一致させるために、ここではNodeとParentNodeを使用して上位と下位の関係を保存します（前述のIDと親IDの代わりに）上記ですが、実際の効果は同じです)。

/// <summary>
/// 区域
/// </summary>
public class Region
{
 /// <summary>
 /// 主键id
 /// </summary>
 public int Id { get; set; }
 /// <summary>
 /// 名称
 /// </summary>
 public string Name { get; set; }
 /// <summary>
 /// 节点
 /// </summary>
 public string Node { get; set; }
 /// <summary>
 /// 父节点
 /// </summary>
 public string ParentNode { get; set; }
}

ログイン後にコピー

jstree プラグインのデータオブジェクト Dto を満たします

jstree プラグインのデータ要件に適応するには、上記のデータをツリー状のデータオブジェクトに変換する必要があります。

/// <summary>
/// Dto
/// </summary>
public class RegionsTreeOutput
{
 /// <summary>
 /// Id
 /// </summary>
 public int RegionsId { get; set; }
 /// <summary>
 /// tree显示文本（对应region的name）
 /// </summary>
 public string text { get; set; }
 /// <summary>
 /// tree的id（对应Node）
 /// </summary>
 public string id { get; set; }  
 /// <summary>
 /// 子节点数据（此属性就体现的数据的层级关系）
 /// </summary>
 public List<RegionsTreeOutput> children { get; set; }
}

ログイン後にコピー

データ変換

 #region GetRegionTree 初始化数据获取 的辅助方法
  public RegionsTreeOutput LoadRegions(string id, List<Region> inRegions, RegionsTreeOutput outRegions)
  {
   List<Region> regions = inRegions.Where(t => t.ParentNode == id).ToList();
   if (outRegions == null)//加载父节点
   {
    outRegions = ToTreeData(regions[0]);
    LoadRegions(outRegions.id, inRegions, outRegions);
   }
   else//加载子节点
   {
    outRegions.children = ToTreesData(regions);
    if (regions.Count > 0)
    {
     for (int i = 0; i < regions.Count; i++)
     {
      LoadRegions(regions[i].Node, inRegions, outRegions.children[i]);//递归调用
     }
    }
   }
   return outRegions;
  }
  public RegionsTreeOutput ToTreeData(Region region)
  {
   var treeData = new RegionsTreeOutput();
   treeData.id = region.Node;
   treeData.text = region.Name;
   treeData.RegionsId = region.Id;   
   return treeData;
  }
  public List<RegionsTreeOutput> ToTreesData(List<Region> listRegion)
  {
   var regions = new List<RegionsTreeOutput>();
   for (int i = 0; i < listRegion.Count; i++)
   {
    regions.Add(ToTreeData(listRegion[i]));
   }
   return regions;
  }
  #endregion

ログイン後にコピー

変換したデータを取得するための初期化

 /// <summary>
 /// 初始化数据获取
 /// </summary>
 /// <returns></returns>
 public JsonResult GetResultData()
 {
  TreeDbContext db = new TreeDbContext();
  var regions = db.Regions.Where(t => true).ToList();
  var regionObj = LoadRegions("-1", regions, null);
  return Json(regionObj);
 }

ログイン後にコピー

以上でバックグラウンドデータはほぼ完成しました。

フォアグラウンドデータの読み込み

 $(function () {
   $.post("/Home/GetResultData", null, function (sData) {
    treeObj = $('#jstree_demo').jstree({
     //, "checkbox"
     'plugins': ["contextmenu", "dnd", "search", "state", "types", "wholerow"],
     'core': {
      "animation": 0,
      "check_callback": true,
      'force_text': true,
      "themes": { "stripes": true },
      'data': sData
     },
     "types": {
      "default": {
       "icon": "fa fa-folder icon-state-warning icon-lg"
      },
      "file": {
       "icon": "fa fa-file icon-state-warning icon-lg"
      }
     },
     "contextmenu": {
      select_node: false,
      show_at_node: true,
      items: function (o, cb) {
       //因为这里我们之后需要定义多个项,所以通过对象的方式返回
       var actions = {};
       //添加一个"新增"右键菜单
       actions.create = {//这里的create其实阔以随意命名,关键是里面的 这里面的 action回调方法
        "separator_before": false,//Create这一项在分割线之前
        "separator_after": true,//Create这一项在分割线之后
        "_disabled": false, //false表示 create 这一项可以使用; true表示不能使用
        "label": "新增", //Create这一项的名称 可自定义
        "action": function (data) { //点击Create这一项触发该方法,这理还是蛮有用的
         var inst = $.jstree.reference(data.reference),
           obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
         //新加节点,以下三行代码注释掉就不会添加节点
         inst.create_node(obj, {}, "last", function (new_node) {
          setTimeout(function () { inst.edit(new_node); }, 0);//新加节点后触发 重命名方法,即 创建节点完成后可以立即重命名节点
         });
        }
       };
       if (o.id != "0001")//屏蔽对根节点的操作 “0001”改成根节点对应的真是id
       {
        //添加一个"重命名"右键菜单
        actions.rename = {
         "separator_before": false,
         "separator_after": false,
         "_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
         "label": "重命名",
         "action": function (data) {
          var inst = $.jstree.reference(data.reference),
            obj = inst.get_node(data.reference);
          inst.edit(obj);
         }
        }
        //添加一个"删除"右键菜单
        actions.delete = {
         "separator_before": false,
         "icon": false,
         "separator_after": false,
         "_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
         "label": "删除",
         "action": function (data) {
          var inst = $.jstree.reference(data.reference),
            obj = inst.get_node(data.reference);
          if (inst.is_selected(obj)) {
           inst.delete_node(inst.get_selected());
          }
          else {
           inst.delete_node(obj);
          }
         }
        };
       }
       return actions;//返回右键菜单项
      }
     },
    });
   });
  });

ログイン後にコピー

その他の操作

//删除节点
$('#jstree_demo').on('delete_node.jstree', function (e, data) {   
   var id = data.node.original.RegionsId;   
   $.ajax({
    type: "get",
    url: "/Home/DeleteRegion?id=" + id,
    success: function (sData) {
    }
   }); 
  });
//移动节点
$('#jstree_demo').on('move_node.jstree', function (e, data) {
   saveRegions(data);
  });
//修改名
$('#jstree_demo').on('rename_node.jstree', function (e, data) {   
   saveRegions(data);
  });
//保存
function saveRegions(data) {   
   var id = data.node.original.RegionsId;
   var name = data.node.text;//修改后的name
   //var oldName = data.old;//原name   
   //var pNode = $('#jstree_demo').jstree().get_node(data.node.parent).original.RegionsId;
   var josnData = { "Id": id, "Node": data.node.id, "ParentNode": data.node.parent, "Name": name };
   $.ajax({
    url: "/Home/SaveRegions",
    data: josnData,
    success: function (sData) {     
     data.node.original.RegionsId = sData;
     data.node.state.opened = false;//是否展开
    }
   });
  }

ログイン後にコピー

もちろん、対応するバックグラウンドエンティティの ID、RegionsId を変更または削除することを忘れないでください。

ボタンを使用して追加、削除、変更します

function createTree() { 
 var ref = $('#jstree_demo').jstree(true),
  sel = ref.get_selected();
 if (!sel.length) { return false; }
 sel = sel[0];
 sel = ref.create_node(sel, { "type": "file" });
 if (sel) {
  ref.edit(sel);
 }
};
function renameTree() {
 var ref = $('#jstree_demo').jstree(true),
  sel = ref.get_selected();
 if (!sel.length) { return false; }
 sel = sel[0];
 ref.edit(sel, function () {
  
 });
};
function deleteTree() {
 var ref = $('#jstree_demo').jstree(true),
  sel = ref.get_selected();
 if (!sel.length) { return false; }
 ref.delete_node(sel);
};

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。！

推奨読書:

AJAX実装はロード前にページを表示します

AJAX実装はデータベース内のユーザー名とパスワードを検証します

以上がAJAXは無限階層uitreeデータの追加・削除・変更を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。