jQ拖动调整表格列宽度js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ拖动调整表格列宽度js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
  <title>jQuery�϶���������п��</title>
  <meta name="description" content="">
  <link rel="stylesheet" href="libs/bootstrap.css">
  <link rel="stylesheet" href="libs/bootstrap-responsive.css">
  <link rel="stylesheet" href="css/jquery.resizableColumns.css">
  <link rel="stylesheet" href="css/demo.css">
</head>
<body>

  <div class="container">
    <h4>jQuery�϶���������п��</h4>
    <table class="table table-bordered" data-resizable-columns-id="demo-table">
      <thead>
        <tr>
          <th data-resizable-column-id="#">#</th>
          <th data-resizable-column-id="first_name">First Name</th>
          <th data-resizable-column-id="last_name">Last Name</th>
          <th data-resizable-column-id="username" id="username-column" data-noresize>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

    <pre>
      &lt;script src="libs/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="libs/store.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.resizableColumns.js"&gt;&lt;/script&gt;

      &lt;table class="table table-bordered" data-resizable-columns-id="demo-table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th data-resizable-column-id="#"&gt;#&lt;/th&gt;
            &lt;th data-resizable-column-id="first_name"&gt;First Name&lt;/th&gt;
            &lt;th data-resizable-column-id="last_name"&gt;Last Name&lt;/th&gt;
            &lt;th data-resizable-column-id="username" data-noresize&gt;Username&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          ...
        &lt;/tbody&gt;
      &lt;/table&gt;

      &lt;script&gt;
        $(function(){
          $("table").resizableColumns({
            store: store
          });
        });
      &lt;/script&gt;
    </pre>

  </div>

  <script src="libs/jquery.js"></script>
  <script src="libs/store.js"></script>
  <script src="dist/jquery.resizableColumns.min.js"></script>
  <script>

    $(function(){
      $("table").resizableColumns({
        store: store
      });
    });

  </script>
</body>
</html>

JS代码(Gruntfile.js):

module.exports = function(grunt){
	var path = require('path');
	var exec = require('child_process').exec;
	var tasks = ['coffee','sass','uglify'];
	grunt.loadNpmTasks('grunt-contrib-coffee');
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.initConfig({
	pkg:'<json:package.json>',coffee:{
	all:{
	src:'coffee/jquery.ResizableColumns.coffee',dest:'js/jquery.ResizableColumns.js',options:{
	bare:true}
}
,}
,sass:{
	all:{
	files:{
	'css/jquery.resizableColumns.css':'scss/jquery.resizableColumns.scss','css/demo.css':'scss/demo.scss'}
}
}
,uglify:{
	options:{
}
,all:{
	files:{
	'dist/jquery.resizableColumns.min.js':'js/jquery.resizableColumns.js'}
}
}
,watch:{
	app:{
	files:['./coffee/*.coffee','./scss/*.scss'],tasks:tasks}
}
}
);
	grunt.registerTask('default',tasks);
}
;

JS代码(jquery.ResizableColumns.js):

var __bind = function(fn,me){
	return function(){
	return fn.apply(me,arguments);
}
;
}
,__slice = [].slice;
	(function($,window){
	var ResizableColumns;
	ResizableColumns = (function(){
	ResizableColumns.prototype.defaults ={
	store:window.store,rigidSizing:false}
;
	function ResizableColumns($table,options){
	this.mousedown = __bind(this.mousedown,this);
	var _this = this;
	this.options = $.extend({
}
,this.defaults,options);
	this.$table = $table;
	this.tableId = this.$table.data('resizable-columns-id');
	this.createHandles();
	this.restoreColumnWidths();
	this.syncHandleWidths();
	$(window).on('resize.rc',(function(){
	return _this.syncHandleWidths();
}
));
}
ResizableColumns.prototype.destroy = function(){
	this.$handleContainer.remove();
	this.$table.removeData('resizableColumns');
	return $(window).off('.rc');
}
;
	ResizableColumns.prototype.createHandles = function(){
	var _this = this;
	this.$table.before((this.$handleContainer = $("<div class='rc-handle-container' />")));
	this.$table.find('tr th').each(function(i,el){
	var $handle;
	if (_this.$table.find('tr th').eq(i + 1).length === 0 || (_this.$table.find('tr th').eq(i).attr('data-noresize') != null) || (_this.$table.find('tr th').eq(i + 1).attr('data-noresize') != null)){
	return;
}
$handle = $("<div class='rc-handle' />");
	$handle.data('th',$(el));
	return $handle.appendTo(_this.$handleContainer);
}
);
	return this.$handleContainer.on('mousedown','.rc-handle',this.mousedown);
}
;
	ResizableColumns.prototype.syncHandleWidths = function(){
	var _this = this;
	this.$handleContainer.width(this.$table.width());
	return this.$handleContainer.find('.rc-handle').each(function(_,el){
	return $(el).css({
	left:$(el).data('th').outerWidth() + ($(el).data('th').offset().left - _this.$handleContainer.offset().left),height:_this.$table.height()}
);
}
);
}
;
	ResizableColumns.prototype.saveColumnWidths = function(){
	var _this = this;
	return this.$table.find('tr th').each(function(_,el){
	var id;
	if ($(el).attr('data-noresize') == null){
	id = _this.tableId + '-' + $(el).data('resizable-column-id');
	if (_this.options.store != null){
	return store.set(id,$(el).width());
}
}
}
);
}
;
	ResizableColumns.prototype.restoreColumnWidths = function(){
	var _this = this;
	return this.$table.find('tr th').each(function(_,el){
	var id,width;
	id = _this.tableId + '-' + $(el).data('resizable-column-id');
	if ((_this.options.store != null) && (width = store.get(id))){
	return $(el).width(width);
}
}
);
}
;
	ResizableColumns.prototype.mousedown = function(e){
	var $currentGrip,$leftColumn,$rightColumn,idx,leftColumnStartWidth,rightColumnStartWidth,_this = this;
	e.preventDefault();
	this.startPosition = e.pageX;
	$currentGrip = $(e.currentTarget);
	$leftColumn = $currentGrip.data('th');
	leftColumnStartWidth = $leftColumn.width();
	idx = this.$table.find('tr th').index($currentGrip.data('th'));
	$rightColumn = this.$table.find('tr th').eq(idx + 1);
	rightColumnStartWidth = $rightColumn.width();
	$(document).on('mousemove.rc',function(e){
	var difference,newLeftColumnWidth,newRightColumnWidth;
	difference = e.pageX - _this.startPosition;
	newRightColumnWidth = rightColumnStartWidth - difference;
	newLeftColumnWidth = leftColumnStartWidth + difference;
	if (_this.options.rigidSizing && ((parseInt($rightColumn[0].style.width) < $rightColumn.width()) && (newRightColumnWidth < $rightColumn.width())) || ((parseInt($leftColumn[0].style.width) < $leftColumn.width()) && (newLeftColumnWidth < $leftColumn.width()))){
	return;
}
$leftColumn.width(newLeftColumnWidth);
	$rightColumn.width(newRightColumnWidth);
	return _this.syncHandleWidths();
}
);
	return $(document).one('mouseup',function(){
	$(document).off('mousemove.rc');
	return _this.saveColumnWidths();
}
);
}
;
	return ResizableColumns;
}
)();
	return $.fn.extend({
	resizableColumns:function(){
	var args,option;
	option = arguments[0],args = 2 <= arguments.length ? __slice.call(arguments,1):[];
	return this.each(function(){
	var $table,data;
	$table = $(this);
	data = $table.data('resizableColumns');
	if (!data){
	$table.data('resizableColumns',(data = new ResizableColumns($table,option)));
}
if (typeof option === 'string'){
	return data[option].apply(data,args);
}
}
);
}
}
);
}
)(window.jQuery,window);

CSS代码(demo.css):

img.ribbon{position:fixed;z-index:1;top:0;right:0;border:0;cursor:pointer;}
.container{margin-top:60px;}
#username-column{width:50px;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

59.28 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

59.28 KB

立即下载

冯爽芝

了解

打赏作者鼓励作者

jquery特效9