Question

我正在尝试绑定自定义按键组合以执行如下所示的自定义操作，但是按键绑定无效。我什至尝试在keybindings: true设置中添加init，但没有更改。控制台中没有任何错误，警告或通知。

我确实不确定我是否正确使用了.extendModule()，尽管我已经检查过the docs。

var rowContextMenu = function(e, row) {
	// do something here
	console.log("RIGHT CLICK: Context menu triggered");
}

var deleteRow = function(row) {
	let rData = row.getData();

	if(rData.hasOwnProperty('_children')) {
		let cRows = row.getTreeChildren();
		$.each(cRows, function() {
			let r = this;

			setTimeout(function() {
				deleteRow(r);
			}, 0);
		});
	}

	row.delete();
};

Tabulator.prototype.extendModule("keybindings", "actions", {
	"deleteSelectedRows":function(){ //delete selected rows
		let selectedRows = this.table.getSelectedRows();

		selectedRows.forEach(function(row){
			deleteRow(row);
		});
		console.log('ROWS DELETED: Triggered with button keyboard');
	},
});

Tabulator.prototype.extendModule("keybindings", "bindings", {
	deleteSelectedRows:"shift + 9",
});

let nestedData = [
	{name:"Oli Bob", location:"United Kingdom", gender:"male", col:"red", dob:"14/04/1984", _children:[
		{name:"Mary May", location:"Germany", gender:"female", col:"blue", dob:"14/05/1982"},
		{name:"Christine Lobowski", location:"France", gender:"female", col:"green", dob:"22/05/1982"},
		{name:"Brendon Philips", location:"USA", gender:"male", col:"orange", dob:"01/08/1980", _children:[
			{name:"Margret Marmajuke", location:"Canada", gender:"female", col:"yellow", dob:"31/01/1999"},
			{name:"Frank Harbours", location:"Russia", gender:"male", col:"red", dob:"12/05/1966"},
		]},
	]},
	{name:"Jamie Newhart", location:"India", gender:"male", col:"green", dob:"14/05/1985"},
	{name:"Gemma Jane", location:"China", gender:"female", col:"red", dob:"22/05/1982", _children:[
		{name:"Emily Sykes", location:"South Korea", gender:"female", col:"maroon", dob:"11/11/1970"},
	]},
	{name:"James Newman", location:"Japan", gender:"male", col:"red", dob:"22/03/1998"},
];

let table = new Tabulator('#my-tabulator', {
	height:"400px",
	layout:"fitColumns",
	data: nestedData,
	/**
	 *	// Actual ajax configuration that won't work with test data (works perfectly with live data)
	 * 
	 *	ajaxLoaderLoading:'<div class="text-center" style="display:inline-block;"><img style="width:100px;" src="/path/to/my/spinner.svg"></div>',
	 *	ajaxURL:"/path/to/my/data.json", //ajax URL
	 *	ajaxConfig:"get", //ajax HTTP request type
	 */
	sortable: false,
	selectable:true, //make rows selectable
	dataTree:true,
	dataTreeChildIndent:24,
	dataTreeStartExpanded:[true, false], //start with first level expanded, second level collapsed
	dataTreeCollapseElement:"<span class='expand-collpase-btn'>-</span>",
	dataTreeExpandElement:"<span class='expand-collpase-btn'>+</span>",
	rowFormatter:function(row){
		if(row.getData().parent_id === null){
			row.getElement().classList.add("root-node");
		}
	},
	keybindings: {
		deleteSelectedRows:"shift + 9"
	},
	rowContext:rowContextMenu,
	columnMinWidth : 24,
	columns:[
		{title:"Name", field:"name", width:200, responsive:0}, //never hide this column
		{title:"Location", field:"location", width:150},
		{title:"Gender", field:"gender", width:150, responsive:2}, //hide this column first
		{title:"Favourite Color", field:"col", width:150},
		{title:"Date Of Birth", field:"dob", align:"center", sorter:"date", width:150},
	],
	/**
	 *	// Actual column configuration that won't work with test data (works perfectly with live data)
	 * 
	 *	columns:[
	 *		{title:"Col 1", field:"field_1", headerSort:false, titleFormatter:headerFilter, titleFormatterParams:filters, responsive:0,
	 *			formatter:function(cell, formatterParams){
	 *				//cell - the cell component
	 *				//formatterParams - parameters set for the column
	 *	
	 *				let rowData = cell.getRow().getData();
	 *	
	 *				if(rowData['test'] == 'String 1' || rowData['test'] === false) {
	 *					let cellUrl = $('<a></a>', {href: '/path/to/cell/item/itemid:'+rowData['id'], target: "_blank"}).html(cell.getValue());
	 *					return cellUrl[0];
	 *				}
	 *				return cell.getValue(); //return the contents of the cell;
	 *			}, 
	 *		},
	 *		{title:"Col 2", field:"field_2", headerSort:false, width:150,
	 *			formatter:function(cell, formatterParams){
	 *				//cell - the cell component
	 *				//formatterParams - parameters set for the column
	 *	
	 *				let rowData = cell.getRow().getData();
	 *	
	 *				if(rowData['test']) {
	 *					return '<span class="text-muted text-bold text-italic">String 1</span>';
	 *				}
	 *				return '<span class="text-italic">String 2</span>';
	 *			},
	 *		},
	 *		{title:"Col 3", headerSort:false, field:"field_3", width:200, align:"right", titleFormatter:headerFilter, titleFormatterParams:filters, responsive:2}, //hide this column first
	 *		{title:"Col 4", headerSort:false, field:"field_4", width:200, align:"right", titleFormatter:headerFilter, titleFormatterParams:filters},
	 *		{
	 *			title:"", 
	 *			headerSort:false,
	 *			resizable: false,
	 *			columns: [
	 *				{title:"", width:24, headerSort:false, resizable: false, formatter:editButton, cssClass:'table-actions'},
	 *				{title:"", width:24, headerSort:false, resizable: false, formatter:deleteButton, cssClass:'table-actions'},
	 *			]
	 *		},
	 *	]
	 */
});

