jQuery 数据表 - 选择列内的列表

Question

I am currently pulling data in a jQuery datatable which is grand!我目前正在一个很棒的 jQuery 数据表中提取数据！ But I am having an issue with the Role column.但是我遇到了 Role 列的问题。

I am trying to inset a select list in that column which will have two options "admin" & "User" and whatever data is in the array set that value within the select list.我试图在该列中插入一个选择列表，它将有两个选项“管理员”和“用户”，并且数组中的任何数据都在选择列表中设置该值。

But I haven't been able to render select list into the table then set it to admin or user based on whats in the array.但是我无法将选择列表呈现到表中，然后根据数组中的内容将其设置为管理员或用户。

 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>

And also a JSfiddle还有一个JSfiddle

Any advice or recommendations are welcome!欢迎任何意见或建议！

Answer 1

These are the few issues in your code like the data table options should not be in "".这些是您代码中的少数问题，例如数据表选项不应在“”中。 Check the corrected fiddler here.在此处检查更正的提琴手。

https://jsfiddle.net/fjxbz50w/6/ 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 select in the Role column you can do like this.对于在角色列中选择，您可以这样做。

"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")

Here is the updated fiddler.这是更新的提琴手。

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

Answer 2

Here is how I've achieved something like this, May be helpful for someone :)这是我如何实现这样的目标，可能对某人有帮助:)

 {
    "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 数据表 - 选择列内的列表

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-06-13 16:18:18

解决方案2
0 2020-06-02 12:53:44

jQuery 数据表 - 选择列内的列表

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-06-13 16:18:18

解决方案2 0 2020-06-02 12:53:44

解决方案1
1 已采纳 2016-06-13 16:18:18

解决方案2
0 2020-06-02 12:53:44