controlColumnWidthNew = function(config) {
var config = config;
var _createGrips = function _createGrips(config) {
$('.JCLRgrips:visible').remove();
var div = '<div class="JCLRgrips"></div>';
var tableTd = $(config.el).find('tr:eq(0) td');
var height = $(config.el).height();
if (!tableTd.length) return;
var length = tableTd.length;
var verticalBars = [];
$.each(tableTd, function(index) {
if (index == length - 1) return false;
var left = 0;
for (var i = 0; i < index + 1; i++) {
left += $(tableTd[i]).outerWidth();
}
left -= $('.headerFrozen:visible').outerWidth() || 0;
var verticalBar = '<div class="JCLRgrip" style="left: ' + left + 'px; height:' + height + 'px"><div class="JColResizer"></div></div>';
verticalBars.push(verticalBar);
});
$(config.el).parent().prepend('<div class="JCLRgrips">' + verticalBars.join('') + '</div>');
var mouseEvent = function mouseEvent(e) {
switch (e.type) {
case 'mousedown':
$(this).parent().addClass('dragging');
$(this).parent().prev().addClass('dragging-before');
$(document).bind('mousemove', mouseEvent);
var dragging = $('.dragging');
var index = dragging.index();
var width = 0;
if (index > 0) {
width = dragging.offset().left - dragging.parent().find('.JCLRgrip:eq(' + (index - 1) + ')').offset().left;
} else {
width = dragging.offset().left - $(config.el).offset().left;
}
$.each($(config.el).find('tr'), function(_, itm) {
var dataWidth = $(itm).find('td:eq(' + index + ')').data('width');
if (!dataWidth) {
$(itm).find('td:eq(' + index + ')').data('width', width);
} else {
return false;
}
});
document.onmousedown = function() {
return false;
};
break;
case 'mouseup':
var dragging = $('.dragging');
var index = dragging.index();
if (!dragging.length) return;
if (!$(config.el).find('tr:eq(0) td:eq(' + index + ')').hasClass('frozen') && !$(config.el).find('tr:eq(0) td:eq(' + index + ')').hasClass('checkedRow')) {
var width = 0;
var columnKey
if (index > 0) {
width = dragging.offset().left - dragging.parent().find('.JCLRgrip:eq(' + (index - 1) + ')').offset().left;
} else {
width = dragging.offset().left - $(config.el).offset().left;
}
$.each($(config.el).find('tr'), function(_, itm) {
// var dataWidth = $(itm).find('td:eq(' + index + ')').data('width')
var dataWidth = 20;
if (width < dataWidth) width = dataWidth;
$(itm).find('td:eq(' + index + ')').css({
'min-width': width,
'max-width': width,
width: width
});
console.log("itm:",itm)
columnKey = $(itm).find('td:eq(' + index + ')').attr('data-key');
console.log("$(itm).find('td:eq(' + index + ')'):",$(itm))
});
$(config.el).parents('table').find('thead th:eq(' + index + ')').css({
'min-width': width,
'max-width': width,
width: width
});
if (config.callback) {
config.callback();
}
var postData = {
width: width,
columnKey: columnKey,
tableName: config.tableName
}
console.log('columnKey3',columnKey)
_.util.ajax_get('/table/updateTableWidth', postData, function(res) {
if (res.success && config.callBackSetWidth) {
config.callBackSetWidth(columnKey, width)
}
})
$(window).resize();
}
_createGrips(config);
$.each($('.dragging').parent().find('.JCLRgrip'), function(index, item) {
var left = 0;
for (var i = 0; i < index + 1; i++) {
left += $('.dragging').parents('.admin-table').find('.sticky-enabled tbody tr:eq(0) td:eq(' + i + ')').outerWidth();
}
$(item).css({
left: left
});
});
$('.dragging').removeClass('dragging');
$('.dragging-before').removeClass('dragging-before');
document.onmousedown = function() {
return true;
};
$(document).unbind('mousemove');
break;
case 'mousemove':
if ($('.dragging').length) {
var left = e.clientX - $(config.el).offset().left;
$('.dragging').css({
left: left
});
}
break;
}
};
$(config.el).parent().find('.JColResizer').on('mousedown', mouseEvent);
$(config.el).parent().unbind('mouseup').on('mouseup', mouseEvent);
$.each($('.admin-table').find('.sticky-enabled thead tr:last th'), function(index, item) {
var width = $(item).outerWidth();
$('.dragging').parents('.admin-table').find('.sticky-thead thead tr:last th:eq(' + index + ')').css({
'min-width': width,
'max-width': width,
width: width
});
});
};
_createGrips(config);
};
使用:
//controlColumnWidthNew({
// el: "#'表格id' tbody"
//})
controlColumnWidthNew({
el: '#document-operate-table tbody'
})