表格拖选功能

Html

Css

会议室名称	10:00		11:00		12:00		13:00		14:00		15:00		16:00		17:00		18:00		19:00
会议室1
会议室2

 .hidden {
	display:none;
}
table td.dselected {
	background-color:green;
}

$(function() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();

$('.busy').click(function() {
        location.href = $(this).data('href');
    });

// 可
    $('.mavailab').click(function() {

});
    $('body').append('<div class="am-popover am-popover-top" style="opacity:1;white-space: nowrap" id="am-popover-order"><div class="am-popover-inner"></div><div class="am-popover-caret"></div></div>');
    var table = $("#meetingRoomsTable");
    $('#meetingRoomsTable .mavailab').hover(function() {
        $('#am-popover-order .am-popover-inner').text('双击或拖动选择' + $(this).data('time') + $(this).parent().data('room-name'));
        var thisOffsetLeft = $(this).offset().left;
        var popoverWidth = $('#am-popover-order').outerWidth();
        var offsetLeft = thisOffsetLeft + (popoverWidth / 2 - $(this).outerWidth() / 2 + 10) > $('body').width() - 20 ? $('body').width() - popoverWidth - 5 : thisOffsetLeft - popoverWidth / 2 + $(this).outerWidth() / 2
        $('#am-popover-order').css({
            left: offsetLeft,
            top: $(this).offset().top - 52
        })
        $('#am-popover-order').show();
    }, function() {
        $('#am-popover-order').hide();
    });

$('.mlimit').each(function() {
        $(this).style = "background=red";
        $(this).popover({
            content: '受限',
            trigger: 'hover'
        });
    });

// 时间选择

var isMouseDown = false;
    var startRowIndex = null;
    var startCellIndex = null;
    var startCellTime = null;
    var endCellTime = null;
    var cellRoomId = null;
    var cellRoomName = null;

function selectTo(cell) {

var row = cell.parent();
        var cellIndex = cell.index();
        var rowIndex = row.index();

var rowStart, rowEnd, cellStart, cellEnd;

rowStart = startRowIndex;
        rowEnd = rowIndex;

if (cellIndex < startCellIndex) {
            cellStart = cellIndex;
            cellEnd = startCellIndex;
        } else {
            cellStart = startCellIndex;
            cellEnd = cellIndex;
        }

endCellTime = cell.data('time');
        cellRoomId = cell.parent().data('room-id');
        cellRoomName = cell.parent().data('room-name');

var rowCells = table.find("tr").eq(rowStart).find("td");
        for (var j = cellStart; j <= cellEnd; j++) {
            rowCells.eq(j).addClass("dselected");
        }

}

table.find("td.meeting-cell").mousedown(function(e) {
            isMouseDown = true;
            var cell = $(this);

table.find(".dselected").removeClass("dselected"); // deselect everything

if (e.shiftKey) {
                selectTo(cell);
            } else {
                cell.addClass("dselected");
                startCellIndex = cell.index();
                startRowIndex = cell.parent().index();
                startCellTime = cell.data('time');
                endCellTime = cell.data('time');
            }

return false; // prevent text selection
        })
        .mouseover(function() {
            if (!isMouseDown) return;
            selectTo($(this));
        })
        .bind("selectstart", function() {
            return false;
        });

$(document).mouseup(function() {
        if (isMouseDown) {
            // 检查选择的时间段
            var dStart = new Date(year + '-' + month + '-' + day + 'T' + startCellTime + ':00');
            var dEnd = new Date(year + '-' + month + '-' + day + 'T' + endCellTime + ':00');
            var duration = (dEnd.getTime() - dStart.getTime()) / 60000 + 30;
            if (duration > 720) {
                duration = 60;
            }

if (startCellTime == undefined) {
                isMouseDown = false;
                return;
            }
            if (cellRoomName == undefined) {
                isMouseDown = false;
                return;
            }
            alert(cellRoomName + "~~" + startCellTime + '&duration=' + duration);
            // 弹框选择会议类型
            // TODO:  不存在, 改js
            /* $('#dlg-new-meeting-title').html('预订2017-11-30' + cellRoomName + startCellTime);
            $('#dlg-new-meeting-link-s').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new?startTime=' + startCellTime +  '&duration=' + duration);
                                    $('#dlg-new-meeting-link-i').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new-interview?startTime=' + startCellTime + '&duration=' + duration);
                                                        $('#dlg-new-meeting-link-c').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new-customer?startTime=' + startCellTime + '&duration=' + duration); */
            // $('#new-meeting-dlg').modal({width: "280px"});
        }
        isMouseDown = false;
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

表格拖选功能



代码描述：jquery表格拖选功能

实现表格拖选时间段，能够添加任务，工作等。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

sdj4638220

相关代码

表格拖选功能

最新