JQuery treegrid实现（基于dlshouwen.grid.v1.2.1二次开发）

最新推荐文章于 2021-06-24 03:30:28 发布
最新推荐文章于 2021-06-24 03:30:28 发布
阅读量333 收藏 1
点赞数
文章标签： php javascript json ViewUI
原文链接：https://my.oschina.net/wjggwm/blog/827248
版权

    因项目中需要使用到treegrid，虽然已经开源实现，但是都不是自己想要的那种，所以干脆拉起袖子，自己实现一个，因为已经使用了dlshouwen.grid，所以便在此基础上做了二次开发，使其支持treegrid，让他更完美。

实现：

1、zh-cn.js   做如下改造：

extraColumn : {
			open : '<i class="fa fa-plus"></i>',
			close : '<i class="fa fa-minus"></i>',
			carent_right : '<i style="cursor:pointer;font-size:18px;" class="treegrid fa fa-caret-right">&nbsp;</i>',
			carent_down : '<i style="cursor:pointer;font-size:18px;" class="treegrid fa fa-caret-down">&nbsp;</i>',
			carent_right_class : 'fa-caret-right',
			carent_down_class : 'fa-caret-down'
		}

2、为了保留原来的代码，所以重新复制一份dlshouwen.grid.js，改名为dlshouwen.grid.treegrid.js，并做如下改造：

defaultOptions.grid 新增如下参数（后面加了注释的为新增的参数）：

grid : {
			lang : 'en',
			ajaxLoad : true,
			loadAll : false,
			postParams : false,//是否传递参数,只在loadAll=true时有效
			isreload : false,//刷新时是否重新从服务器获取数据,只在loadAll=true时有效
			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],
			isTreeGrid : false,	//是否为treegrid
			isLeafColumn : '',	//是否叶子节点	column name
			indexKey : 'id',	//主键id column name,默认值为id
			iconColumn : '',	//icon图标 column name
			parentId :'parentId'//树展开时请求服务器发送parentId的参数名称，即服务器接收参数时的名称,当isTreeGrid为true时才会用到
		}

然后在constructGrid函数中添加如下代码：

