easyui 扩展 之 Tree的simpleData加载

实例化。这里增加了三个属性,可以指定idFiled,textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。

$(function(){
	$(‘#tt3‘).tree({
		checkbox: true,
		url: ‘tree_data_simp.php‘,
		parentField:"pid",
		textFiled:"name",
		idFiled:"key"
	});
});

tree_data_simp.php 的json数据类型。是一个扁平结构数据集。

[
    {
        "key": 1,
        "name": "Folder1",
        "iconCls": "icon-ok"
    },
    {
        "key": 2,
		"pid": 1,
        "name": "File1",
        "checked": true
    },
    {
        "key": 3,
		"pid": 1,
        "name": "Folder2",
        "state": "open"
    },
    {
        "key": 4,
        "pid": 3,
        "name": "File3",
        "attributes": {
            "p1": "value1",
            "p2": "value2"
        },
        "checked": true,
        "iconCls": "icon-reload"
    },
    {
        "key": 8,
        "pid": 3,
        "name": "Async Folder"
    },
    {
        "key": 9,
        "name": "language",
        "state": "closed"
    },
    {
        "key": "j1",
        "pid": 9,
        "name": "Java"
    },
    {
        "key": "j2",
        "pid": 9,
        "name": "C#"
    }
]

自定义loadFilter的实现

$.fn.tree.defaults.loadFilter = function (data, parent) {
	var opt = $(this).data().tree.options;
	var idFiled,
	textFiled,
	parentField;
	if (opt.parentField) {
		idFiled = opt.idFiled || ‘id‘;
		textFiled = opt.textFiled || ‘text‘;
		parentField = opt.parentField;

		var i,
		l,
		treeData = [],
		tmpMap = [];

		for (i = 0, l = data.length; i < l; i++) {
			tmpMap[data[i][idFiled]] = data[i];
		}

		for (i = 0, l = data.length; i < l; i++) {
			if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
				if (!tmpMap[data[i][parentField]][‘children‘])
					tmpMap[data[i][parentField]][‘children‘] = [];
				data[i][‘text‘] = data[i][textFiled];
				tmpMap[data[i][parentField]][‘children‘].push(data[i]);
			} else {
				data[i][‘text‘] = data[i][textFiled];
				treeData.push(data[i]);
			}
		}
		return treeData;
	}
	return data;
};
时间: 2024-07-31 21:01:22

easyui 扩展 之 Tree的simpleData加载的相关文章

【EasyUI学习-2】Easyui Tree的异步加载

作者:ssslinppp       1. 摘要 easyui相关的介绍可以上其官网或者百度去搜索,这里不做介绍. Easyui Tree的使用,官网或者easyui中文网站,也有相关介绍,但是官方提供的实例所使用的json是写死的,不是后台实时读取的.在实际的项目中,要显示的tree数据,一般都是从数据库中读取,然后通过通过ajax或者其他技术将tree的json数据发送到前台,然后显示. 本文将介绍easyui tree的异步加载,以及手动展开tree. 2. tree的相关介绍 上图是一个

asp.net:easyui tree控件加载url数据

easyui tree控件加载url数据 建表 CREATE TABLE [dbo].[OrganizationStructure]( [Id] [int] IDENTITY(1,1) NOT NULL, [OwnerId] [int] NOT NULL, [Name] [nvarchar](100) NOT NULL, [Type] [int] NULL, CONSTRAINT [PK_OrganizationStructure] PRIMARY KEY CLUSTERED ( [Name]

IE浏览器中,JQuery EasyUI的form(&#39;load&#39;)方法只能加载一次的问题

项目中的页面用到了EasyUI,表单加载数据时,调用了form('load')方法.用Chrome.Firefox访问均没问题,可是用IE浏览器访问时,数据不论怎么修改,加载的都是第一次的数据.这疑似是一直在加载第一次的缓存.于是查资料发现,原来IE浏览器对Jquery EasyUI的支持不好,缓存了表单第一次加载的数据.以后每次加载时,都会从缓存中调用.于是在ajax方法中加入cache:false,取消缓存便解决了. 1 $.ajax({ 2 cache:false, //取消缓存 3 ur

【转】扩展easyUI tab控件,添加加载遮罩效果

在easyui下自己生成遮罩效果的方法 (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs("getSelected"); if (msg == undefined) { msg = "正在加载数据,请稍候..."; } $("<di

jquery.unobtrusive-ajax.js的扩展,做到片段式加载

1 //ajax支持库 2 /*! 3 ** Unobtrusive Ajax support library for jQuery 4 ** Copyright (C) Microsoft Corporation. All rights reserved. 5 */ 6 7 /*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitw

【EasyUI】使用Jquery.load动态加载时重新渲染

EasyUI重新渲染: $.parser.parse('#app'); // 重新渲染 #app 下的元素 添加个扩展方法(方便使用): 1 $.fn.extend({ 2 Load:function (url,fun) { 3 var $this = this; 4 $(this).load(url,function (resp,status,xhr) { 5 $.parser.parse($this); 6 fun(resp,status,xhr); 7 }); 8 } 9 }); 使用Lo

easyUI之datagrid大数据量加载慢的原因之我见

最近项目中使用了easyUI这个js展现层,说实话,展示效果还算不错,使用上也比较方便,但是让我头疼的就是datagrid的这个控件. 它的使用起始非常简单方便,而且提供的功能也比较全面,但是美中不足的就是,该控件在加载比较大的数据量时,渲染速度有点难以承受. 网上找了相关的解决方案,无外乎就是使用view. view这个东西说实话的确能起到改善datagrid的加载速度的问题,但是缺陷也比较多,网上有该缺陷描述,本人不在此说了. 还有一个提到的方案,就是修改 jquery-easyui-min

界面存在多个easyUI Combobox控件时,加载数据失败,或加载不正确

问题原因:当一个界面上有多个easyui ComboBox控件,且在界面加载时同时请求数据.由于数据是异步加载,会导致下拉数据源加载失败,或加载不正确(串数据). 方案一:不用在一开始设定url(data加载路径),在点击控价下拉按钮时再加载数据源. <td>处理类型:</td> <td><input id="handleType" name="handleType" panelHeight="auto"

easyui中的datagrid的数据加载的问题

我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird('loadData',data)就如同这样,我们是不能将最新的数据加载上的,表单加载的数据仍然是原来的数据,因为url还是原来的url,datagrid会按照原来的数据进行加载,这时候我们如果想要加载数据的时候可以使用$("#div").datagrid({url,"",