Question

试图将已定义的行的选择值更新为基于另一个单元格的选择值初始化的editParams值到备用集。在示例代码中，您将看到用户是否选择了一个模块，我正在尝试更新在所选模块上配置的可用权限。非常感谢您的帮助。

我查看了控制台日志中的对象，但看不到任何方法。

`function rolesTable(rolesTableName) {
var rolesTable;

setTimeout(function() {

    rolesTable = new Tabulator(rolesTableName, {
        data:orgRolesData,
        height:"311px",
        layout:"fitColumns",
        placeholder:"No Data Set",
        addRowPos:"top",
        cellEdited:function(cell){
            var data = cell.getData();
            var row = cell.getRow();

            if (data['module'] == "Organization") {
                /*
                How to set the actions select values for the row
                ?? row.C
                */
            }

            var column = cell.getColumn();
            console.log(row);

        },


        columns:[
            {title:"Name", field:"name", sorter:"string", width:200, editor:"input"},
            {title:"Module", field:"module", sorter:"string", editor:"select", editorParams:{values:{"Organization":"Organization", "User":"User", "Event":"Event", "Asset":"Asset"}} },
            {title:"Action", field:"action", sorter:"string", editor:"select", editorParams:{values:{"A":"A", "B":"B", "C":"C"}} },
            {title:"Create", field:"create", align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
            {title:"Read", field:"read", align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
            {title:"Update", field:"update", align:"center", formatter:"tickCross", sorter:"boolean", editor:false},
            {title:"Delete", field:"delete", align:"center", formatter:"tickCross", sorter:"boolean", editor:false},
        ],
        initialSort:[
            {column:"name", dir:"asc"}, //sort by this first
            {column:"module", dir:"desc"}, //then sort by this second
            ]

        });


    rolesTable.redraw();
}, 800);

}`

Answer 1

const tabledata = [{
  dep: "A",
  name: "Oli Bob",
  score: 100
}];

const orignalColumns = [{
    title: "Name",
    field: "name",
    sorter: "string",
    width: 200,
    editor: "input"
  },
  {
    title: "Module",
    field: "module",
    sorter: "string",
    editor: "select",
    editorParams: {
      values: {
        "Organization": "Organization",
        "User": "User",
        "Event": "Event",
        "Asset": "Asset"
      }
    }
  },
  {
    title: "Action",
    field: "action",
    sorter: "string",
    editor: "select",
    editorParams: {
      values: {
        "A": "A",
        "B": "B",
        "C": "C"
      }
    }
  },
  {
    title: "Create",
    field: "create",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: true
  },
  {
    title: "Read",
    field: "read",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: true
  },
  {
    title: "Update",
    field: "update",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: false
  },
  {
    title: "Delete",
    field: "delete",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: false
  },
];

const modifieldColumns = [{
    title: "Name",
    field: "name",
    sorter: "string",
    width: 200,
    editor: "input"
  },
  {
    title: "Module",
    field: "module",
    sorter: "string",
    editor: "select",
    editorParams: {
      values: {
        "Organization": "Organization"
      }
    }
  },
  {
    title: "Action",
    field: "action",
    sorter: "string",
    editor: "select",
    editorParams: {
      values: {
        "A": "A",
        "B": "B",
        "C": "C"
      }
    }
  },
  {
    title: "Create",
    field: "create",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: true
  },
  {
    title: "Read",
    field: "read",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: true
  },
  {
    title: "Update",
    field: "update",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: false
  },
  {
    title: "Delete",
    field: "delete",
    align: "center",
    formatter: "tickCross",
    sorter: "boolean",
    editor: false
  },
];

const table = new Tabulator("#example-table", {
  data: tabledata,
  cellEdited: function(cell) {
    const data = cell.getData();

    if (data['module'] === "Organization") {
      table.setColumns(modifieldColumns);
    }


  },
  columns: orignalColumns
});

<head>

  <link href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>
</body>

基于另一个选择的dataedit触发，更新行选择editparams

1 个答案: