Tabulator使用

最新推荐文章于 2024-10-18 10:46:05 发布

sylForTheFuture

最新推荐文章于 2024-10-18 10:46:05 发布

阅读量2k

点赞数 1

分类专栏： Tabulator 文章标签：前端

本文链接：https://blog.csdn.net/shenyinglijie/article/details/108199202

版权

Tabulator 专栏收录该内容

1 篇文章

订阅专栏

Tabulator

验证validator
cell编辑-自定义editor样式
列相关属性
创建Tabulator
列全选，取消全选（包含定义）
解析Tabulator相关
默认绑定的resize事件的取消

1-validator（时间edit的success函数）：

startTime ,endTime（数据format验证结果）
   //定义在列模块，验证失败会添加tabulator-validation-fail的class样式
   validator:"regex:^([0-9]){2}:([0-9]){2}$"
   Validate.prototype.validators
   //validator初始化
   Validate.prototype.initializeColumn 
   // 验证函数
   Validate.prototype.validate

2-自定义editor模板（达到某个条件时cell可以编辑）

/**
* param
* cell:编辑的元素本身
* onRendered:编辑过程回调函数（编辑时获取焦点，tabulator会自动添加【tabulator-editing】class属性）
* success ：编辑成功回调函数
* cancel : 编辑失败回调函数
*/
isShiftCellEditable = function (cell,onRendered,success,cancel) {
	var cellEditedStatusDOM = $("<input>").attr("value",cell._cell.value);
	onRendered(function () {
		//TODO preventScroll
        cellEditedStatusDOM[0].focus({ preventScroll: true });
        cellEditedStatusDOM[0].style.height = "100%";
    });
	function onChange(){
		success(cellEditedStatusDOM[0].value);
	}
	 //在该函数的调用列，cell标签发生change事件+失去焦点事件，触发onchange事件，修改cell的值。
	cellEditedStatusDOM[0].addEventListener("change", onChange);
	cellEditedStatusDOM[0].addEventListener("blur", onChange);
	//当cell的status列的值为“1”时，返回一个 input标签，否则返回false
	if(cell.getData().status == "1") {
		cellEditedStatusDOM.css({"padding"   : "4px",
			                     "width"     : "100%",
			                     "boxSizing" : "border-box"}) 
		return cellEditedStatusDOM[0];
    } else {
    	return false;
    }
}

editor是下拉框的实现方式（tabulator）

//接口在列的定义时，editor：select
//具体控制类：tabulator-edit-select-list
<div class="tabulator-edit-select-list" style="left: 1053px; top: 534.79px; min-width: 216px;">
	<div tabindex="0" class="tabulator-edit-select-list-item active">Disable</div>
	<div tabindex="0" class="tabulator-edit-select-list-item">Enable</div></div>

3-列相关属性

列不可排序

    headerSort:false,//表头不带排序图标，不可排序
    //使用Tabulator自定义的下拉框，值为0，显示Enable
    editor : "select", editorParams : { values:{"0":"Disable", "1":"Enable"} } }]
     {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
        cell.getRow().toggleSelect();
      }},

4-创建Tabulator

创建一个Tabulator的例子

 new Tabulator('#shiftTable',{
               //titleFormatter : "rowSelection",
        layout           : "fitDataStretch",
        //layout           : "fitColumns",
        //responsiveLayout : "hide",
        //可选行数1
        selectable : 1,
        //如果将data的设置直接写systemConfigInfo.mShifts,数据会浅拷贝
		data       : 你的数据,//注意数据对象的每一个的属性和columns中的每列的field对应。
		columns    : [{title : [[#{systemconfiguration.shift.id}]],       field:"shiftID",   headerSort:false, width:"15%"},
					        {title : [[#{systemconfiguration.shift.name}]],     field:"shiftName", headerSort:false, width:"35%", editor : isShiftCellEditable},
					        {title : [[#{systemconfiguration.shift.begintime}]],field:"beginTime", headerSort:false, width:"15%",
					        	       editor : isShiftCellEditable, validator:"regex:^([0-9]){2}:([0-9]){2}$"},
					        {title : [[#{systemconfiguration.shift.endtime}]],  field:"endTime",   headerSort:false, width:"15%",
					        	       editor : isShiftCellEditable, validator:"regex:^([0-9]){2}:([0-9]){2}$"},
					        {title : [[#{systemconfiguration.shift.status}]],   field:"status",    headerSort:false, width:"20%", 
					        	     editor : "select", editorParams : { values:{"0":"Disable", "1":"Enable"} },
					        	     formatter : function(cell, formatterParams){ return (cell.getValue() == "1" ? "Enable" :"Disable");}
					       }]
		
	});

5-列全选+取消全选

 //referDBTable是自己定义的Tabulator对象（使用方法如下两行代码）
 //全选
referDBTable.selectRow(referDBTable.rowManager.rows);
//取消全选
referDBTable.deselectRow(referDBTable.rowManager.rows); 
 //Tabulator.js源码提供的定义
  RowComponent.prototype.select = function () {

		this._row.table.modules.selectRow.selectRows(this._row);
	};

	RowComponent.prototype.deselect = function () {

		this._row.table.modules.selectRow.deselectRows(this._row);
	};
	//对用户提供的Tabulator对象的接口,在Filtering模块
	Tabulator.prototype.selectRow = function (rows) {

		if (this.modExists("selectRow", true)) {

			if (rows === true) {

				console.warn("passing a boolean to the selectRowselectRow function is deprecated, you should now pass the string 'active'");

				rows = "active";
			}

			this.modules.selectRow.selectRows(rows);
		}
	};

	Tabulator.prototype.deselectRow = function (rows) {

		if (this.modExists("selectRow", true)) {

			this.modules.selectRow.deselectRows(rows);
		}
	};

6-解析Tabulator

 //Tabulator源码相关options的位置
 Tabulator.prototype.defaultOptions

7-绑定resize事件削除

解决场景：画面有导航栏，例如有A，B，点击A，到A画面，点击B，到B画面，A，B画面都有Tabulator表格，当在A画面发生resize事件，A画面的Tabulator对象正常，B画面的Tabulator对象数据消失，是因为此时所有的Tabulator都进行了Redraw，B画面的Tabulator的Element（例如DIV对象）不显示。
解决方法；
//shiftTable是你创建Tabulator对象的名字
shiftTable.modules.resizeTable.clearBindings();

 //源码解析----为false时，绑定窗口的resize事件，进行redraw
if( typeof ResizeObserver !== "undefined" && table.rowManager.getRenderMode() === "virtual") {
      .........
} else {
    this.binding = function () {
		if (!table.browserMobile || table.browserMobile && !table.modules.edit.currentCell) {
					table.redraw();
				}
		};
		window.addEventListener("resize", this.binding);
}
 //table.browserMobile默认为false	
		ResizeTable.prototype.clearBindings = function (row) {
		if (this.binding) {
			window.removeEventListener("resize", this.binding);
		}

		if (this.observer) {
			this.observer.unobserve(this.table.element);
		}

		if (this.containerObserver) {
			this.containerObserver.unobserve(this.table.element.parentNode);
		}
	};