您好,登錄后才能下訂單哦!
使用高級zTree進行對屬性結構進行操作的時候,做好的方式是參考官網的API文檔。
本文簡單介紹下如何通過后臺傳遞過來一個樹形結構的樹,并且通過頁面進行加載。
【與后臺交互步驟】1、編寫頁面,引入zTree相關插件;2、編寫js腳本,設定樹形結構的基本屬性;3、編寫zTree的PO對象;4、編寫返回屬性結構的方法(json格式返回);5、頁面請求樹。
1、引入zTree相關的插件:
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/css/bootstrap.min.css" > <script type="text/javascript" src="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- 引入zTree相關的js/css文件 --> <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/ztree/zTreeStyle/zTreeStyle.css" > <script type="text/javascript" src="<%=request.getContextPath() %>/resources/ztree/jquery.ztree.all.js"></script>
2、編寫js腳本,設定樹形結構的基本屬性
// zTree 的參數配置,深入使用請參考 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){ //將角色的樹形結構清楚 $.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; //樹形結構展示的名稱 private String name; //是否打開屬性 private String open; //是否根節點 private boolean isParent; //url private String url; //子節點 private List<DimsTree> children; //是否被選中 private boolean checked; //省略gettings和settings方法 }
4、編寫返回屬性結構的方法(json格式返回)
@ResponseBody @RequestMapping(value="/user_role1") public List<DimsTree> userRole1(Model model){ //宿舍信息Tree List<DimsTree> dimsTreeList = new ArrayList<DimsTree>(); //加載用戶信息列表,手鏈需要加載宿舍信息,將用戶信息加入到宿舍信息中. List<Dormitory> dormitoiryList = dormitoryDao.list(); for(Dormitory dorm: dormitoiryList){ DimsTree dt = new DimsTree(); dt.setName(dorm.getDormCode()); dt.setParent(true);//根節點 dt.setObjCode(dorm.getDormCode()); dt.setChildren(employee2DimsTree(dorm)); dimsTreeList.add(dt); } model.addAttribute(dimsTreeList); //加載角色信息列表,對已經選中的角色進行設置checked=true屬性。 //這個應該設置成異步加載的方式,根據不同的用戶查詢不同的角色信息. logger.info("-------------->"+dimsTreeList); return dimsTreeList; // return "other/user_role"; } /** * 根據宿舍,查詢宿舍下的成員 * @param dorm * @return */ public List<DimsTree> employee2DimsTree(Dormitory dorm){ //這個應該是在service層進行實現得 String sql = "select * from t_employee t where t.dorm_code = ?"; logger.info("----------->查詢人員宿舍信息參數:"+dorm.getDormCode()); List<Employee> employeeList = employeeDao.listBySql(sql, new Object[]{dorm.getDormCode()}); List<DimsTree> dimsTreeList = new ArrayList<DimsTree>(); 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()); });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。