easyui treegrid 懒加载

张大教主

于 2017-07-12 20:08:43 发布

阅读量4.2k

点赞数

分类专栏： easyui 文章标签： easyui treegrid

本文链接：https://blog.youkuaiyun.com/u014074697/article/details/75040572

版权

本文介绍了如何使用EasyUI的TreeGrid实现懒加载功能。通过设置特定的参数和事件监听，如onBeforeExpand和onLoadSuccess，动态加载子数据。在onLoadSuccess中，当数据为空时，会添加一个占位行来保持列宽，并在数据加载完成后移除。同时，onBeforeExpand事件用于判断是否需要加载子数据，避免重复加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	$("#treedg").treegrid({
		idField:'ID',
		treeField:'tree_field',
		nowrap:false,
		fitColumns:(totalWidth>$(window).width()?false:true),
		width:$(window).width(),
		height:$(window).height(),
		rowStyler:rowStyler,
		onBeforeExpand:onBeforeExpand,
		onLoadSuccess: function(row,data){
            resetColor();
            /**easyui:datagrid,treegrid 当列数过大且未加载数据的情况下，超长列不显示，且无滚动条 ，
             * 以下为简易解决方案
             * */
            if(data.length==0){
            	$(this).treegrid('append',{parent:"",data:[{KPI_ID:"tempRow",COLOR_NUM:-1}]});//一定要给COLOR_NUM,否则行上会给默认颜色
            		$("tr[datagrid-row-index='0']").css({"visibility":"hidden"});
        	}
            else{
            	$("tr[datagrid-row-index='0']").remove();
            }
            
            /**初始加载，默认

最低0.47元/天解锁文章