ztree父子聯動_單選等

最近工作中碰巧有用到zTree樹狀控件,在這裏記錄下遇到的問題。

一.zTree實現單選
之前爲了設置單選,看了不少材料,但是大部分都比較複雜。有的還只能實現某個父級節點下子節點單選。但是整棵樹中,實際上是多選。查找了zTree API後,找到了一個簡單的方法:
在settings中設置:

check: {
            enable: true,
            chkStyle: "radio",  //單選框
            radioType: "all"   //對所有節點設置單選
        }
  • 1
  • 2
  • 3
  • 4
  • 5

即可。

二.zTree取消父子關聯
對於zTree父子關聯關係的設置,zTree裏面自帶了一個chkboxType函數。取消父子關聯,只需要在初始化樹的時候,在settings裏面設置:

check: {
            enable: true,
            chkboxType:  { "Y": "", "N": "" }
        }
  • 1
  • 2
  • 3
  • 4

即可。

附上函數的參數說明:

chkboxType: { “Y”: “ps”, “N”: “ps” }
Y 屬性定義 checkbox 被勾選後的情況;
N 屬性定義 checkbox 取消勾選後的情況;
“p” 表示操作會影響父級節點;
“s” 表示操作會影響子級節點。
請注意大小寫,不要改變

        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/sinat_32034679">
                <img src="https://profile.csdnimg.cn/E/5/3/3_sinat_32034679" class="avatar_pic" username="sinat_32034679">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/sinat_32034679" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">may夏至未至</a></span>
                    <!-- 等級,level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog6.png">                                            </div>
                <div class="text"><span>原創文章 108</span><span>獲贊 110</span><span>訪問量 62萬+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;個人信息未關注&quot;}">關注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=sinat_32034679" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章