本文目录

插件 jQuery.Dolly.js 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Dolly.js 中文API文档 https://github.com/LunarLogic/dolly.js Dolly.js - Clone your tables easily

Dolly.js is a simple and generic jQuery UI widget that adds excel-like cloning functionality to your tables. It works with any tabular structure (not only semantic html tables) and does not make any assumptions about the underlying data structure. It handles the UI part of cloning only - the implementation of business cloning logic is left to the widget’s users.

Usage

Call the dolly method on every table cell that should have cloning functionality. Then listen on cloned event to handle the data-related part of cloning.

$('td').dolly({
  cloned: function (event, ui) {
    console.log(this, "has been cloned " + ui.cloneX + " cells horizontally and " + ui.cloneY + " vertically.");
  }
});

You can find more elaborate examples in the examples directory.

Options

allowDiagonalSelection

Enable possiblity to select cells in an area. Defaults to false. Example:

$(cell).dolly({
  allowDiagonalSelection: true,
  rowSelector: 'div.row',
  cellSelector: 'div.cell'
});

will make possible to select a group of cells like this:

cloning an area of cells

rowSelector

jQuery selector for elements that should be considered the rows of the table. Defaults to "tr". Example:

$(cell).dolly({
  rowSelector: 'div.row',
  cellSelector: 'div.cell'
});

cellSelector

jQuery selector for elements that should be considered the cells of the table. Defaults to "td". Example:

$(cell).dolly({
  rowSelector: 'div.row',
  cellSelector: 'div.cell'
});

boxStyle

Object with custom CSS styles assigned to the selection box displayed when user clones cells. For example:

$(cell).dolly({
  boxStyle: {
    "background-color": "rgba(255, 0, 0, 0.2)",
     border: "3px red dotted"
  }
});

will result in a selection box like this:

red clone box

You can also style this with CSS dolly-box class.

handleStyle

Object with custom CSS styles assigned to the handle of the cloning box.

$(cell).dolly({
  handleStyle: {
    width: "0",
    height: "0",
    "background-color": "transparent",
    "border-top": "7px solid transparent",
    "border-left": "7px solid transparent",
    "border-bottom": "7px solid black",
    "border-right": "7px solid black",
    }
  }
});

will result in a triangular handle like this:

triangular dolly handle

You can also style this with CSS dolly-handle class.

Events

In all event callbacks this is bound to the origin HTML cell element.

Contents of ui object

The ui object is passed as the second argument to every callback. It contains:

  • originX - position of cell in row that triggered the event (0-indexed).
  • originY - position of row containing cell that triggered the event (0-indexed).
  • cloneX - number of cells selected for cloning horizontally. Negative values stand for cloning to the left, positive to the right.
  • cloneY - number of cells selected for cloning vertically. Negative values stand for cloning up, positive for cloning down.

cloned

Triggered whenever user requests cloning of a cell. You can pass a callback during dolly initialization like this:

$(cell).dolly({
  cloned: function (event, ui) {
    ...
  }
});

or listen on dollycloned event:

$(cell).dolly().on('dollycloned', function (event, ui) {...});

selected

Triggered whenever the size of selection box changes. This does not mean a clone request, just a user moving the handle. After user releases the handle, cloned event is triggered.

Once again you can pass a callback directly or listen on dollyselected event.

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了