【EasyUI】 datagrid 竖排绑定数据

柔光的暖阳◎ 2021-12-16 16:27 380阅读 0赞

**展示效果：**

![466582-20171120090455696-1873964690.png][]

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;
    	}
    });

**　有疑问可评论留言。。。**

转载于:https://www.cnblogs.com/qifei-jia/p/7864862.html

[466582-20171120090455696-1873964690.png]: /images/20211216/8b385e2aadee47d697bf47dc5b08fdae.png