jquery樹(shù)形插件zTree高級(jí)使用詳解
使用高級(jí)zTree進(jìn)行對(duì)屬性結(jié)構(gòu)進(jìn)行操作的時(shí)候,做好的方式是參考官網(wǎng)的API文檔。
本文簡(jiǎn)單介紹下如何通過(guò)后臺(tái)傳遞過(guò)來(lái)一個(gè)樹(shù)形結(jié)構(gòu)的樹(shù),并且通過(guò)頁(yè)面進(jìn)行加載。
【與后臺(tái)交互步驟】1、編寫(xiě)頁(yè)面,引入zTree相關(guān)插件;2、編寫(xiě)js腳本,設(shè)定樹(shù)形結(jié)構(gòu)的基本屬性;3、編寫(xiě)zTree的PO對(duì)象;4、編寫(xiě)返回屬性結(jié)構(gòu)的方法(json格式返回);5、頁(yè)面請(qǐng)求樹(shù)。
1、引入zTree相關(guān)的插件:
<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相關(guān)的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、編寫(xiě)js腳本,設(shè)定樹(shù)形結(jié)構(gòu)的基本屬性
// zTree 的參數(shù)配置,深入使用請(qǐng)參考 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){ //將角色的樹(shù)形結(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、編寫(xiě)zTree的PO對(duì)象
public class DimsTree { //除了樹(shù)本身的屬性,還可以自定義屬性. private Object objCode; //樹(shù)形結(jié)構(gòu)展示的名稱(chēng) private String name; //是否打開(kāi)屬性 private String open; //是否根節(jié)點(diǎn) private boolean isParent; //url private String url; //子節(jié)點(diǎn) private List<DimsTree> children; //是否被選中 private boolean checked; //省略gettings和settings方法 }
4、編寫(xiě)返回屬性結(jié)構(gòu)的方法(json格式返回)
@ResponseBody @RequestMapping(value="/user_role1") public List<DimsTree> userRole1(Model model){ //宿舍信息Tree List<DimsTree> dimsTreeList = new ArrayList<DimsTree>(); //加載用戶(hù)信息列表,手鏈需要加載宿舍信息,將用戶(hù)信息加入到宿舍信息中. List<Dormitory> 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); //加載角色信息列表,對(duì)已經(jīng)選中的角色進(jìn)行設(shè)置checked=true屬性。 //這個(gè)應(yīng)該設(shè)置成異步加載的方式,根據(jù)不同的用戶(hù)查詢(xún)不同的角色信息. logger.info("-------------->"+dimsTreeList); return dimsTreeList; // return "other/user_role"; } /** * 根據(jù)宿舍,查詢(xún)宿舍下的成員 * @param dorm * @return */ public List<DimsTree> employee2DimsTree(Dormitory dorm){ //這個(gè)應(yīng)該是在service層進(jìn)行實(shí)現(xiàn)得 String sql = "select * from t_employee t where t.dorm_code = ?"; logger.info("----------->查詢(xún)?nèi)藛T宿舍信息參數(shù):"+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、頁(yè)面請(qǐng)求樹(shù)
$(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()); });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery樹(shù)形插件jquery.simpleTree.js用法分析
- jQuery 利用ztree實(shí)現(xiàn)樹(shù)形表格的實(shí)例代碼
- jQuery EasyUI結(jié)合zTree樹(shù)形結(jié)構(gòu)制作web頁(yè)面
- jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹(shù)形多選菜單
- jQuery樹(shù)形控件zTree使用小結(jié)
- jQuery使用zTree插件實(shí)現(xiàn)樹(shù)形菜單和異步加載
- jQuery zTree加載樹(shù)形菜單功能
- jquery ztree實(shí)現(xiàn)下拉樹(shù)形框使用到了json數(shù)據(jù)
相關(guān)文章
完美解決jQuery符號(hào)$與其他javascript 庫(kù)、框架沖突的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決jQuery符號(hào)$與其他javascript 庫(kù)、框架沖突的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jQuery 獲取跨域XML(RSS)數(shù)據(jù)的相關(guān)總結(jié)分析
下面小編就為大家?guī)?lái)一篇jQuery 獲取跨域XML(RSS)數(shù)據(jù)的相關(guān)總結(jié)分析。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05推薦11款jQuery開(kāi)發(fā)的復(fù)選框和單選框美化插件
web開(kāi)發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的,因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。2011-08-08jQuery Selectors(選擇器)的使用(九、表單對(duì)象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門(mén),后進(jìn)階!2009-12-12