将 json 添加到 tabledit 选择参数

Question

我正在使用 jquery tabledit 插件，我需要使用来自 URL 的 JSON 来提供 tabledit 的选择。 我有来自远程 URL (getpsp.php) 的 JSON，如下所示：

[{"id":"2698","psp":"Paypal"},{"id":"2699","psp":"Unknown"},{"id":"2677","psp":"Stripe"},{"id":"2678","psp":"AmazonPay"}]

我的 JS 代码如下：

$('#pspmap').on('draw.dt', function() {
     $.ajax({
       url: 'ajax/getpsp.php',
       type: 'GET',
       dataType: 'html',
       success: function(data, status, xhr)
       {
          var jsonstring = JSON.stringify(data);
         
       },
       error: function(xhr, status, error)
       {
           
           alert("error");
       }
   });
    
      $('#pspmap').Tabledit({
          url: 'ajax/action.php',
          dataType: 'json',
          columns: {
              identifier: [0, 'id'],
              editable: [
                 [2, 'color', jsonstring]
                ]},
          deleteButton: false,
          hideIdentifier: true,
          restoreButton: false,
          onSuccess: function(data, textStatus, jqXHR) {
              if (data.action == 'delete') {
                  $('#' + data.id).remove();
                  $('#pspmap').DataTable().ajax.reload();
              }
          }
      });
  });

我怀疑 JSON 的字符串化不正确，它应该如下所示： （根据 tabledit 网站上的示例）

editable: [ [3, 'avatar', '{"1": "Black Widow", "2": "Captain America", "3": "Iron Man"}']]

Answer 1

您可以像这样将响应数据转换为可编辑的列下拉选项字符串

const options = [{"id":"2698","psp":"Paypal"},{"id":"2699","psp":"Unknown"},{"id":"2677","psp":"Stripe"},{"id":"2678","psp":"AmazonPay"}];

const result = options.reduce((acc, opt, index) => {
  acc[opt.id] = opt.psp;
  return acc;
}, {})

console.log(JSON.stringify(result))

然后你可以在你的代码中集成相同的可重用函数。

function getOptionsConfig(col, key, options) {
  const result = options.reduce((acc, opt, index) => {
      acc[opt.id] = opt.psp;
      return acc;
    }, {});
  return [col, key, JSON.stringify(result)];
}

$('#pspmap').on('draw.dt', function() {
     $.ajax({
       url: 'ajax/getpsp.php',
       type: 'GET',
       dataType: 'html',
       success: function(data, status, xhr) {
          $('#pspmap').Tabledit({
              url: 'ajax/action.php',
              dataType: 'json',
              columns: {
                  identifier: [0, 'id'],
                  editable: [ [2, 'color', jsonstring], getOptionsConfig(3, 'psp', data) ]},
              deleteButton: false,
              hideIdentifier: true,
              restoreButton: false,
              onSuccess: function(data, textStatus, jqXHR) {
                  if (data.action == 'delete') {
                      $('#' + data.id).remove();
                      $('#pspmap').DataTable().ajax.reload();
                  }
              }
          });
       },
       error: function(xhr, status, error) {
           alert("error");
       }
   });
  });