【EasyUI】 datagrid 竖排绑定数据

展示效果：

 

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('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
		if (opts.rownumbers){
			table.push('<tr>');
			if (opts.showHeader) {
				table.push('<td class="datagrid-header"></td>');
			}
			for(var i=0; i<rows.length; i++) {
				var row = rows[i];
				var selected = row == $(target).datagrid('getSelected');
				var rownumber = i+1;
				if (opts.pagination){
					rownumber += (opts.pageNumber-1)*opts.pageSize;
				}
				if (frozen){
					table.push('<td><div class="datagrid-cell-rownumber datagrid-cell-height');
				} else {
					table.push('<td><div class="datagrid-cell-rownumber');
				}
				if (selected == true){
					table.push(' datagrid-row-selected');
				} else {
					if (i % 2 && opts.striped){
						table.push(' datagrid-row-alt');
					} else {
						table.push('');
					}
				}
				table.push('">'+rownumber+'</div></td>');
			}
			table.push('</tr>');
		}
		for(var j=0; j<fields.length;j++) {
			var field = fields[j];
			var col = $(target).datagrid('getColumnOption', field);
			if (col && !col.expander){
				table.push('<tr>');
				if (opts.showHeader) {
					var attr = '';
					if (col.rowspan) attr += 'rowspan="' + col.rowspan + '" ';
					if (col.colspan) attr += 'colspan="' + col.colspan + '" ';
					table.push('<td class="datagrid-header" ' + attr);
					if (col.checkbox){
						table.push(' field="' + col.field + '"><div class="datagrid-header-check"><input type="checkbox"/></div>');
					} else if (col.field){
						table.push(' field="' + col.field + '"><div class="datagrid-cell datagrid-header-' + j + '"><span>' + col.title + '</span><span class="datagrid-sort-icon"> </span></div>');
					} else {
						table.push('><div class="datagrid-cell-group">' + col.title + '</div>');
					}
					table.push('</td>');
				}
				for(var i=0; i<rows.length; i++) {
					var row = rows[i];
					var selected = row == $(target).datagrid('getSelected');
					var style = 'width:' + (col.width) + 'px;';
					style += 'text-align:' + (col.align || 'left');
					if (col.styler){
						style += ";" + col.styler(row[field], row, i);
					}
					table.push('<td>');
					table.push('<div style="' + style + '" datagrid-row-index="' + i + '" datagrid-column-index="' + j + '"');
					if (col.checkbox){
						table.push('class="datagrid-cell-check');
					} else {
						table.push('class="datagrid-cell');
					}
					table.push(' datagrid-cell-' + j + '-' + i);
					if (selected == true){
						table.push(' datagrid-row-selected');
					} else {
						if (i % 2 && opts.striped){
							table.push(' datagrid-row-alt');
						} else {
							table.push('');
						}
					}
					if (frozen){
						table.push('datagrid-cell-height ');
					}
					table.push('">');
					if (col.checkbox){
						if (selected){
							table.push('<input type="checkbox" checked="checked"/>');
						} else {
							table.push('<input type="checkbox"/>');
						}
					} else if (col.formatter){
						table.push(col.formatter(row[field], row, i));
					} else {
						table.push(row[field]);
					}
					table.push('</div>');
					table.push('</td>');
				}
				table.push('</tr>');
			}
		}
		table.push('</tbody></table>');
		
		$(container).html(table.join(''));
		
		var fieldCount = fields.length;
		for(var j=0; j<fields.length;j++) {
			var field = fields[j];
			var col = $(target).datagrid('getColumnOption', field);
			if (col && !col.expander) {
                //属性自定义 jqf
				if (opts.headerWidth){
				    $('.datagrid-header-' + j, container).width(opts.headerWidth); 
				}
				if (opts.headerTextAlign) {
				    $('.datagrid-header-' + j, container).css("text-align", opts.headerTextAlign);
				}
				for(var i=0; i<rows.length; i++) {
					var row = rows[i];
					if (opts.itemWidth){
						$('.datagrid-cell-' + j + '-' + i, container).width(opts.itemWidth);
					}
					$('.datagrid-cell-' + j + '-' + i, container).mouseover(function(){
						var index = $(this).attr('datagrid-row-index');
						for(var f=0; f<fieldCount;f++) {
							$('.datagrid-cell-' + f + '-' + index, container).addClass('datagrid-row-over');
						}
					}).mouseout(function(){
						var index = $(this).attr('datagrid-row-index');
						for(var f=0; f<fieldCount;f++) {
							$('.datagrid-cell-' + f + '-' + index, container).removeClass('datagrid-row-over');
						}
					}).click(function(){
						var index = $(this).attr('datagrid-row-index');
						if ($(this).hasClass('datagrid-row-selected')){
							$(target).datagrid('unselectRowT', {target:target, index:index});
						} else {
							$(target).datagrid('selectRowT', {target:target, index:index});
						}
						if (opts.onClickRow){
							opts.onClickRow.call(this, index, rows[index]);
						}
					}).dblclick(function(){
						var index = $(this).attr('datagrid-row-index');
						if (opts.onDblClickRow){
							opts.onDblClickRow.call(this, index, rows[index]);
						}
					});
				}
			}
		}
	},
	
	onBeforeRender: function(target){
		$('.datagrid-header', $(target).parent()).css('display', 'none');
	}
});

