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; width: 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

	            });

			}

		});

	};
巴特西

jsTree checkbox plugin使用笔记

最新文章

热门文章
