将 json 添加到 tabledit 选择参数

Posted 2023-05-08

【中文标题】将 json 添加到 tabledit 选择参数

【英文标题】：add a json to a tabledit select parameter

【发布时间】：2021-07-09 23:12:17

【问题描述】：

我正在使用 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"']]

【参考方案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");
       
   );
  );

【讨论】：

行editable: [ [2, 'color', jsonstring], getOptionsConfig(3, 'psp', data) ]，应该像editable: [ [2, 'PSP', ' "2677":"Stripe","2678":"AmazonPay","2698":"Paypal","2699":"Unknown"']]... 我相信这不是您的代码给出的输出（它给了我一个错误）

这是一个示例用法。如果你想完全像这样使用editable: [getOptionsConfig(2, 'PSP', data) ].