Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add extension that make table like excel #954

Open
wants to merge 19 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 18 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
Expand Up @@ -14,6 +14,6 @@
"test"
],
"dependencies": {
"jquery": ">=1.6"
"jquery": "~1.11"
}
}
2 changes: 1 addition & 1 deletion composer.json
@@ -1,7 +1,7 @@
{
"name": "vitalets/x-editable",
"description": "In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.",
"version": "1.4.5",
"version": "1.5.1",
"homepage": "http://github.com/vitalets/x-editable",
"authors": [
{
Expand Down
4 changes: 2 additions & 2 deletions dist/bootstrap3-editable/js/bootstrap-editable.js
Expand Up @@ -4418,7 +4418,7 @@ $(function(){
//initial value, can be `new Date()`
value: null,
minYear: 1970,
maxYear: 2015,
maxYear: new Date().getFullYear(),
yearDescending: true,
minuteStep: 5,
secondStep: 1,
Expand Down Expand Up @@ -6804,4 +6804,4 @@ Automatically shown in inline mode.

$.fn.editabletypes.datetimefield = DateTimeField;

}(window.jQuery));
}(window.jQuery));
68 changes: 68 additions & 0 deletions src/inputs-ext/slider/slider.js
@@ -0,0 +1,68 @@
/**
Slider, based on the Slider plugin by Stefan Petre (http://www.eyecon.ro/bootstrap-slider).

Make sure to include the plugin's code before using this editor.

@class slider
@extends text
@since 1.5.0
@final
**/
(function ($) {
"use strict";

var Constructor = function (options) {
this.init('slider', options, Constructor.defaults);
};

$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.text);

$.extend(Constructor.prototype, {
render: function() {
// need to set kewdown handler before apply slider
// for correct autosubmit
this.isAutosubmit = false;
var that = this;
this.$input.on('keydown', function (e) {
if (!that.isAutosubmit) {
return;
}
if (e.which === 13) {
that.$input.closest('form').submit();
}
});

// apply slider
this.$input.slider(this.options.slider);
},

value2input: function(value) {
// make sure it's a number
if(typeof value!='number')
value=Number(value);
if(isNaN(value))
value=0;

this.$input.val(value);
this.$input.slider('setValue', value);
},

autosubmit: function() {
this.isAutosubmit = true;
}
});

Constructor.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
/**
@property tpl
@default <input type="text">
**/
tpl:'<input type="text">',
/**
**/
slider: null,
});

$.fn.editabletypes.slider = Constructor;

}(window.jQuery));
4 changes: 2 additions & 2 deletions src/inputs/combodate/lib/combodate.js
Expand Up @@ -473,7 +473,7 @@
//initial value, can be `new Date()`
value: null,
minYear: 1970,
maxYear: 2015,
maxYear: (new Date().getFullYear()),
yearDescending: true,
minuteStep: 5,
secondStep: 1,
Expand All @@ -483,4 +483,4 @@
smartDays: false // whether days in combo depend on selected month: 31, 30, 28
};

}(window.jQuery));
}(window.jQuery));
102 changes: 102 additions & 0 deletions src/table/excelTable.js
@@ -0,0 +1,102 @@
/* excelTable v1.0.0
* Extension for X-editable
* https://github.com/HenriettaSu/x-editable
* Copyright (c) 2016 HenriettaSu; Licensed MIT
*/

/*
* Make the table like excel. By right-click of cell you can show the container and change style of cell by .editable-td. You can use direction and enter key to control the actived cell.
*/

/*
* Example
*
* excelTable.init();
* By using this method you can initialze excelTable. All cell of element initialzed by $().editable() will be added class .editable-td. After be clicked, the cell will be added class .active and show container.
*
* excelTable.enable();
* Unbinds the events that bound by initialzing excelTable.init(). But tht class .editable-td will not be removed.
*
*/
(function ($) {
"use strict";

var excelTable = jQuery.prototype = {
init: function () {
var $td = $('a.editable').parent();
$td.addClass('editable-td');
$(document).on('click.excel.table', '.editable-td', function (e) { // 單元格
var $this = $(this),
$a = $this.children('a');
$('.editable-td').removeClass('active');
$this.addClass('active');
$a.editable('show');
e.stopPropagation();
});
$(document).on('click.excel.table', 'a.editable', function (e) { // 超鏈接
var $this = $(this),
$td = $this.parent();
$('.editable-td').removeClass('active');
$td.addClass('active');
$('a.editable').not(this).editable('hide');
e.stopPropagation();
e.preventDefault();
});
$(document).on('keydown.excel.table', function (e) { // 鍵盤控制
var $currTd = $('.editable-td.active'),
$nextTd,
$tr = $currTd.parent(),
index = $currTd.index(),
keyMap = {
left: 37,
right: 39,
up: 38,
down: 40,
tab: 9,
enter: 13
},
key = e.keyCode;
switch (key) {
case keyMap.left:
$nextTd = $currTd.prevAll('.editable-td').first();
directionChange();
break;
case keyMap.right:
$nextTd = $currTd.nextAll('.editable-td').first();
directionChange();
break;
case keyMap.up:
$nextTd = $currTd.parent().prev().find('td').eq(index);
directionChange();
break;
case keyMap.down:
$nextTd = $currTd.parent().next().find('td').eq(index);
directionChange();
break;
case keyMap.tab:
$nextTd = $currTd.parent().next().find('.editable-td').first();
directionChange();
break;
case keyMap.enter:
$currTd.children('a').editable('show');
e.stopPropagation();
e.preventDefault();
break;
}
function directionChange() {
$currTd.removeClass('active');
$currTd.children('a').editable('hide');
if ($nextTd.length) {
$nextTd.addClass('active');
} else {
$currTd.addClass('active');
}
}
});
},
enable: function () {
$(document).off('click.excel.table');
$(document).off('keydown.excel.table');
}
}
}(window.jQuery));