zoukankan      html  css  js  c++  java
  • jsTree checkbox plugin使用笔记

    引入css文件
    <link rel="stylesheet" type="text/css" href="js/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
    引入js文件
    <script type="text/javascript" src="js/assets/global/plugins/jstree/dist/jstree.min.js"></script>
    
    前端放一个div用来做为tree的容器
    <div style="overflow-y: auto; overflow-x: auto;  100%; height: 534px;" id="jstree_bsbm_div"></div>
    
            //构造树型结构
    	var handleTree = function() {
    
    		getTreeData();
    		$("#jstree_bsbm_div").on('select_node.jstree', function(node,selected,event) {
    			  //绑定选中事件处理函数
    			  id = selected.node.id;
    			  parent = selected.node.parent;
    			  jc = selected.node.original.jc;
    //			  jcMax = selected.node.original.jcMax;
    //			  gz = selected.node.original.gz;
    			  freshtable();
    		}).on('refresh.jstree', function(node,selected,event) {
    			  //刷新事件处理函数
    			getTreeData();
    		});
    	};
    	
    	//获取树形数据
    	var getTreeData = function(){
    		var aData = {
            		type: "2",
            		roledm: roledm,
            }
    		$.ajax({
    			type : "POST",
    			url : "basic/getQxTree",
    			dataType : "json",
    			contentType : 'application/json', //定义格式
                data : JSON.stringify(aData), //把json转为String传递给后台
    			success : function(data) {
    //				var data = [
    //			        { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" ,'state' : {'selected' : true}},
    //			        { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" ,'state' : {'selected' : true}},
    //			        { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" ,'state' : {'selected' : false}},
    //			        { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" ,'state' : {'selected' : true}},
    //			    ];
    
    
    				$('#jstree_bsbm_div').data('jstree', false).empty();
    				$("#jstree_bsbm_div").jstree({
    					'core': {
    	                    'data': data,
    	                },
    	                plugins: [ "wholerow", "checkbox","types","themes"],
    	                "checkbox": {
    	                    "keep_selected_style": false,//是否默认选中
    	                },
    				})
    				
    				// 获取树
    			    var menuTrees = $('#jstree_bsbm_div').jstree(true);
    			    // 清空级联关系
    			    var oldCascade = menuTrees.settings.checkbox.cascade;
    			    menuTrees.settings.checkbox.cascade = '';
    			    // 重置级联关系
    			    setTimeout(function () {
    			        menuTrees.settings.checkbox.cascade = oldCascade;
    			    }, 500);
    
    			},	
    			error : function(e) {
    	        	Metronic.alert({
    	                type: 'danger',
    	                icon: 'warning',
    	                message: '树形数据获取失败!',
    	                place: 'prepend',
    	                closeInSeconds:5,
    	                container:'#profileAlertsMsg',
    	                focus:true
    	            });
    			}
    		});
    	};
    
  • 相关阅读:
    VMware vSphere 服务器虚拟化之二十四 桌面虚拟化之手动池管理物理机
    重思人性自我修养
    初窥Linux 之 数据流重定向
    MTD设备驱动
    wubi安装ubuntu后,增加swap大小,优化swap的使用参数-----------让ubuntu健步如飞,为编译android源码准备
    【deep learning学习笔记】最近读的几个ppt(四)
    computer专业术语总结
    弃用个人博客站重返CSDN缘由
    Hadoop1.0.4伪分布式安装
    谈谈我2013上半年在公司内部培训的经历
  • 原文地址:https://www.cnblogs.com/sunBinary/p/11083339.html
Copyright © 2011-2022 走看看