if(gridReflectionObj.option.isTreeGrid)
					{
						//绑定treegrid显隐方法
						$('#dlshouwen_grid_'+gridId+' .treegrid').unbind('click').click(function(e){
							var dataNo = $(this).parent().parent().parent().attr('dataNo');
							var indexKey = $(this).parent().parent().attr('indexKey');
							var level = parseInt($(this).parent().parent().parent().attr('level'));
							if($(this).hasClass('fa-caret-right')){
								
								//执行ajax方法请求数据
								var url = gridReflectionObj.option.loadURL;
	                            var pager = new Object();
	                            pager.isExport = false;
	                            pager.pageSize = gridReflectionObj.pager.pageSize;
	                            pager.startRecord = gridReflectionObj.pager.startRecord;
	                            pager.nowPage = gridReflectionObj.pager.nowPage;
	                            pager.recordCount = gridReflectionObj.pager.recordCount?gridReflectionObj.pager.recordCount:-1;
	                            pager.pageCount = gridReflectionObj.pager.pageCount?gridReflectionObj.pager.pageCount:-1;
	                            pager.parameters = gridReflectionObj.parameters?gridReflectionObj.parameters:new Object();
	                            pager.fastQueryParameters = gridReflectionObj.fastQueryParameters?gridReflectionObj.fastQueryParameters:new Object();
	                            pager.advanceQueryConditions = (gridReflectionObj.advanceQueryParameter&&gridReflectionObj.advanceQueryParameter.advanceQueryConditions)?gridReflectionObj.advanceQueryParameter.advanceQueryConditions:new Array();
	                            pager.advanceQuerySorts = (gridReflectionObj.advanceQueryParameter&&gridReflectionObj.advanceQueryParameter.advanceQuerySorts)?gridReflectionObj.advanceQueryParameter.advanceQuerySorts:new Array();
	                            //清除自定义查询参数
	                            pager.parameters = {};
	                            pager.parameters[gridReflectionObj.option.parentId] = indexKey;
	                            var params = new Object();
	                            params.gridPager = JSON.stringify(pager);
	                            var lay;
	                            $.ajax({
	                                type:'post',
	                                url:url,
	                                data:params,
	                                contentType: "application/x-www-form-urlencoded; charset=utf-8",
	                                beforeSend: function(xhr) {xhr.setRequestHeader("__REQUEST_TYPE", "AJAX_REQUEST");lay = layer.load();},
	                                success:function(datas){
	                                	layer.close(lay);
	                                	datas = $.parseJSON(datas);
										if(datas.status == "401")
					            		{
					            			$(".page-content").empty();//清除该节点子元素
					            			layer.msg(datas.message, {icon : 0});
					            			return;
					            		}else if(datas.status == "403")
					            		{
					            			layer.confirm(datas.message, {
							                    icon : 3,
							                    title : '提示',
			                    				btn: ['重新登录','取消'] //按钮
							                }, function(index, layero) {
							                    window.location.href = sys.rootPath + datas.url;
							                });
					            		}
					            		//如果出错表示有可能是程序问题或高级查询方案配置有误
	                                    if(!datas.isSuccess){
	                                        $.fn.dlshouwen.grid.tools.toast($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].errors.ajaxLoadError, 'error', 5000);
	                                        gridReflectionObj.hideProcessBar();
	                                        return;
	                                    }
	                                    //构建treegrid表格
	                                    gridReflectionObj.constructTreeGrid(datas, dataNo, level);
	                                },
	                                error:function(XMLHttpRequest, textStatus, errorThrown){
	                                    layer.msg('加载失败...', {icon : 0});
	                                }
	                            });
	                            $(this).removeClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_right_class).addClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_down_class);
							}else if($(this).hasClass('fa-caret-down'))
							{
								//移除元素
								var datanum = dataNo+"_"+(level+1)+"_";
								$('tr[datano^="'+datanum+'"]').remove();
								$('tr[id^="dlshouwen_grid_'+gridId+'_extra_columns_'+datanum+'"]').remove();
								$(this).removeClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_down_class).addClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_right_class);
							}
						});
						
					}

上面代码中的constructTreeGrid函数定义如下：