$('#delete-rows-btn').on('click', function(e){
	let selectedRows = table.getSelectedRows();

	selectedRows.forEach(function(row){
		deleteRow(row);
	});
	console.log('ROWS DELETED: Triggered with button click');
});

$('#reload-table-btn').on('click', function(e){
	console.log('Table reloaded');
	table.replaceData(nestedData);
});

/**
 * I'm using custom CSS
 * but let's ignore it for the sake of this demo
 */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>

<a id="delete-rows-btn" href="javascript:void(0);" class="btn btn-sm btn-danger">Delete Selected</a>
&emsp;
<a id="reload-table-btn" href="javascript:void(0);" class="btn btn-sm btn-primary">Reload Table</a>
<div id="my-tabulator" class="table-bordered"></div>

Answer 1

您需要使用shift + keyCode并禁用rowSelectable。如果您

，我的代码将起作用

专注于餐桌
按 Shift + 9 键

  var rowContextMenu = function (e, row) {
    // do something here
    console.log("RIGHT CLICK: Context menu triggered");
  }

  var deleteRow = function (row) {
    let rData = row.getData();

    if (rData.hasOwnProperty('_children')) {
      let cRows = row.getTreeChildren();
      $.each(cRows, function () {
        let r = this;

        setTimeout(function () {
          deleteRow(r);
        }, 0);
      });
    }

    row.delete();
  };

  Tabulator.prototype.extendModule("keybindings", "actions", {
    "deleteSelectedRows": function () { //delete selected rows
      let selectedRows = this.table.getSelectedRows();

      selectedRows.forEach(function (row) {
        deleteRow(row);
      });
      console.log('ROWS DELETED: Triggered with button keyboard');
    },
  });

  Tabulator.prototype.extendModule("keybindings", "bindings", {
    deleteSelectedRows: "shift + 9",
  });

  let nestedData = [
    {
      name: "Oli Bob", location: "United Kingdom", gender: "male", col: "red", dob: "14/04/1984", _children: [
        {name: "Mary May", location: "Germany", gender: "female", col: "blue", dob: "14/05/1982"},
        {name: "Christine Lobowski", location: "France", gender: "female", col: "green", dob: "22/05/1982"},
        {
          name: "Brendon Philips", location: "USA", gender: "male", col: "orange", dob: "01/08/1980", _children: [
            {name: "Margret Marmajuke", location: "Canada", gender: "female", col: "yellow", dob: "31/01/1999"},
            {name: "Frank Harbours", location: "Russia", gender: "male", col: "red", dob: "12/05/1966"},
          ]
        },
      ]
    },
    {name: "Jamie Newhart", location: "India", gender: "male", col: "green", dob: "14/05/1985"},
    {
      name: "Gemma Jane", location: "China", gender: "female", col: "red", dob: "22/05/1982", _children: [
        {name: "Emily Sykes", location: "South Korea", gender: "female", col: "maroon", dob: "11/11/1970"},
      ]
    },
    {name: "James Newman", location: "Japan", gender: "male", col: "red", dob: "22/03/1998"},
  ];

  let table = new Tabulator('#my-tabulator', {
    height: "400px",
    layout: "fitColumns",
    data: nestedData,
    sortable: false,
    // selectable: true, //make rows selectable
    dataTree: true,
    dataTreeChildIndent: 24,
    dataTreeStartExpanded: [true, false], //start with first level expanded, second level collapsed
    dataTreeCollapseElement: "<span class='expand-collpase-btn'>-</span>",
    dataTreeExpandElement: "<span class='expand-collpase-btn'>+</span>",
    rowFormatter: function (row) {
      if (row.getData().parent_id === null) {
        row.getElement().classList.add("root-node");
      }
    },
    keybindings: {
      deleteSelectedRows: "shift + 57"
    },
    rowContext: rowContextMenu,
    columnMinWidth: 24,
    columns: [
      {title: "Name", field: "name", width: 200, responsive: 0}, //never hide this column
      {title: "Location", field: "location", width: 150},
      {title: "Gender", field: "gender", width: 150, responsive: 2}, //hide this column first
      {title: "Favourite Color", field: "col", width: 150},
      {title: "Date Of Birth", field: "dob", align: "center", sorter: "date", width: 150},
    ],

  });

  $('#delete-rows-btn').on('click', function (e) {
    let selectedRows = table.getSelectedRows();

    selectedRows.forEach(function (row) {
      deleteRow(row);
    });
    console.log('ROWS DELETED: Triggered with button click');
  });

  $('#reload-table-btn').on('click', function (e) {
    console.log('Table reloaded');
    table.replaceData(nestedData);
  });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/bootstrap/tabulator_bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>

<a id="delete-rows-btn" href="javascript:void(0);" class="btn btn-sm btn-danger">Delete Selected</a>
&emsp;
<a id="reload-table-btn" href="javascript:void(0);" class="btn btn-sm btn-primary">Reload Table</a>
<div id="my-tabulator" class="table-bordered"></div>

使用.extendModule（）

1 个答案: