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

yxyvkwin  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(344)

我正在开发codeigniter web应用程序,其中我使用了jquery easyui datagrid表,我创建了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>

函数获取基于datagrid表列值选择的下拉值

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

这里是桌面和控制台的屏幕截图

t98cgbkg

t98cgbkg1#

你可以用 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>

相关问题