//构建treegrid主体内容
				constructTreeGrid : function(datas, dataNo, level){
					
					//定义表格对象映像
					var gridReflectionObj = this;
					//处理原始数据集
					var tree_originalDatas = datas.exhibitDatas;
					
					//处理treegrid展现数据
					$.each(tree_originalDatas, function(index, item){
						//先移除，然后再添加
						var indexKey = item[gridReflectionObj.option.indexKey];
						if(gridReflectionObj.treegrid_exhibitDatas.hasOwnProperty(indexKey))
						{
							delete gridReflectionObj.treegrid_exhibitDatas[indexKey];
						}
						gridReflectionObj.treegrid_exhibitDatas[indexKey] = item;
					});
					
                    tree_originalDatas = tree_originalDatas ? tree_originalDatas : new Array();
                    //处理基础数据集
                    var tree_baseDatas = tree_originalDatas;
                    //获取展现数据集
                    var tree_exhibitDatas = tree_originalDatas;
                    //获取排序数据集备份
                    var tree_sortOriginalDatas = tree_originalDatas;
					//获取扩展列列头
					var extraColumnClass = gridReflectionObj.getExtraColumnClass();
					//构建表格行
					var gridContent = '';
					if(tree_exhibitDatas!=null){
						if(gridReflectionObj.sortParameter&&gridReflectionObj.sortParameter.columnId){
							if(gridReflectionObj.sortParameter.sortType!=0){
								tree_exhibitDatas = tree_exhibitDatas.sort(function(record1, record2){
									var value1 = record1[gridReflectionObj.sortParameter.columnId];
									var value2 = record2[gridReflectionObj.sortParameter.columnId];
									//数值比较
									if(!isNaN(value1)&&!isNaN(value2)){
										if(gridReflectionObj.sortParameter.sortType==1){
											return value1-value2;
										}
										if(gridReflectionObj.sortParameter.sortType==2){
											return value2-value1;
										}
									}
									//日期比较
									if(value1 instanceof Date&&value2 instanceof Date){
										if(gridReflectionObj.sortParameter.sortType==1){
											return value1.getTime()-value2.getTime();
										}
										if(gridReflectionObj.sortParameter.sortType==2){
											return value2.getTime()-value1.getTime();
										}
									}
									//普通比较
									if(value1!=null&&gridReflectionObj.sortParameter.sortType==1){
										return value1.localeCompare(value2);
									}
									if(value2!=null&&gridReflectionObj.sortParameter.sortType==2){
										return value2.localeCompare(value1);
									}
									return 0;
								});
							}else{
								tree_exhibitDatas = tree_sortOriginalDatas.slice(0, tree_sortOriginalDatas.length);
							}
						}
						for(var i=0; i<tree_exhibitDatas.length; i++){
							gridContent += '	<tr class="dlshouwen-grid-row" level="'+(level+1)+'" dataNo="'+dataNo+"_"+(level+1)+"_"+i+'">';
							if(gridReflectionObj.option.extraWidth!=null){
								gridContent += '	<td class="extra-column extra-column-event '+extraColumnClass+'" width="'+gridReflectionObj.option.extraWidth+'" dataNo="'+dataNo+"_"+i+'">'+$.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.open+'</td>';
							}else{
								gridContent += '	<td class="extra-column extra-column-event '+extraColumnClass+'" dataNo="'+dataNo+"_"+i+'">'+$.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.open+'</td>';
							}
							if(gridReflectionObj.option.check){
								if(gridReflectionObj.option.checkWidth!=null){
									gridContent += '	<td class="check-column text-center" width="'+gridReflectionObj.option.checkWidth+'"><input indexKey="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'" type="checkbox" dataNo="'+dataNo+"_"+i+'" id="dlshouwen_grid_'+gridReflectionObj.option.id+'_check_'+i+'" class="dlshouwen-grid-check" value="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'"></td>';
								}else{
									gridContent += '	<td class="check-column text-center"><input indexKey="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'" type="checkbox" dataNo="'+dataNo+"_"+i+'" id="dlshouwen_grid_'+gridReflectionObj.option.id+'_check_'+i+'" class="dlshouwen-grid-check" value="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'"></td>';
								}
							}
							var columns = gridReflectionObj.option.columns;
							var indent = 15*(level+1) +"px;";
							for(var j=0; j<columns.length; j++){
								if(columns[j].width!=null)
								{
									if(columns[j].id == gridReflectionObj.option.iconColumn)
									{
										gridContent += '	<td indexKey="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'" width="'+columns[j].width+'" dataNo="'+dataNo+"_"+i+'" columnNo="'+j+'" class="dlshouwen-grid-cell '+gridReflectionObj.getColumnClassForHide(columns[j])+' '+columns[j].columnClass+'" style="'+columns[j].columnStyle+'">';
									}else
									{
										gridContent += '	<td width="'+columns[j].width+'" dataNo="'+dataNo+"_"+i+'" columnNo="'+j+'" class="dlshouwen-grid-cell '+gridReflectionObj.getColumnClassForHide(columns[j])+' '+columns[j].columnClass+'" style="'+columns[j].columnStyle+'">';
									}
									
								}else{
									if(columns[j].id == gridReflectionObj.option.iconColumn)
									{
										gridContent += '	<td indexKey="'+tree_exhibitDatas[i][gridReflectionObj.option.indexKey]+'" dataNo="'+dataNo+"_"+i+'" columnNo="'+j+'" class="dlshouwen-grid-cell '+gridReflectionObj.getColumnClassForHide(columns[j])+' '+columns[j].columnClass+'" style="'+columns[j].columnStyle+'">';
									}else
									{
										gridContent += '	<td dataNo="'+dataNo+"_"+i+'" columnNo="'+j+'" class="dlshouwen-grid-cell '+gridReflectionObj.getColumnClassForHide(columns[j])+' '+columns[j].columnClass+'" style="'+columns[j].columnStyle+'">';
									}
								}
								var value = tree_exhibitDatas[i][columns[j].id];
								value = value==null?'':value;
								
								if(columns[j].resolution){
									value = columns[j].resolution(value, tree_exhibitDatas[i], columns[j], gridReflectionObj, i, j);
								}else{
									value = gridReflectionObj.formatContent(columns[j], value);
								}
								if(gridReflectionObj.option.isTreeGrid)
								{
									if(columns[j].id == gridReflectionObj.option.iconColumn)
									{
										if(!tree_exhibitDatas[i][gridReflectionObj.option.isLeafColumn])
										{
											value = $.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_right + value;
										}
										value = '<div style="overflow:hidden; padding-left:'+indent+'">' + value + '</div>';
									}
								}
								gridContent += value;
								gridContent += '	</td>';
							}
							gridContent += '	</tr>';
							gridContent += '	<tr level="'+(level+1)+'" id="dlshouwen_grid_'+gridReflectionObj.option.id+'_extra_columns_'+dataNo+"_"+(level+1)+"_"+i+'" class="dlshouwen-grid-extra-columns hidden">';
							gridContent += '		<td dataNo="'+dataNo+"_"+i+'" colspan="'+(columns.length+1+(gridReflectionObj.option.check?1:0))+'">';
							for(var j=0; j<columns.length; j++){
								if(columns[j].extra==false){
									continue;
								}
								gridContent += '		<p dataNo="'+dataNo+"_"+i+'" columnNo="'+j+'" class="dlshouwen-grid-cell '+gridReflectionObj.getExtraColumnClassForHide(columns[j])+'">';
								gridContent += '			'+columns[j].title+' : ';
								var value = tree_exhibitDatas[i][columns[j].id];
								value = value==null?'':value;
								if(columns[j].resolution){
									gridContent += columns[j].resolution(value, tree_exhibitDatas[i], columns[j], gridReflectionObj, i, j);
								}else{
									gridContent += gridReflectionObj.formatContent(columns[j], value);
								}
								gridContent += '		</p>';
							}
							gridContent += '		</td>';
							gridContent += '	</tr>';
						}
					}
					
					//备份gridId
					var gridId = gridReflectionObj.option.id;
					//如果有隐藏行，就添加到隐藏行后面，没有则添加在当前行下面
					if(!$('#dlshouwen_grid_'+gridId+'_extra_columns_'+dataNo))
					{
						$('.dlshouwen-grid-row[datano="'+dataNo+'"]').after(gridContent);
					}else
					{
						$('#dlshouwen_grid_'+gridId+'_extra_columns_'+dataNo).after(gridContent);
					}
					
					
					
					//绑定treegrid显示方法
					$('#dlshouwen_grid_'+gridId+' .treegrid').unbind('click').click(function(e){
						var dataNo = $(this).parent().parent().parent().attr('dataNo');
						var indexKey = $(this).parent().parent().attr('indexKey');
						var level = parseInt($(this).parent().parent().parent().attr("level"));
						if($(this).hasClass('fa-caret-right')){
							
							//执行ajax方法请求数据
							var url = gridReflectionObj.option.loadURL;
                            var pager = new Object();
                            pager.isExport = false;
                            pager.pageSize = gridReflectionObj.pager.pageSize;
                            pager.startRecord = gridReflectionObj.pager.startRecord;
                            pager.nowPage = gridReflectionObj.pager.nowPage;
                            pager.recordCount = gridReflectionObj.pager.recordCount?gridReflectionObj.pager.recordCount:-1;
                            pager.pageCount = gridReflectionObj.pager.pageCount?gridReflectionObj.pager.pageCount:-1;
                            pager.parameters = gridReflectionObj.parameters?gridReflectionObj.parameters:new Object();
                            pager.fastQueryParameters = gridReflectionObj.fastQueryParameters?gridReflectionObj.fastQueryParameters:new Object();
                            pager.advanceQueryConditions = (gridReflectionObj.advanceQueryParameter&&gridReflectionObj.advanceQueryParameter.advanceQueryConditions)?gridReflectionObj.advanceQueryParameter.advanceQueryConditions:new Array();
                            pager.advanceQuerySorts = (gridReflectionObj.advanceQueryParameter&&gridReflectionObj.advanceQueryParameter.advanceQuerySorts)?gridReflectionObj.advanceQueryParameter.advanceQuerySorts:new Array();
                            //清除自定义查询参数
                            pager.parameters = {};
                            pager.parameters[gridReflectionObj.option.parentId] = indexKey;
                            var params = new Object();
                            params.gridPager = JSON.stringify(pager);
                            var lay;
                            $.ajax({
                                type:'post',
                                url:url,
                                data:params,
                                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                                beforeSend: function(xhr) {xhr.setRequestHeader("__REQUEST_TYPE", "AJAX_REQUEST");lay = layer.load();},
                                success:function(datas){
                                	layer.close(lay);
                                	datas = $.parseJSON(datas);
									if(datas.status == "401")
				            		{
				            			$(".page-content").empty();//清除该节点子元素
				            			layer.msg(datas.message, {icon : 0});
				            			return;
				            		}else if(datas.status == "403")
				            		{
				            			layer.confirm(datas.message, {
						                    icon : 3,
						                    title : '提示',
		                    				btn: ['重新登录','取消'] //按钮
						                }, function(index, layero) {
						                    window.location.href = sys.rootPath + datas.url;
						                });
				            		}
                                     //如果出错表示有可能是程序问题或高级查询方案配置有误
                                    if(!datas.isSuccess){
                                        $.fn.dlshouwen.grid.tools.toast($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].errors.ajaxLoadError, 'error', 5000);
                                        gridReflectionObj.hideProcessBar();
                                        return;
                                    }
                                    //构建treegrid表格
                                    gridReflectionObj.constructTreeGrid(datas, dataNo, level);
                                },
                                error:function(XMLHttpRequest, textStatus, errorThrown){
                                    layer.msg('加载失败...', {icon : 0});
                                }
                            });
                            $(this).removeClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_right_class).addClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_down_class);
						}else if($(this).hasClass('fa-caret-down'))
						{
							//移除元素
							var datanum = dataNo+"_"+(level+1)+"_";
							$('tr[datano^="'+datanum+'"]').remove();
							$('tr[id^="dlshouwen_grid_'+gridId+'_extra_columns_'+datanum+'"]').remove();
							$(this).removeClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_down_class).addClass($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.carent_right_class);
						}
					});
					
					
					//绑定单元格单击方法
					if(gridReflectionObj.option.onCellClick){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').click(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellClick, this, e);
						});
					}
					//绑定单元格双击方法
					if(gridReflectionObj.option.onCellDblClick){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').dblclick(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellDblClick, this, e);
						});
					}
					//绑定单元格鼠标滑过方法
					if(gridReflectionObj.option.onCellMouseOver){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseover(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellMouseOver, this, e);
						});
					}
					//绑定单元格鼠标移动方法
					if(gridReflectionObj.option.onCellMouseMove){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mousemove(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellMouseMove, this, e);
						});
					}
					//绑定单元格鼠标滑出方法
					if(gridReflectionObj.option.onCellMouseOut){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseout(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellMouseOut, this, e);
						});
					}
					//绑定单元格鼠标按下方法
					if(gridReflectionObj.option.onCellMouseDown){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mousedown(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellMouseDown, this, e);
						});
					}
					//绑定单元格鼠标释放方法
					if(gridReflectionObj.option.onCellMouseUp){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseup(function(e){
							gridReflectionObj.bindCellEvent(gridReflectionObj.option.onCellMouseUp, this, e);
						});
					}
					//绑定行单击方法
					if(gridReflectionObj.option.onRowClick){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').click(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowClick, this, e);
						});
					}
					//绑定行双击方法
					if(gridReflectionObj.option.onRowDblClick){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').dblclick(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowDblClick, this, e);
						});
					}
					//绑定行鼠标滑过方法
					if(gridReflectionObj.option.onRowMouseOver){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseover(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowMouseOver, this, e);
						});
					}
					//绑定行鼠标移动方法
					if(gridReflectionObj.option.onRowMouseMove){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mousemove(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowMouseMove, this, e);
						});
					}
					//绑定行鼠标滑出方法
					if(gridReflectionObj.option.onRowMouseOut){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseout(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowMouseOut, this, e);
						});
					}
					//绑定行鼠标按下方法
					if(gridReflectionObj.option.onRowMouseDown){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mousedown(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowMouseDown, this, e);
						});
					}
					//绑定行鼠标释放方法
					if(gridReflectionObj.option.onRowMouseUp){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-cell').mouseup(function(e){
							gridReflectionObj.bindRowEvent(gridReflectionObj.option.onRowMouseUp, this, e);
						});
					}
					//绑定表头单击方法
					if(gridReflectionObj.option.onHeaderClick){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').click(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderClick, this, e);
						});
					}
					//绑定表头鼠标滑过方法
					if(gridReflectionObj.option.onHeaderMouseOver){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').mouseover(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderMouseOver, this, e);
						});
					}
					//绑定表头鼠标移动方法
					if(gridReflectionObj.option.onHeaderMouseMove){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').mousemove(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderMouseMove, this, e);
						});
					}
					//绑定表头鼠标滑出方法
					if(gridReflectionObj.option.onHeaderMouseOut){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').mouseout(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderMouseOut, this, e);
						});
					}
					//绑定表头鼠标按下方法
					if(gridReflectionObj.option.onHeaderMouseDown){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').mousedown(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderMouseDown, this, e);
						});
					}
					//绑定表头鼠标释放方法
					if(gridReflectionObj.option.onHeaderMouseUp){
						$('#dlshouwen_grid_'+gridId+' .dlshouwen-grid-header').mouseup(function(e){
							gridReflectionObj.bindHeaderEvent(gridReflectionObj.option.onHeaderMouseUp, this, e);
						});
					}
					//绑定表格单击方法
					if(gridReflectionObj.option.onGridClick){
						$('#dlshouwen_grid_'+gridId).click(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridClick, e);
						});
					}
					//绑定表格双击方法
					if(gridReflectionObj.option.onGridDblClick){
						$('#dlshouwen_grid_'+gridId).dblclick(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridDblClick, e);
						});
					}
					//绑定表格鼠标滑过方法
					if(gridReflectionObj.option.onGridMouseOver){
						$('#dlshouwen_grid_'+gridId).mouseover(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridMouseOver, e);
						});
					}
					//绑定表格鼠标移动方法
					if(gridReflectionObj.option.onGridMouseMove){
						$('#dlshouwen_grid_'+gridId).mousemove(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridMouseMove, e);
						});
					}
					//绑定表格鼠标滑出方法
					if(gridReflectionObj.option.onGridMouseOut){
						$('#dlshouwen_grid_'+gridId).mouseout(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridMouseOut, e);
						});
					}
					//绑定表格鼠标按下方法
					if(gridReflectionObj.option.onGridMouseDown){
						$('#dlshouwen_grid_'+gridId).mousedown(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridMouseDown, e);
						});
					}
					//绑定表格鼠标释放方法
					if(gridReflectionObj.option.onGridMouseUp){
						$('#dlshouwen_grid_'+gridId).mouseup(function(e){
							gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridMouseUp, e);
						});
					}
					//绑定表格加载完成方法
					if(gridReflectionObj.option.onGridComplete){
						gridReflectionObj.bindGridEvent(gridReflectionObj.option.onGridComplete);
					}
					//绑定显隐方法
					$('#dlshouwen_grid_'+gridId+' .extra-column-event').unbind('click').click(function(e){
						var dataNo = $(this).parent().attr('dataNo');
						if($('#dlshouwen_grid_'+gridId+'_extra_columns_'+dataNo).hasClass('hidden')){
							$('#dlshouwen_grid_'+gridId+'_extra_columns_'+dataNo).removeClass('hidden');
							$(this).html($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.close);
							//绑定扩展行展开方法
							if(gridReflectionObj.option.onExtraOpen){
								var row = $('#dlshouwen_grid_'+gridId+' tr[dataNo="'+dataNo+'"]');
								gridReflectionObj.bindExtraEvent(gridReflectionObj.option.onExtraOpen, row, e);
							}
						}else{
							$('#dlshouwen_grid_'+gridId+'_extra_columns_'+dataNo).addClass('hidden');
							$(this).html($.fn.dlshouwen.grid.lang[gridReflectionObj.option.lang].extraColumn.open);
							//绑定扩展行关闭方法
							if(gridReflectionObj.option.onExtraClose){
								var row = $('#dlshouwen_grid_'+gridId+' tr[dataNo="'+dataNo+'"]');
								gridReflectionObj.bindExtraEvent(gridReflectionObj.option.onExtraClose, row, e);
							}
						}
					});
					
					
					//绑定排序方法
					$('#dlshouwen_grid_'+gridId+' .can-sort').click(function(){
						//获取列编号
						var columnId = $(this).attr('columnId');
						//根据当前的排序参数设置显示的排序图标
						if(gridReflectionObj.sortParameter==null){
							gridReflectionObj.sortParameter = new Object();
						}
						if(!gridReflectionObj.sortParameter.columnId||gridReflectionObj.sortParameter.columnId!=columnId){
							gridReflectionObj.sortParameter.columnId = columnId;
							gridReflectionObj.sortParameter.sortType = 1;
						}else{
							var sortType = gridReflectionObj.sortParameter.sortType;
							if(sortType==0){
								gridReflectionObj.sortParameter.sortType = 1;
							}else if(sortType==1){
								gridReflectionObj.sortParameter.sortType = 2;
							}else if(sortType==2){
								gridReflectionObj.sortParameter.sortType = 0;
							}
						}
						//重新加载数据
						gridReflectionObj.reload();
					});
					//绑定复选方法
					if(gridReflectionObj.option.onCheck){
						$('input[id*=dlshouwen_grid_'+gridId+'_check_]').click(function(e){
							gridReflectionObj.bindCheckEvent(gridReflectionObj.option.onCheck, this, e);
						});
					}
					//绑定复选方法（全选反选）
					if(gridReflectionObj.option.check){
						$('#dlshouwen_grid_'+gridId+'_check').click(function(e){
							$('input[id*=dlshouwen_grid_'+gridId+'_check_]').prop('checked', this.checked);
							if(gridReflectionObj.option.onCheck){
								$('input[id*=dlshouwen_grid_'+gridId+'_check_]').each(function(){
									gridReflectionObj.bindCheckEvent(gridReflectionObj.option.onCheck, this, e);
								});
							}
						});
					}
				}

