如何在PHP中页面加载时折叠树视图 [英] How to collapse a tree view on page load in PHP

问题描述

您好，

我有一个树形视图，可以动态地创建节点。例如，有90个节点将在页面加载时进行生成。我面临的问题是树视图扩展了几分之一秒然后崩溃。生成项目时如何避免扩展页面加载？请帮忙解决这个问题。



我尝试过：



********************* Javascript COde ************************** ******************

Hello,
I have a tree view that genarates nodes dynamically. For example, there are 90 nodes which will be genarated on page load. The problem i face is the tree view expands for a fraction of seconds and then gets collapsed. How to avoid expanding on page load when the items are generated? Please help in resolving this issue.

What I have tried:

*********************Javascript COde********************************************

// Endless tree structured UL > LI > UL 

$.extend($.expr[":"], {
	"containsIN" : function(elem, i, match, array) {
		return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});

var treefilter = function(el, options) {

	var defaults = {
		offsetLeft : 20, // left offset for each level
		searcher : null, // search input field
		expanded : false, // if true, your list will be show with expanded.
		multiselect : false // multiselect.
	};

	// Public Variables
	var plugin = this;
	var status = []; // save folder status for "var memory"

	plugin.settings = {};

	// Main Function
	var init = function() {
		plugin.settings = $.extend({}, defaults, options);
		plugin.el = el;

		// set class names to tags
		el.addClass("tf-tree");
		el.find("li").addClass("tf-child-true");
		el.find("li").css("padding-left", plugin.settings.offsetLeft);
		el.find("li div:only-child").parent().removeClass("tf-child-true");
		el.find("li div:only-child").parent().addClass("tf-child-false");

		// if the list has a checkbox, block event bubbling.
		el.find("input[type=checkbox]").click(function(e) {
			e.stopPropagation();
		});

		// set click event.
		el.find("li.tf-child-true").children("div").click(function(e) {
			if (e.metaKey || e.ctrlKey) {
				if ($(this).parent().hasClass("tf-open")) {
					$(this).parent().find("li.tf-child-true").removeClass("tf-open");
				} else {
					$(this).parent().find("li.tf-child-true").addClass("tf-open");
				}
			}
			$(this).parent().toggleClass("tf-open");
		});

		// toggle effect when multiselect enabled.
		el.find("li.tf-child-false").click(function() {
			if (plugin.settings.multiSelect != true) {
				el.find("li.tf-selected").removeClass("tf-selected");
			}
			$(this).toggleClass("tf-selected");
		});

		if (plugin.settings.searcher) {
			searcher();
		}
	};

	// PUBLIC METHOD
	plugin.openAll = function() {
		plugin.el.find("li.tf-child-true").parent().addClass("tf-open");
	};
	plugin.closeAll = function() {
		plugin.el.find("li.tf-child-true").parent().removeClass("tf-open");
	};

	// PRIVATE FUNCTION
	// fired when type on search input field.
	var searcher = function() {
		$(plugin.settings.searcher).keyup(function() {
			if ($(this).val().length == 0) {
				plugin.el.find(".tf-search-result").removeClass("tf-search-result");
				memory("out", status);
			} else {
				plugin.closeAll();
				plugin.el.find("li.tf-open").removeClass("tf-open");
				plugin.el.find("li.tf-search-result").removeClass("tf-search-result");
				plugin.el.find("li:containsIN('" + $(this).val() + "')").addClass("tf-search-result");
				plugin.el.find("li.tf-search-result").parent().addClass("tf-search-result");
			}
		});
		$(plugin.settings.searcher).keydown(function() {
			if ($(this).val().length == 0) {
				memory("in", status);
			}
		});
	};
	
	// save current status of folder 
	// action : string "in" / "out"
	// array : array that saves current status
	// list : el
	var memory = function(action) {
		if (action == "in") {
			status = [];
			plugin.el.find("li").each(function() {
				status.push($(this).hasClass("tf-open"));
			});
		} else if (action == "out") {
			plugin.el.find("li").each(function(i) {
				if (status[i]) { 
					$(this).addClass("tf-open");
				} else {
					$(this).removeClass("tf-open");
				}
			});
		}
	}

	init();
};

推荐答案

.extend（

.expr [： ]，{
containsIN：function（elem，i，match，array）{
return（elem.textContent || elem.innerText ||）。toLowerCase（）。indexOf（（match [3] ||）。toLowerCase（））> = 0;
}
}）;

var treefilter = function（el，options）{

var defaults = {
offsetLeft：20，//每个级别的左偏移量
搜索者：null，//搜索输入字段
展开：false，//如果为true，则列表将显示为已展开。
multiselect：false // multiselect。
};

//公共变量
var plugin = this;
var status = []; //保存var memory的文件夹状态

plugin.settings = {};

//主函数
var init = function（）{
plugin.settings =

.expr[":"], { "containsIN" : function(elem, i, match, array) { return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } }); var treefilter = function(el, options) { var defaults = { offsetLeft : 20, // left offset for each level searcher : null, // search input field expanded : false, // if true, your list will be show with expanded. multiselect : false // multiselect. }; // Public Variables var plugin = this; var status = []; // save folder status for "var memory" plugin.settings = {}; // Main Function var init = function() { plugin.settings =

.extend（{}，默认值，选项）;
plugin.el = el;

//将类名设置为标签
el.addClass（tf-tree）;
el.find（li）。addClass（tf-child-true）;
el.find（li）。css（padding-left，plugin.settings.offsetLeft）;
el.find（li div：only-child）。parent（）。removeClass（tf-child-true）;
el.find（li div：only-child）。parent（）。addClass（tf-child-false）;

//如果列表中有一个复选框，则阻止事件冒泡。
el.find（input [type = checkbox]）。click（function（e）{
e.stopPropagation（）;
}）;

//设置点击事件。
el.find（li.tf-child-true）。children（div）。click（function（e）{
if（e.metaKey || e.ctrlKey）{
if（

.extend({}, defaults, options); plugin.el = el; // set class names to tags el.addClass("tf-tree"); el.find("li").addClass("tf-child-true"); el.find("li").css("padding-left", plugin.settings.offsetLeft); el.find("li div:only-child").parent().removeClass("tf-child-true"); el.find("li div:only-child").parent().addClass("tf-child-false"); // if the list has a checkbox, block event bubbling. el.find("input[type=checkbox]").click(function(e) { e.stopPropagation(); }); // set click event. el.find("li.tf-child-true").children("div").click(function(e) { if (e.metaKey || e.ctrlKey) { if (

这篇关于如何在PHP中页面加载时折叠树视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！