使用高級zTree進(jìn)行對屬性結(jié)構(gòu)進(jìn)行操作的時候，做好的方式是參考官網(wǎng)的API文檔。
十余年的點(diǎn)軍網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整點(diǎn)軍建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“點(diǎn)軍網(wǎng)站設(shè)計”,“點(diǎn)軍網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
本文簡單介紹下如何通過后臺傳遞過來一個樹形結(jié)構(gòu)的樹，并且通過頁面進(jìn)行加載。
【與后臺交互步驟】1、編寫頁面，引入zTree相關(guān)插件；2、編寫js腳本，設(shè)定樹形結(jié)構(gòu)的基本屬性；3、編寫zTree的PO對象；4、編寫返回屬性結(jié)構(gòu)的方法（json格式返回）；5、頁面請求樹。
1、引入zTree相關(guān)的插件：
2、編寫js腳本，設(shè)定樹形結(jié)構(gòu)的基本屬性
重慶分公司
重慶分公司
// zTree 的參數(shù)配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {
check:{
enable: false,
//autoCheckTrigger:true,
//chkStyle:"none"
},
callback:{
onClick:queryRoleByEmployee
}
};
function queryRoleByEmployee(event, treeId, treeNode){
//console.info(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
//console.info("--------"+treeNode.isParent);
if(treeNode.isParent == true){
//將角色的樹形結(jié)構(gòu)清楚
$.fn.zTree.destroy("roleTree");
return ;
}
$.get('<%=request.getContextPath()%>/'+treeNode.objCode+'/role',{"coddd":treeNode.isParent},function(data){
console.info(data);
zTreeObj = $.fn.zTree.init($("#roleTree"), settingRole, data);
});
}3、編寫zTree的PO對象
public class DimsTree {
//除了樹本身的屬性,還可以自定義屬性.
private Object objCode;
//樹形結(jié)構(gòu)展示的名稱
private String name;
//是否打開屬性
private String open;
//是否根節(jié)點(diǎn)
private boolean isParent;
//url
private String url;
//子節(jié)點(diǎn)
private List children;
//是否被選中
private boolean checked;
//省略gettings和settings方法
} 4、編寫返回屬性結(jié)構(gòu)的方法（json格式返回）
@ResponseBody @RequestMapping(value="/user_role1") public ListuserRole1(Model model){ //宿舍信息Tree List dimsTreeList = new ArrayList (); //加載用戶信息列表,手鏈需要加載宿舍信息,將用戶信息加入到宿舍信息中. List dormitoiryList = dormitoryDao.list(); for(Dormitory dorm: dormitoiryList){ DimsTree dt = new DimsTree(); dt.setName(dorm.getDormCode()); dt.setParent(true);//根節(jié)點(diǎn) dt.setObjCode(dorm.getDormCode()); dt.setChildren(employee2DimsTree(dorm)); dimsTreeList.add(dt); } model.addAttribute(dimsTreeList); //加載角色信息列表，對已經(jīng)選中的角色進(jìn)行設(shè)置checked=true屬性。 //這個應(yīng)該設(shè)置成異步加載的方式,根據(jù)不同的用戶查詢不同的角色信息. logger.info("-------------->"+dimsTreeList); return dimsTreeList; // return "other/user_role"; } /** * 根據(jù)宿舍,查詢宿舍下的成員 * @param dorm * @return */ public List employee2DimsTree(Dormitory dorm){ //這個應(yīng)該是在service層進(jìn)行實(shí)現(xiàn)得 String sql = "select * from t_employee t where t.dorm_code = ?"; logger.info("----------->查詢?nèi)藛T宿舍信息參數(shù):"+dorm.getDormCode()); List employeeList = employeeDao.listBySql(sql, new Object[]{dorm.getDormCode()}); List dimsTreeList = new ArrayList (); for(Employee ee : employeeList){ DimsTree dt = new DimsTree(); dt.setName(ee.geteName()); dt.setParent(false); dt.setObjCode(ee.getUstcAccount()); dimsTreeList.add(dt); } return dimsTreeList; }
5、頁面請求樹
$(document).ready(function(){
$.get('<%=request.getContextPath()%>/user_role1', function(data){
console.info(data);
//zNodes = data;
zTreeObj = $.fn.zTree.init($("#dormitoryTree"), setting, data);
});
//console.info($.fn.zTree.getZTreeObj("dormitoryTree"));
//console.info(zTreeObj.getNodes());
});以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
