我如何 select 在 easyui datagrid table 之外的下拉值
How do i select dropdown values which is outside from easyui datagrid table
我正在开发 Codeigniter Web 应用程序,我在其中使用了 jquery easyui Datagrid table,我创建了位于 easyui Datagrid table 之外的下拉列表,现在如何在加载 Datagrid table 时 select 下拉值?
问题是该函数正在运行,但是函数 select 将下拉列表中的所有值组合在一起,我需要 select 单个下拉值等于状态值?
数据网格Table
<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>
数据网格外的下拉菜单 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>
根据数据网格table列值
获取下拉值select的函数
<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>
这里是table和控制台的截图
您可以使用 index
值获取 tr
需要设置 selected 值然后使用 .find()
找到您的 select- tr 内的框并使用 .prop
设置 selected 选项。
演示代码 :
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>
我正在开发 Codeigniter Web 应用程序,我在其中使用了 jquery easyui Datagrid table,我创建了位于 easyui Datagrid table 之外的下拉列表,现在如何在加载 Datagrid table 时 select 下拉值?
问题是该函数正在运行,但是函数 select 将下拉列表中的所有值组合在一起,我需要 select 单个下拉值等于状态值?
数据网格Table
<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>
数据网格外的下拉菜单 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>
根据数据网格table列值
获取下拉值select的函数<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>
这里是table和控制台的截图
您可以使用 index
值获取 tr
需要设置 selected 值然后使用 .find()
找到您的 select- tr 内的框并使用 .prop
设置 selected 选项。
演示代码 :
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>