功能樹Ztree的使用

2021-07-12 03:09:05 字數 1100 閱讀 2270

首先使用ztree後前台頁面展示出的效果

使用ztree控制項，首先第一步引入js和css

第二步，就是前台js**，前台**主要是封裝好的控制項，將後台取得的資料基於控制項和js展示出來

var ztree;


$(document).ready(function();


var zn = '$';


var ztreenodes = eval(zn);


ztree = $("#lefttree").ztree(setting, ztreenodes);


});
ztree主要的方法是.ztree（setting,ztreenodes）

setting引數是樣式和事件的方法，而ztreenodes是json陣列

jsonarray arr = jsonarray.fromobject(departmentservice.listalldepartment("0"));


string json = arr.tostring();


json = json.replaceall("department_id", "id").replaceall("parent_id", "pid").replaceall("name", "name").replaceall("subdepartment", "nodes").replaceall("hasdepartment", "checked").replaceall("treeurl", "url");


model.addattribute("ztreenodes", json);


mv.addobject("department_id",department_id);


mv.addobject("pd", pd); 


mv.setviewname("fhoa/department/department_ztree");
這是後台對前台傳送的改造後的json陣列

以上就是ztree的三個中心部分

樹目錄zTree的使用

前言 ztree是開源免費的。文件api 首先說一下我的demo結構 頁面進行w3c申明 這裡廢話一句，jquery和ztree的先後順序不能反。設定顯示層 js中設定 效果圖 ztreenodes節點屬性 checked true 是否選中核取方塊 chkdisabled true 核取方塊是否可...

zTree樹的簡單使用

ztree是乙個依靠 jquery 實現的多功能的樹外掛程式 官網 簡單使用 1.引入css和js 2.簡單配置 var setting data 3.獲取後台傳來的資料 後端返回json資料,為了業務需求需要在要顯示的物件中新增id,pid,checked屬性 private string id ...

ztree的簡單使用

ztree 是乙個依靠 jquery 實現的多功能 樹外掛程式 優異的效能 靈活的配置 多種功能的組合是 ztree 最大優點。ztree 是開源免費的軟體 mit 許可證 其實ztree的api已經說得足夠明白了，自己再記錄一遍加深一下印象。id treedemo class ztree ul 1...