Question

我目前正在jQuery数据表中提取数据，这是非常棒的！但我在角色列中遇到了问题。

我正在尝试插入该列中的选择列表，该列表将包含两个选项“admin”＆amp; “用户”以及数组中的任何数据在选择列表中设置该值。

但是我无法将选择列表呈现到表中，然后根据数组中的whats将其设置为admin或user。

jQuery(function($) {
  var data = [
    ["test1", "admin", "yes"],
    ["test2", "admin", "yes"],
    ["test3", "user", "no"],
    ["test4", "user", "no"]
  ]

  function authusers() {
    t = $('#authTable').DataTable({
      retrieve: true,
      paging: false,
      data: data,
      columns: [{
        "title": "Email",
        "render": function(data, type, row, meta) {
          return row[0];
        }
      }, {
        "title": "Role",
        "render": function(data, type, row, meta) {
          return row[1];
        }
      }, {
        "title": "Active",
        "render": function(data, type, row, meta) {
          var checkbox = $("<input/>", {
            "type": "checkbox"
          });
          checkbox.attr("checked", (row[2] === "yes"));
          checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked")
          return checkbox.prop("outerHTML")
        }
      }, ],
      order: []
    });
  }

  //Passes value and if it was enabled or disabled value to serverside.
  $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() {
    if ($(this).is(':checked')) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'yes';
    } else if ($(this).prop('checked', false)) {
      var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
      var status = 'no';
    }
  });
  authusers();
});

<link href="//cdn.datatables.net/1.10.11/css/jQuery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<body>
  <table class="display" id="authTable" width="60%">
    <thead>
      <tr>
        <th>Email</th>
        <th>Active</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>

还有JSfiddle

欢迎任何建议或建议！

Answer 1

这些是您的代码中的几个问题，例如数据表选项不应该在“”中。在这里检查纠正的提琴手。

https://jsfiddle.net/fjxbz50w/6/

jQuery(function($) {

var sdata = [
["test1", "admin", "yes"],
["test2", "admin", "yes"],
["test3", "user", "no"],
["test4", "user", "no"]
]

function authusers(data) {
t = $('#authTable').DataTable({
  retrieve: true,
  paging: false,
  data : sdata,
  columns: [{
    "title": "Email",
    "render": function(data, type, row, meta) {
      return row[0];
    }
  }, {
    "title": "Role",
    "render": function(data, type, row, meta) {
      return row[1];
    }
  }, {
    "title": "Active",
    "render": function(data, type, row, meta) {
      var checkbox = $("<input/>", {
        "type": "checkbox"
      });
      checkbox.attr("checked", (row[2] === "yes"));
      checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked")
      return checkbox.prop("outerHTML")
    }
  }, ],
  order: []
  });
 }

 //Passes value and if it was enabled or disabled value to serverside.
  $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() {
  if ($(this).is(':checked')) {
  var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
  var status = 'yes';
  console.log(rowIndex);
  console.log(status);
} else if ($(this).prop('checked', false)) {
  var rowIndex = $(this).closest('tr').find('td:eq(0)').text();
  var status = 'no';
  console.log(rowIndex);
  console.log(status);
  }
  });
  authusers();
});

for Role列中的select可以这样做。

"title": "Role",
    "render": function(data, type, row, meta) {
       var a = sdata.indexOf(row);
       var select = $("<select id='role_"+a+"'><option value ='admin'>admin</option><option value ='user'>user</option</select>");

       $("#role_"+a).val(row[1]);

       return select.prop("outerHTML")

这是更新的提琴手。

https://jsfiddle.net/fjxbz50w/11/

Answer 2

这就是我实现这样的目标的方法，可能对某人有所帮助：）

 {
    "title": "", "render": function (data, type, full, meta) {
        var html = '<div>';
        var $select = $("<select></select>", {
            "id": "EmployeeId_"+ full.Id,
            "value": full.Name
        });
        $select.append("<option value =''></option>");
        $.each(full.EmployeeList, function (index, element) {                                                                
            var $option = $("<option></option>", {
                "text": element.Id,
                "value": element.Name
            });

            if (full.Id === element.Id) {
                $option.attr("selected", "selected")
            }

            $select.append($option);
        });

        html += $select[0].outerHTML;
        html += '<a href="#" onclick="changeName(this,' + full.Id + ')" id="tag' + full.Id + '">Change</a>';
        html += '</div>';

        return html;
    } 
}

jQuery datatable - 在列中选择列表

2 个答案: