jQuery datatable - 在列中选择列表 [英] jQuery datatable - Select list within column

查看:187
本文介绍了jQuery datatable - 在列中选择列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前在jQuery数据表中拉数据,这是一个盛大的!但是我在角色列中出现问题。

I am currently pulling data in a jQuery datatable which is grand! But I am having an issue with the Role column.

我试图在该列中插入一个选择列表,其中有两个选项admin& 用户和数组中的任何数据设置选择列表中的值。

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>

JSfiddle

欢迎任何建议或建议

推荐答案

这些是您的代码中的几个问题,如数据表选项不应该在中。在这里检查更正的提示。

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 /

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

fiddler。

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

这篇关于jQuery datatable - 在列中选择列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