鉴于篇幅问题，还有很多细节这里就不一一贴了，可以参考实例项目查看和使用，使用时只需把dlshouwen.grid.min.js替换为dlshouwen.grid.treegrid.min.js即可，然后在需要使用的地方进行相应的配置即可：

var dtGridOption = {
    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]
};

最后上个图，有图有真相嘛！

实例项目地址：http://www.oschina.net/p/webside

treegrid代码提供原始版和压缩版，代码均在上面的项目中，请自行下载查看，这里不再单独提供。

祝好！

转载于:https://my.oschina.net/wjggwm/blog/827248

chiguyue2107
关注
JQuery-Jquery的TreeGrid插件
六月心悸
11-02 1万+
学习权限管理时，有用到treeGrid插件显示角色的菜单资源，所以就有兴趣学习下。 效果图： TreeGrid页面数据显示结构： table结构 data.js var dataSet=[ {name:"福建省",code:"FJS",children:[ {name: "福州市", code: "china", assignee: "ld",
jquery.treegrid.min.js
04-06
jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js
dlshouwen.grid
07-19
大连首闻 Grid(DLShouWen Grid、原DT Grid)是一款由 大连首闻科技有限公司 自主研发的基于 MIT开源协议 的响应式表格控件,拥有跨浏览器支持、程序思路清晰、功能强...
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
html oload多个函数,DLShouWen Grid
weixin_35869703的博客
06-24 236
部署基础文件引入我们为您推荐的javascript文件和css文件的引用顺序如下：语言文件引入将i18n文件夹中您所需要的语言文件引入到dlshouwen.grid.js文件下方即可。对象实例化您可以使用如下代码对DLShouWen Grid对象进行对象实例化，实例化后的对象将支持众多方法，具体的实例化参数及相关方法请查阅后续参考文档。//映射内容var sex = {1:'男', 2:'女'};...
基于jquery的树形列表TreeGrid
vv
09-02 7108
展示树列表，左边是树，右边是表 - 提供勾选框，可以通过接口获取选中数据 - 每个子列表都有自己的分页器 - 支持本地数据展示，和远程数据延迟加载 - 每个值可以有自身的转换器formatter - 支持行单击事件 - 支持拖拽改变列宽
jquery.treegrid.async.js
05-15
使用Bootstrap-table和JQuery TreeGrid插件展示树形表格，实现异步加载大数据量。
jquery.treegrid.extension.js
08-14
扩展jquery.treegrid.extension.js，实现jquery-treegrid的懒加载，结合jquery.cookie.js来实现缓存，减缓页面大量数据加载
jquery-treegrid 树形表格组件
12-25
<link rel="stylesheet" href="jquery.treegrid.css"> <script src="jquery.js"> <script src="jquery.treegrid.js"> <th data-field="id">ID 名称 大小 <!-- 数据行 --> $(function() { ...
表格树jquery插件GridTree配置说明
竹林幽深
09-08 3009
2011新年版本表格树新加的配置属性：    下载地址：http://renjie120.javaeye.com/blog/894183  （在此javseye贴后面回帖讨论！） 1.lazyPageSize:进行懒加载分页以及懒加载缓存显示的每页页数，默认为10 2.lazyPage:设置为true表示使用懒加载分页，即在除了第一层进行默认的表格树分页之外，在子树的层次也进行分页，具体
TreeGrid，实现Tree的Grid列表
03-16
TreeGrid，实现Tree的Grid列表
jquery treegrid实例
瓶子里的小地盘
07-20 5027
function organDatagrid(){ $organ_treegrid = $('#organ_treegrid').treegrid({ url:ctx+'/petition/petition-info/organ-datagrid', fit:true, fitColumns:false,//自适应列宽 striped:true,//显示条纹
Jquery的树形表格插件-treetable
yanfeng918的专栏
09-18 9487
首先，表明一下几个低级错误：1.这个插件是基于Jquery的，
jqGrid JS之TreeGrid (树形表格)- yellowcong
热门推荐
08-02 2万+
JqGrid的版本是jqGrid JS - v5.1.0，然后根据中文的API，咋整都没有弄出来，当时真是心累啊，主要注意的有id隐藏列定义、Grid数据定义（注意parent、id的数据类型以及Grid数据格式），Grid的数据设定
jqgrid——treegrid动态异步加载数据
赶路人儿
11-11 1万+
jqgrid的treegrid插件，有两种数据结构： 1、
dtGrid基于bootstrap的表格
我是小妖怪,潇洒又自在
03-04 7319
dtGrid基于bootstrap的表格、DTGrid基于bootstrap的表格、大连首闻DTGrid
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值