交互与前端10 Tabulator+Flask开发日志007

说明

在进行下一步之前，还有一个重要的测试要做：参数化。其实目前进度基本上9和10已经ok了。

• 1 启动本地Flask服务及组件测试
• 2 依赖文件本地化
• 3 在本地建立远端数据库的句柄
• 4 页面载入时加载参数进行表格初始化(前端一个模板、后端一个视图）
• 5 页面载入并初始化一个可读表格(暂时不用分页）-> 这个是为了展示一些数据，同时不想这些数据被编辑
• 6 页面载入并初始化一个可行内编辑的表格 -> 这个是应对希望被编辑(Update)，但是不允许增删的情况，通过焦点操作
• 7 页面载入并初始化一个可行内编辑，同时可以增加和删除数据的表格(单行) -> 这个是对于日常编辑来说正常的操作，通过焦点来单行的直接操作
• 8 页面载入并初始化一个行内编辑，可以增加和删除表格（多行）的表格-> 这个用来应对有较大批量增删改的操作，操作的变化会先计入缓存，通过按钮来批量提交后台同步
• 9 远程服务的多级下拉框筛选功能(数据库、表以及模式），模式可以有 Latest, First, Random几种，用来满足日常的需求。
• 10 远程服务下拉框变动触发表格载入，后面就和本地测试是一样的了（数据库句柄相同的）
• 11 为表格增加适当的筛选和样式等
• 12 建立元数据表，映射不同数据库服务的句柄、描述等，页面载入时将从元数据表中读取所有的句柄信息和描述信息，然后页面会基于这些信息查询当前可访问的库和表。从而完成在一个页面连接所有的数据库。包括云服务器数据库、公网数据库集群、算网数据库以及集群等。这个用途是用来快速的浏览数据，在调试和运维时很有用。

内容

1 Jinja参数化

我们希望传入表格数据是灵活可变的，这就包括了：

• 1 列，及其定义可变
• 2 行的可变。

对于表格来说，列是比较重要的。

原来的一些关键变量全部注释掉，用一个jinja变量替代，主要要使用safe过滤器。

    var table = new Tabulator("#example-table", {
 	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
 	data:[], //assign data to table
     layout:"fitColumns", //fit columns to width of table (optional)
     addRowPos: "selected",
     columns:
    //  [ //Define Table Columns
    //  {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
    //     cell.getRow().toggleSelect();
    //   }},
	//  	{title:"Name", field:"name", width:150,editor:MyCellEdit01},
	//  	{title:"Habit", field:"habit",editor:MyCellEdit01},
    //      {title:"Create Time", field:"create_time", sorter:"date", hozAlign:"center"},
    //      {title:"Update Time", field:"update_time", sorter:"date", hozAlign:"center"},
    //  ],
    //  rowClick:function(e, row){
    //     	_curRow = row;
    // 	}
    [[jinja_test2 |safe]]
});

在视图端，对应的给到响应的数据。所以，将关键变量存在数据库中，然后拼成所需的字符串即可。这样表格的创建就是完全动态的。

@app.route('/jinja_test/', methods=['GET','POST'])
def jinja_test():

    jinja_test2 ='''     [ //Define Table Columns
     {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
        cell.getRow().toggleSelect();
      }},
	 	{title:"Name", field:"name", width:150,editor:MyCellEdit01},
	 	{title:"Habit", field:"habit",editor:MyCellEdit01},
         {title:"Create Time", field:"create_time", sorter:"date", hozAlign:"center"},
         {title:"Update Time", field:"update_time", sorter:"date", hozAlign:"center"},
     ],
     rowClick:function(e, row){
        	_curRow = row;
    	}'''
    jinja_refresh_button =''''''

    return render_template('jinja_test.html', 
    jinja_refresh_button=jinja_refresh_button,jinja_test2=jinja_test2)

2 表格的销毁与重建

这块有些超出我的预料：

• 1 变量创建后不能马上 destroy(估计是不是没有载入完毕）
• 2 绑定的删除事件没有生效，估计问题类似上面的，先放过

我通过Tabulator自带的，根据ID获取表格的方法来找到对象，然后进行 destroy

function destable(){
    the_table = Tabulator.findTable("#example-table")[0]
    the_table.destroy()
}

然后将重建表格，以及一系列的事件放在新的函数里

function build_table(){

    var MyCellEdit01 = function(cell, onRendered, success, cancel){
    //cell - the cell component for the editable cell
    //onRendered - function to call when the editor has been rendered
    //success - function to call to pass thesuccessfully updated value to Tabulator
    //cancel - function to call to abort the edit and return to a normal cell

    //create and style input
    // var cellValue = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd"),
    var cellValue = cell.getValue()
    input = document.createElement("input");
    row = cell.getRow()
    $(row.getElement()).css("background-color",'')
    $(row.getElement()).css("color", "")
    // input.setAttribute("type", "date");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = cellValue;

    onRendered(function(){
        input.focus();
        input.style.height = "100%";
        input.style.background ='yellow'
    });

    function onChange(){
        if(input.value != cellValue){
            // the_id = cell.getData().id
            // alert(the_id )
            // success(alert(input.value));
            row_id = cell.getData().id
            colname = cell.getColumn().getField()
            // row = cell.getRow()
            // row.style.background ='red'

            filter_dict = {}
            attr_dict = {}
            filter_dict['tid'] = row_id
            attr_dict[colname] = input.value
            attr_dict['is_enable'] = 1
            attr_dict['update_time']= getDatetime()


            // alert(colname)
            para_dict = {}
            para_dict['filter_dict'] = filter_dict 
            para_dict['attr_dict'] = attr_dict
            row.update({'update_time' :attr_dict['update_time']})

            post_json('/update_a_cell/', para_dict, $(cell.getElement()))
            
            success(input.value);
            // cellValue = input.value
        }else{
            cancel();
        }
    }

    //submit new value on blur or change
    input.addEventListener("blur", onChange);

    //submit new value on enter
    input.addEventListener("keydown", function(e){
        if(e.keyCode == 13){
            onChange();
        }

        if(e.keyCode == 27){
            cancel();
        }
    });

    return input;
};

通过Destroy Table和Build Table两个按钮来模拟未来的表格重置事件，看起来是ok的。