如何选择easyui datagrid表之外的下拉值

Question

我正在开发使用 jquery easyui Datagrid 表的 Codeigniter Web 应用程序，我创建了位于 easyui Datagrid 表之外的下拉列表，现在如何在加载 Datagrid 表时选择下拉值？

问题是函数正在工作，但函数从下拉列表中选择了所有值，我需要选择与状态值相等的单个下拉值？

数据网格表

<table
                id="tt"
                class="easyui-datagrid"
                url="<?php echo base_url()."contacts/contacts_list_data"; ?>"

                pagination="true"
                rownumbers="true"
                toolbar="#tb"
                pageSize="10"
                pageList="[5,10,20,50,100]"
                fit= "true"
                fitColumns= "true"
                nowrap= "true"
                view= "detailview"
                idField="id"
                >
            <thead>
            <tr>
                <th field="id"  checkbox="true"></th>

                <th field="status"  sortable="true"><?php echo $this->lang->line('Status'); ?></th>
                <th field="status_type"  formatter='status_column'><?php echo $this->lang->line('Status'); ?></th>
                 </tr>
            </thead>

        </table>

数据网格表之外的下拉菜单

  <script>
    function status_column(value,row,index)
    {
        var inputVal = document.getElementById("status_column").innerHTML;
        return inputVal;
    }
    </script>
    <div id="status_column" style="display:none">
    
       <select name="stat_column" id="stat_column"  class="form_control stat_column">
            <option value="">Select Status</option>
            <option value='All'>All</option>
            <option value='Open'>Open</option>
            <option value='Closed'>Closed</option>
            <option value='Won'>Won</option>
            <option value='Lost Price is High'>Lost Price is High</option>
            <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
            <option value='Lost Other'>Lost Other</option>
            <option value='Never Replied Back'>Never Replied Back</option>
            <option value='Bad Email'>Bad Email</option>
            <option value='Bad Number'>Bad Number</option>
            <option value='Do Not Disturb'>Do Not Disturb</option>
       </select>
    </div>

根据数据网格表列值获取下拉值选择的函数

<script>
    var selected=[];
    $(function () {
        $('#tt').datagrid({
            onLoadSuccess:function(index, row ){
                var rows = $('#tt').datagrid('getRows');
                if(rows){
                    $.each(rows, function( index, row ) {
                        console.log(row+index)
                        selected.push(row.status)
                    })
                    console.log(userstatus);
                    $('#stat_column option[value="' + selected + '"]', row).attr('selected', 'selected');
                }
            }
        });
    })
</script>

这里是表格和控制台的屏幕截图

Answer 1

您可以使用index 值获取需要设置选定值的tr，然后使用.find() 在该tr 中找到您的选择框，并使用.prop 设置选定选项。

演示代码：

 var selected=[];
$(function() {
  $('#tt').datagrid({
    onLoadSuccess: function(index, row) {
      var rows = $('#tt').datagrid('getRows');
      if (rows) {
        $.each(rows, function(index, row) {
          //get the tr with index same ..and then use .find to get select and set slected there ...
          $('.datagrid-body tr[datagrid-row-index =' + index + ']').find('select option[value="' + row.status.trim() + '"]').prop('selected', true);
           selected.push(row.status)
        })
      }
    }
  });
})

function status_column(value, row, index) {
  var inputVal = document.getElementById("status_column").innerHTML;
  return inputVal;
}

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<!--i have remove `url=".."` just for demo-->
<table id="tt" class="easyui-datagrid" pagination="true" rownumbers="true" toolbar="#tb" pageSize="10" pageList="[5,10,20,50,100]" fit="true" fitColumns="true" nowrap="true" view="detailview" idField="id">
  <thead>
    <tr>
      <th data-options="field:'id',width:80" checkbox="true"></th>
      <th data-options="field:'status',width:90" sortable="true">
        Status
      </th>
      <th data-options="field:'status_type',width:80" formatter='status_column'>
        Status
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
      </td>
      <td>
        Open
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Closed
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        Do Not Disturb
      </td>

    </tr>
  </tbody>

</table>

<div id="status_column" style="display:none">

  <select name="stat_column" class="form_control stat_column">
    <option value="">Select Status</option>
    <option value='All'>All</option>
    <option value='Open'>Open</option>
    <option value='Closed'>Closed</option>
    <option value='Won'>Won</option>
    <option value='Lost Price is High'>Lost Price is High</option>
    <option value='Lost Not Enough Features'>Lost Not Enough Features</option>
    <option value='Lost Other'>Lost Other</option>
    <option value='Never Replied Back'>Never Replied Back</option>
    <option value='Bad Email'>Bad Email</option>
    <option value='Bad Number'>Bad Number</option>
    <option value='Do Not Disturb'>Do Not Disturb</option>
  </select>
</div>