return " " 语句中的 if else 语句

Question

这可能吗？如果approvedby 列不为空，我将尝试隐藏“批准”按钮。这是来自服务器端数据表。我的问题是我找不到使用 if else 的方法，因为我使用的是return ""。

这是脚本。

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
return "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> <button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> if (empty("+full.approvedby+")) { <button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>}";}
                        }
        ],
        select: false,
        buttons: []
    } );
} );

这就是结果。我似乎找不到让if else 在return "" 内部工作的方法。

Answer 1

试试这个

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { 
                data: "accountcode",
                name: " ",
                autoWidth: true,
                render: function (data, type, full, meta) {
                    let html = "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.accountcode+"'><i class='fa fa-edit'></i> Edit</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";
                    html += "<button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.accountcode+"'><i class='fa fa-trash'></i> Delete</button> ";

                    if (!full.approvedby)
                        html += "<button class='btn btn-warning btn-sm approve btn-flat' data-id='"+full.accountcode+"'><i class='fa fa-check-square-o'></i> Approve</button>";

                   return html;
                }
            }
        ],
        select: false,
        buttons: []
    } );
} );

注意我删除了你在 if 语句中使用的 empty() 函数。

它不起作用的原因是因为您将 if 语句编写为字符串，因此它没有作为 javascript 代码处理。

这是一个关于如何在 javascript 中编写内联 if 语句的示例。

return 'Hello my name is ' + (name === 'Miroslav' ? name : 'Anonymous') + ' and I just wrote an inline if statement';

Answer 2

我会使用条件运算符来检查 approvedby 属性 - 如果不为 null，则使用包含按钮的字符串，否则使用空字符串。您还可以使用模板文字来大大提高可读性：

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        return `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
          ${approvedby !== null
            ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
                 <i class='fa fa-check-square-o'></i>
                 Approve
               </button>}`
            : ''
          }
         `;
      }
    }
  ],
  select: false,
  buttons: []
});

另一种选择是使用if 语句与定义原始 HTML 后要返回的字符串连接：

$('#example').DataTable({
  dom: "Bfrtip",
  ajax: {
    url: "earnings_amendment_account_table.php",
    type: "POST"
  },
  serverSide: true,
  columns: [{
      data: "accountcode"
    },
    {
      data: "accounttitle"
    },
    {
      data: "accounttype"
    },
    {
      data: "approvedby"
    },
    {
      "data": "accountcode",
      "name": " ",
      "autoWidth": true,
      "render": function(data, type, { accountcode, approvedby }, meta) {
        let str = `
          <button class='btn btn-success btn-sm btn-flat edit' data-id='${accountcode}'>
            <i class='fa fa-edit'></i>
            Edit
          </button>
          <button class='btn btn-danger btn-sm btn-flat delete' data-id='${accountcode}'>
            <i class='fa fa-trash'></i>
            Delete
          </button>
        `;
        if (approvedby !== null) {
          str += `
            <button class='btn btn-warning btn-sm approve btn-flat' data-id='${accountcode}'>
              <i class='fa fa-check-square-o'></i>
              Approve
            </button>}`;
        }
        return str;
      }
    }
  ],
  select: false,
  buttons: []
});

Answer 3

嗯，你在一个字符串中传递你的if 语句，这会告诉你的浏览器

1. 将此字符串作为 JavaScript 读取
2. 将其作为字符串读取

浏览器不会将其解释为代码。

不如试试这样的：

$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "earnings_amendment_account_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "accountcode" },
            { data: "accounttitle" },
            { data: "accounttype" },
            { data: "approvedby" },
            { "data": "accountcode", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
              return `<button class='btn btn-success btn-sm btn-flat edit' data-id='${full.accountcode}'>
                <i class='fa fa-edit'></i> Edit
              </button>
              <button class='btn btn-danger btn-sm btn-flat delete' data-id='${full.accountcode}'>
                <i class='fa fa-trash'></i> Delete
              </button>
              ${(full.approvedby == '') ? `<button class='btn btn-warning btn-sm approve btn-flat' data-id='${full.accountcode}'><i class='fa fa-check-square-o'></i> Approve</button>` : ''}`;
          }
        ],
        select: false,
        buttons: []
    } );
} );

这将阻止 JavaScript 读取字符串并实际查询 approvedby 中是否存在值。