treegrid

一、介绍：

• treegrid是基于dlshouwen.grid.v1.2.1二次开发而来的，支持分页，自定义参数查询，ajax异步加载数据，响应式等众多特性，所以使用方式和grid基本一样，只不过多了几个参数而已，仔细看过示例后，就明白了，treegrid主要是新增了几个参数，具体如下：

grid : {
			lang : 'en',
			ajaxLoad : true,
			loadAll : false,
			loadURL : '',
			datas : null,
			extraWidth : null,
			check : false,
			checkWidth : null,
			tableStyle : '',
			tableClass : 'table table-bordered table-hover table-responsive',
			showHeader : true,
			gridContainer : 'gridContainer',
			toolbarContainer : 'gridToolBarContainer',
			tools : 'refresh|fastQuery|advanceQuery|export[excel,csv,pdf,txt]|print',
			exportFileName : 'datas',
			exportURL : '/grid/export',
			pageSize : 20,
			pageSizeLimit : [20, 50, 100],
			postParams : false,//是否传递参数,只在loadAll=true时有效
			isreload : false,//刷新时是否重新从服务器获取数据,只在loadAll=true时有效
			isTreeGrid : false,	//是否为treegrid方式初始化表格
			isLeafColumn : '',	//是否叶子节点列名，即服务端查询的数据中哪一列用来判断该行数据是否含有子节点,当isTreeGrid为true时，该属性为必填项
			indexKey : 'id',	//主键id列，即树展开时取哪一列的值做为父节点的id传到服务端,默认值为id,当isTreeGrid为true时，该属性为必填项
			iconColumn : '',	//icon图标列名，表示在哪一列做为树节点，即添加树展开、合并图标,当isTreeGrid为true时，该属性为必填项
			parentId :'parentId'//树展开时请求服务器发送parentId的参数名称，即服务器接收参数时的名称,当isTreeGrid为true时，该属性为必填项
		}

上面代码中添加了注释的地方就是新增的几个参数，参数作用注释中已有，不再多做解释，下面主要看下如何使用。

二、使用方式：

1、文件引入：

<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/dlshouwen.grid.v1.2.1/dlshouwen.grid.min.css" />
<script type="text/javascript" src="${ctx}/resources/js/dlshouwen.grid.v1.2.1/dlshouwen.grid.treegrid.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/dlshouwen.grid.v1.2.1/i18n/zh-cn.js"></script>

2、初始化表格

var treeGridOption = {
    lang : 'zh-cn',
    ajaxLoad : true,
    check : true,
    checkWidth :'37px',
    extraWidth : '37px',
    isTreeGrid : true,
    isLeafColumn : 'isLeaf',
    iconColumn : 'name',
    indexKey : 'id',//主键id 列名,默认值为id
    parentId : 'parentId',//默认值为'parentId'
    loadURL : sys.rootPath + '/resource/listGrid.html',
    columns : dtGridColumns,
    gridContainer : 'dtGridContainer',
    toolbarContainer : 'dtGridToolBarContainer',
    tools : 'refresh|print',
    exportFileName :'资源信息',
    pageSize : pageSize,
    pageSizeLimit : [10, 20, 30]
};
var grid = $.fn.dlshouwen.grid.init(treeGridOption);

如上进行表格option配置，然后进行初始化即可。

3、服务端配置

@RequestMapping("listGrid.html")
	@ResponseBody
	public Object listTree(String gridPager) throws Exception{
		Map<String,Object> parameters = null;
		// 映射Pager对象
		Pager pager = JSON.parseObject(gridPager, Pager.class);
		// 判断是否包含自定义参数
		parameters = pager.getParameters();
		if (parameters.size() < 0) {
			parameters.put("name", null);
			parameters.put("parentId", null);
		}else if(!parameters.containsKey("name"))
		{
			parameters.put("name", null);
		}
		Page<Object> page = null;
		if(null == parameters.get("parentId") || "".equals(parameters.get("parentId")))
		{
			// 设置分页，page里面包含了分页信息
			page = PageHelper.startPage(pager.getNowPage(),pager.getPageSize(), "s_id DESC");
		}
		List<ResourceEntity> list = resourceService.queryTreeGridListByPage(parameters);
		parameters.clear();
		parameters.put("isSuccess", Boolean.TRUE);
		if(null != page)
		{
			parameters.put("nowPage", pager.getNowPage());
			parameters.put("pageSize", pager.getPageSize());
			parameters.put("pageCount", page.getPages());
			parameters.put("recordCount", page.getTotal());
			parameters.put("startRecord", page.getStartRow());
		}
		//列表展示数据
		parameters.put("exhibitDatas", list);
		return parameters;
	}

• 服务端主要判断列表是首次加载，还是节点展开加载，使用请求参数parentId（即表格初始化时配置的参数parentId : 'parentId',//默认值为'parentId'）进行判断，如果首次加载，则parentId为null，如果是节点展开加载数据，则parentId不为null。

4、页面展现效果，有图有真相

三、说明：

• 此插件为开源免费，如需咨询和技术帮助，请加群后单独联系作者，谢谢。