Как показать значение метки в раскрывающемся списке ячейки вместо сохраненного значения? - PullRequest
Новая
       16

Как показать значение метки в раскрывающемся списке ячейки вместо сохраненного значения?

0 голосов
/ 21 мая 2019

Я использую Tabulator.js для создания интерактивной таблицы.У меня есть выпадающая ячейка (тип редактора: выберите), и я узнал, как при выборе из списка показывать различные метки (инструкции можно найти здесь , третий способ).

КогдаЯ выбираю что-то, отображается сохраненное значение, но не метка (которая отображается при нажатии на список).Мне бы хотелось, чтобы сохраненным значением был идентификатор из базы данных, и я не хочу, чтобы пользователь вообще его видел, только текст метки.

Вот пример кода: 

var table = new Tabulator("#example-table", {
    data:tabledata,           //load row data from array
    layout:"fitColumns",      //fit columns to width of table
    responsiveLayout:"hide",  //hide columns that dont fit on the table
    tooltips:true,            //show tool tips on cells
    addRowPos:"top",          //when adding a new row, add it to the top of the table
    history:true,             //allow undo and redo actions on the table
    pagination:"local",       //paginate the data
    paginationSize:7,         //allow 7 rows per page of data
    movableColumns:true,      //allow column order to be changed
    resizableRows:true,       //allow row order to be changed
    initialSort:[             //set the initial sort order of the data
        {column:"name", dir:"asc"},
    ],
    columns:[                 //define the table columns
        {title:"Name", field:"name", editor:"select", editorParams:{
    values:{
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
        "jim":"Jim Stevenson",
    }
}},
    ],
});

1 Ответ

0 голосов
/ 21 мая 2019

Просто поменяйте местами значения, затем 

const tabledata = [{
    name: 'Steve Stevenson'
  },
  {
    name: 'Bob Boberson'
  },
  {
    name: 'Tim Timmersonn'

  },
  {
    name: 'Steve Boberson'
  }
];


const table = new Tabulator("#example-table", {
  data: tabledata, //load row data from array
  layout: "fitColumns", //fit columns to width of table
  responsiveLayout: "hide", //hide columns that dont fit on the table
  tooltips: true, //show tool tips on cells
  addRowPos: "top", //when adding a new row, add it to the top of the table
  history: true, //allow undo and redo actions on the table
  pagination: "local", //paginate the data
  paginationSize: 7, //allow 7 rows per page of data
  movableColumns: true, //allow column order to be changed
  resizableRows: true, //allow row order to be changed
  initialSort: [ //set the initial sort order of the data
    {
      column: "name",
      dir: "asc"
    },
  ],
  columns: [ //define the table columns
    {
      title: "Name",
      field: "name",
      editor: "select",

  
  editorParams: {
  
    values: {
      "Steve Boberson": "steve",
      "Bob Jimmerson": "bob",
      "Jim Stevenson": "jim"
    }
    
  }
    


    },
  ],
});
<!DOCTYPE html>

<html>

<head>

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


</head>

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

</body>

</html>
...