谈tabulator动态增删改、填充数据以及清空数据

最新推荐文章于 2024-05-11 09:39:49 发布

置顶温酒叙余生。

最新推荐文章于 2024-05-11 09:39:49 发布

阅读量3k

点赞数 1

文章标签： tabulator tabulator基本用法 jquery

本文链接：https://blog.csdn.net/gongfanfei/article/details/84591200

版权

本文介绍了如何使用Tabulator库进行动态操作，包括清空表格数据、填充数据、添加新数据、删除数据及编辑已有数据，详细阐述了每个操作的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tabulator动态增删改、填充数据以及清空数据

闲话不多话，直接上干货！

1、关于操作列表设置：

//创建并设置table属性
	var _curRow = null;
	//设置格式
	var optIconFunction = function(cell, formatterParams){ //plain text value
		var yhbh = cell.getRow().getData().f_yhbh;
		return "<div class='btn-group '><button class='btn btn-white btn-sm edit' data-id="+ yhbh + " data-toggle='modal' data-target='#editUserFormTable'><i class='fa fa-pencil' ></i> 编辑</button>"
				+"<button class='btn btn-white btn-sm delete' data-id=" + yhbh + "><i class='fa fa-trash'></i>  删除</button></div>"
	};
	$("#euserTable").tabulator({
		height:"100%",
		layout:"fitColumns",//fitColumns  fitDataFill
		columnVertAlign:"bottom", //align header contents to bottom of cell
		tooltips:true,
		selectable:1,//选中一行
		movableColumns:true,//列可拖动
		columns:[
		{title:"序号",field:"id",width:50,formatter:"rownum",frozen:false,align:"center",headerSort:false,tooltip:false,tooltipsHeader:false},
		{title:"登录账号", field:"f_yhbh", sorter:"string",align:"left",editor:false,headerSort:false}, //never hide this column
		{title:"用户姓名", field:"f_name",sorter:"string",align:"left",editor:false,headerSort:false}, //hide
		{title:"创建时间", field:"f_crdate",sorter:"date",align:"center",editable:false,headerSort:false},
		{title:"修改时间", field:"f_chdate",sorter:"date",align:"center",editor:false,headerSort:false},
		{title:"操作", field:"opt",width:250,tooltip:false,tooltipsHeader:false,align:"left",formatter:optIconFunction,headerSort:false},
		],
		rowClick:function(e, row){
        	_curRow = row;
    	},
	});

2、清空表格数据

// 清空表格数据
$("#Table").tabulator("clearData");

3、填充表格数据

// 填充表格数据
$("#Table").tabulator("setData", result);
//如果设置空
$("#Table").tabulator("setData", []);

4、添加数据

// 在表格中静态添加数据
$('#euserTable').tabulator("addRow", {
			            	f_yhbh:result.f_yhbh, //用户编号
			            	f_name:result.f_name, //用户名
			            	f_crdate:result.f_crdate, //创建时间
			            	f_chdate:result.f_chdate//修改时间
			            	});

5、删除数据

$("#euserTable").tabulator("deleteRow", _curRow);//_curRow为定义的变量当前行

6、编辑数据

 $('#euserTable').tabulator("updateRow",_curRow, {
			        	 yhbh:result.f_yhbh, //yhbh:对应填充表格field的值，result.f_yhbh为变化的值
			        	 name:result.f_name, 
			        	 chdate:result.chdate
			        	 });