ホームページ > 記事 > ウェブフロントエンド > ztreeがパーミッション水平表示機能実装例共有

ztreeがパーミッション水平表示機能実装例共有

小云云オリジナル: 2018-01-11 14:00:381917ブラウズ

最近パーミッション機能を開発したとき、ztreeを使用して実装しましたが、製品では最後のレイヤーのパーミッションノードが水平に表示される必要があります。以下に、ztreeをベースにしたパーミッションの水平表示機能を実装するための実装アイデアを編集者が共有しますので、ご参考になれば幸いです。

最近パーミッション機能を開発した際、ztreeを使って実装したのですが、この製品では最終層のパーミッションノードを横に表示する必要があります。私がオンラインで探し始めた解決策は、CSS スタイルを使用して最後のレイヤーの表示をインラインに設定することでした。ローカルコンピュータで確認しました。効果は良好です。

しかし、後でこの機能を 10 年前のラップトップでテストしたところ、ブラウザのクラッシュを引き起こす特別なラグが見つかりました。したがって、パフォーマンスの最適化が始まります。

1. 同期は非同期に変更されますが、機能が不十分です。このとき、親ノード (モジュールノード) を確認して保存します。セーブデータの問題です。

2. showIcon と showLine を false に設定すると、速度は少し向上しましたが、まだ満足のいく製品ではありません。

3. 注意深く検査した後、ztree のチェックボックスはすべて Span でシミュレートされ、背景画像が作成されます。直感的には、画像シミュレーションを使用するよりもネイティブのチェックボックスを使用する方が優れていると感じます。 ztree が提供する例を見つけました。少し変更した後でも、効果は明らかです。使用される主なメソッドは addDiyDom です。

以下にメインコードを投稿してください。

1. データ構造では、子ノードであるかどうかをマークする isLeaf ノードが必要です。

var zNodes =[
      { id:1, pId:0, name:"父节点 1", open:true,isLeaf:false},
      { id:11, pId:1, name:"叶子节点 1-1",isLeaf:true},
      { id:12, pId:1, name:"叶子节点 1-2",open:true,isLeaf:false},
      { id:120, pId:12, name:"叶子节点 1-2-0",isLeaf:true},
      { id:121, pId:12, name:"叶子节点 1-2-1",isLeaf:true},
      { id:13, pId:1, name:"叶子节点 1-3",isLeaf:true},
      { id:2, pId:0, name:"父节点 2", open:true,isLeaf:false},
      { id:21, pId:2, name:"叶子节点 2-1",isLeaf:true},
      { id:22, pId:2, name:"叶子节点 2-2",isLeaf:true},
      { id:23, pId:2, name:"叶子节点 2-3",isLeaf:true},
      { id:3, pId:0, name:"父节点 3", open:true,isLeaf:false},
      { id:31, pId:3, name:"叶子节点 3-1",isLeaf:true},
      { id:32, pId:3, name:"叶子节点 3-2",isLeaf:true},
      { id:33, pId:3, name:"叶子节点 3-3",isLeaf:true}
    ];

2. addDiyDomメソッド

function addDiyDom(treeId, treeNode) {
      //console.log(treeNode);
      var aObj = $("#" + treeNode.tId + IDMark_A);
      var editStr = $("<input type=&#39;checkbox&#39; class=&#39;checkboxBtn&#39; id=&#39;checkbox_" +treeNode.id+ "&#39; onclick=&#39;checkedHandler(this)&#39; ></input>");
      editStr.data("treeNode",treeNode);
      aObj.before(editStr);
    
    }

3. 自分で書いたいくつかのカスケード操作メソッド

function checkedHandler(checkbox){
      var $checkbox = $(checkbox),
        treeNode = $checkbox.data("treeNode"),
        state = checkbox.checked;
        if(treeNode.isLeaf){ //子节点
          if(state){ //子节点选中，父节点要跟着选中，子节点取消选择，父节点不用级联
            setParentNodeChecked(checkbox);
          }
        }else{ //父节点
          if(state){ //选中，级联子节点，级联父节点
            setParentNodeChecked(checkbox);
            setChildNodeChecked(checkbox);
          }else{
            setChildNodeChecked(checkbox);
          }
        }
    }
    /**设置父节点选中 */
    function setParentNodeChecked(checkbox){
      var $pNode = $(checkbox).closest("ul").parent();
      var pCheckbox = $pNode.find(".checkboxBtn").get(0);
      var treeNode = $(pCheckbox).data("treeNode");
      if(pCheckbox.checked === checkbox.checked) return;
      pCheckbox.checked = checkbox;
      if(treeNode.pId != "0") setParentNodeChecked(pCheckbox);
    }
    /**设置子节点选中 */
    function setChildNodeChecked(checkbox){
      $(checkbox).closest("li").find(".checkboxBtn").each(function(){
        this.checked = checkbox.checked;
      });
    }

ztreeがパーミッション水平表示機能実装例共有

関連記事