展示效果：

 

datagrid绑定：

$('#id').datagrid({        fit: true,        view: transposedview,        headerTextAlign: "center",        headerWidth: 100,         itemWidth: 200,        title: title,        fitColumns: false,        border: true,        singleSelect: true,        collapsible: false,        scrollbarSize: 0,        url: ajaxUrl,        method: 'get',        queryParams: params,        columns: cols,        pagination: pagination,        onClickRow: clickRow,        onSelect: selectRow,        onLoadSuccess: loadSuccess,        onLoadError: function () {        }    });

　　插件代码：

//----------------------------------------------------////实现 datagrid 竖排显示////----------------------------------------------------//var transposedview = $.extend({}, $.fn.datagrid.defaults.view, {	render: function(target, container, frozen){			$('.datagrid-view1', $(target).parent()).css('display', 'none');				var state = $.data(target, 'datagrid');		var opts = state.options;		if (frozen){			if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){				return;			}		}				var rows = state.data.rows;		var fields = $(target).datagrid('getColumnFields', frozen);		var table = [];		table.push('
     
      
       '+rownumber+'
      
');			}			table.push('
     
     
      ');				if (opts.showHeader) {					var attr = '';					if (col.rowspan) attr += 'rowspan="' + col.rowspan + '" ';					if (col.colspan) attr += 'colspan="' + col.colspan + '" ';					table.push('
     
     
      ');					table.push('
      
       ');					if (col.checkbox){						if (selected){							table.push('
       ');						} else {							table.push('
       ');						}					} else if (col.formatter){						table.push(col.formatter(row[field], row, i));					} else {						table.push(row[field]);					}					table.push('
      
');					table.push('');				}				table.push('
     
     
       ');		if (opts.rownumbers){			table.push('
        ');			if (opts.showHeader) {				table.push('
');			}			for(var i=0; i
');		}		for(var j=0; j
');				}				for(var i=0; i
');			}		}		table.push('
         
          
         
');					} else if (col.field){						table.push(' field="' + col.field + '">
         
          ' + col.title + '
           
         
');					} else {						table.push('>
         
          ' + col.title + '
         
');					}					table.push('
');				$(container).html(table.join(''));				var fieldCount = fields.length;		for(var j=0; j
     
       0){			selectedRows.pop();		}	},	getSelected: function(target){		var opts = $.data(target[0], 'datagrid').options;		var grid = $.data(target[0], 'datagrid').grid;		var data = $.data(target[0], 'datagrid').data;		if (opts.idField){			return $.data(target[0], 'datagrid').selectedRows;		}		var rows = [];		$('.datagrid-view2 .datagrid-body tr.datagrid-row-selected', grid).each(function(){			var index = parseInt($(this).attr('datagrid-row-index'));			if (data.rows[index]){				rows.push(data.rows[index]);			}		});		var addedIndex = [];		$('.datagrid-view2 .datagrid-body div.datagrid-row-selected', grid).each(function(){			var index = parseInt($(this).attr('datagrid-row-index'));			var found = false;			for (var i = 0; i < addedIndex.length; i++) {				if (addedIndex[i] == index) {					found = true;					break;				}			}			if (data.rows[index] && !found){				rows.push(data.rows[index]);				addedIndex.push(index);			}		});		return rows.length>0 ? rows[0] : null;	}});
     

　　有疑问可评论留言。。。