Как создать выпадающий список в столбце данных? - PullRequest
Новая
       0

Как создать выпадающий список в столбце данных?

0 голосов
/ 09 января 2019

Я хочу иметь выпадающий список в столбце моей таблицы данных. Я заполняю свои данные данными json, для которых у меня есть объекты json и массив, содержащий все эти объекты json.

HTML: 

<table id="orderDescriptionTable" class="table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> Status </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript / JQuery: 

var obj1 = {
    srNo : "12",
    item: "Notebook",
    status: '<select id="status-1" class="status"></select>'
};
var obj2 = {
    srNo : "15",
    item: "Notebook",
    status: '<select id="status-2" class="status"></select>'
};
var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});

Я хочу, чтобы в моем столбце «Состояние» таблицы было выпадающее меню. Я пытался добавить теги в $ («. Status»), но это, похоже, не помогло. Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 09 января 2019

Надеюсь, это то, что вам нужно?

jsfiddle 

<table id="orderDescriptionTable" class="table table-bordered">
   <thead>
     <tr>
        <th> Sr.no. </th>
        <th> Item </th>
        <th> 
            <span style="margin-left:25px;">Status</span> 
            <select id="status-1" class="status">
                <option value="1" class="status">1</option>
                <option value="2" class="status">2</option>
            </select> 
        </th>
     </tr>
  </thead>
  <tbody></tbody>
</table>
<script>

var dataSet = [];

$('#orderDescriptionTable').DataTable({
    data: dataSet,
    columns: [{
        "data": function(data) {
             return data.srNo;
        }
    }, {
        "data": function(data) {
             return data.item;
        }
    },  {
        "data": function(data) {
            return data.status;
        }
    }
    ]
});
$('#status-1').click(function(e){
    e.stopPropagation();
});

</script>
0 голосов
/ 09 января 2019

Вот простой набор данных с одним столбцом (заполненным некоторыми ненужными данными), который показывает список выбора, отображаемый в столбце:

HTML-разметка: 

<body>
    <table class="display" id="exampleTable" width="60%">
        <thead>
            <tr>
                <th>Select List Col</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

DataTable: 

jQuery(function($) {

var testData = [
    ["test1", "test", "1"],
    ["test2", "test", "2"],
    ["test3", "test", "3"],
    ["test4", "test", "4"]
  ]

$('#exampleTable').DataTable({
      retrieve: true,
      paging: false,
      data : testData,
      columns: [ {
        "title": "Select List Col",
        "render": function(data, type, row, meta) {
          var a = testData.indexOf(row);
       var select = $("<select id='role_"+a+"'><option value ='1'>Option 1</option><option value ='2'>Option 2</option</select>");

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

       return select.prop("outerHTML")
        }
      } ],
      order: []
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...