交互与前端14 Tabulator 表格实践2

说明

将上一篇提到的内容进行了实现，整体上还算是比较符合预期吧，但并不是完美。这既和我的需求比较“妖”有关系，也和前端的确不太熟有关。但不管怎么样，反正实现了功能。

---

1 实现自动为表格增加有序值字段方法（这个应该是做过的，要挪移一下） ~ 1 Hour - 符合预期
2 将上述的脚本和对应视图进行检查和封装。 ~ 2 Hour - 超过预期1个小时，主要是因为建立了主键索引，当重复插入时会报错。我还以为是自己的工具有问题，调试了好一会。
3 增加自动根据数据库服务名创建连接的方法。 ~ 2 Hour - 符合预期

---

做完后我试着快速增加一个表格，大约花了5分钟，但是变量声明之类的过于粗糙，我觉得可以加一倍时间估计。这也低于之前预估的20分钟。

内容

1 将通用的js函数放到文件里

关于增删行和修改单元格的js函数。

// 编辑
var MyCellEdit02 = function(cell, onRendered, success, cancel){
   

    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){
   
            row_id = cell.getData().id
            colname = cell.getColumn().getField()
    
            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)
            cell_para_dict = JSON.parse(JSON.stringify(para_dict))
            cell_para_dict['filter_dict'] = filter_dict 
            cell_para_dict['attr_dict'] = attr_dict
    
    
            row.update({
   '_update_time' :attr_dict['_update_time']})
    
            cell_post_json('/data/view015_x_update_mongo_data/', cell_para_dict, $(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50