$.extend($.fn.datagrid.methods, {
	selectRowT: function(target, args){
		var grid = $.data(target[0], 'datagrid').grid;
		var opts = $.data(target[0], 'datagrid').options;
		var data = $.data(target[0], 'datagrid').data;
		var selectedRows = $.data(target[0], 'datagrid').selectedRows;
		
		var tds = $('.datagrid-body div[datagrid-row-index='+args.index+']',grid);
		var ck = $('.datagrid-body div[datagrid-row-index='+args.index+'] .datagrid-cell-check input[type=checkbox]',grid);
		if (opts.singleSelect == true){
			this.clearSelectionsT(target);
		}
		tds.addClass('datagrid-row-selected');
		ck.attr('checked', true);
		
		if (opts.idField){
			var row = data.rows[args.index];
			for(var i=0; i<selectedRows.length; i++){
				if (selectedRows[i][opts.idField] == row[opts.idField]){
					return;
				}
			}
			selectedRows.push(row);
		}
		opts.onSelect.call(target[0], args.index, data.rows[args.index]);
	},
	unselectRowT: function(target, args){
		var opts = $.data(target[0], 'datagrid').options;
		var grid = $.data(target[0], 'datagrid').grid;
		var selectedRows = $.data(target[0], 'datagrid').selectedRows;
		
		var tds = $('.datagrid-body div[datagrid-row-index='+args.index+']',grid);
		var ck = $('.datagrid-body div[datagrid-row-index='+args.index+'] .datagrid-cell-check input[type=checkbox]',grid);
		tds.removeClass('datagrid-row-selected');
		ck.attr('checked', false);
		
		var row = $.data(target[0], 'datagrid').data.rows[args.index];
		if (opts.idField){
			for(var i=0; i<selectedRows.length; i++){
				var row1 = selectedRows[i];
				if (row1[opts.idField] == row[opts.idField]){
					for(var j=i+1; j<selectedRows.length; j++){
						selectedRows[j-1] = selectedRows[j];
					}
					selectedRows.pop();
					break;
				}
			}
		}
		opts.onUnselect.call(target[0], args.index, row);
	},
	clearSelectionsT: function(target){
		var grid = $.data(target[0], 'datagrid').grid;
		
		$('.datagrid-body div.datagrid-row-selected', grid).removeClass('datagrid-row-selected');
		$('.datagrid-body .datagrid-cell-check input[type=checkbox]', grid).attr('checked', false);
		var selectedRows = $.data(target[0], 'datagrid').selectedRows;
		while(selectedRows.length > 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;
	}
});

　　有疑问可评论留言。。。