我使用Jquery数据表来填充数据和代码如下。
这里我在页面加载时为每个下拉列加载默认的选项集，它运行正常。但是当尝试从Ajax查询收到的响应中更新下拉选择值时，它无法正常工作。所以想知道用ajax数据更新drodown列的方法。
$(document).ready(function () {
//Make a call to read eventfrmaes
// GetEeventFrames();
GetEnumset();
GetAFTable();
//define datatable
oTable = $('#example').DataTable({
"sScrollX": '100%',
"sScrollXInner": "150%",
"bSort": false,
"pagingType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": false,
"searching": false,
"sScrollY": '300px',
"bScrollCollapse": true,
"info": false,
//"bAutoWidth": false ,
columns: [
{ data: "ID", "visible": false },
{ data: "Name", "visible": false },
{ data: "Asset", "sWidth": "10%" },
{ data: "Asset Name" },
{ data: "Star Time", "sWidth": "10%" },
{ data: "Stop Time", "sWidth": "12%" },
{ data: "Duration", "visible": false },
{
"render": function (d, t, r) {
var $select = $("<select id='Causecode' class='cCausecode'></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtCauseCodes, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
// alert(r[0] + "start");
return $select.prop("outerHTML");
}
},
{
//data: "Cause Code full Name"
"render": function (d, t, r) {
var $select = $("<select id='Causecodefullname' class='cCausecodefullname' style='width:100px' ></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtCauseCodesfullname, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{
"render": function (nRow, aData, iDataIndex) {
return '<input type="text" id="textbox" class="txtBox">';
}
},
{
//data: EventType
//"render": function (nRow, aData, iDataIndex) {
// return '<select name="Eventtype" id="Eventtype" size="1" style="width:150px"></select>';
//}
"render": function (d, t, r) {
var $select = $("<select id='Eventtype' style='width:100px'></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtEventTypes, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}, "visible": false
},
{
//data: "Failure Mechanism"
"render": function (d, t, r) {
var $select = $("<select id='failMech' class='cfailMech' style='width:100px'></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtFailMechanism, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{
// data: "Failure Mechanism Subdivision"
"render": function (d, t, r) {
var $select = $("<select id='failMechsubd' class='cfailMechsubD' style='width:150px'></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtFailMechanismSubDiv, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{
//data: "Production Loss"
"render": function (d, t, r) {
var $select = $("<select id='Prodloss' class='cprodLoss' style='width:100px' ></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtProdLoss, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{
//data: "Fuel Used"
"render": function (d, t, r) {
var $select = $("<select id='Fuelused' style='width:100px'></select>", {
"id": r[0] + "start",
"value": d
});
$.each(dtFuelUsed, function (k, v) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (d === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{ data: "WebID","visible": false },
]
});
});
function GetEeventFrames() {
var asset;
var sdate = $.datepicker.formatDate("yy-mm-dd", $("#datepickerStartDate").datepicker("getDate"));
var edate = $.datepicker.formatDate("yy-mm-dd", $("#datepickerEndDate").datepicker("getDate"));
$('#Eventtype').empty();
$.each(dtEventTypes, function (key, value) {
$('#Eventtype')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
var url = basewebapiUrl + "assetdatabases/" + getEventframeswebid + "/eventframes?TemplateName=" + efTemplateName + "&Starttime=" + sdate + "&endtime=" + edate;
MakeAjaxRequest('GET', url, function (data) {
for (var i = 0; i < data.Items.length; i++) {
var Stardate = new Date(data.Items[i].StartTime);
var Enddate = new Date(data.Items[i].EndTime);
if (Enddate.getFullYear() != '9999') {
var x = data.Items[i].Name;
var strings = x.split('_');
efwebIds[i] = data.Items[i].WebId;
//*Here I Want to add selected values which i got from ajex query to Dropdown columns like cause code, failure mechanism, production loss etc.
oTable.row.add({
"ID": data.Items[i].Id,
"Name": data.Items[i].Name,
"Asset": "AT-" + strings[1],
"Asset Name": "-",
"Star Time": Stardate.toLocaleString(),
"Stop Time": Enddate.toLocaleString(),
"Duration": "-",
"WebID": data.Items[i].WebId,
//set selected value to cause code
"Causecode": data.Items[i].Causecode
}).draw();
}
}
});
alert("Load completed");
} <div id="datatable">
<table id="example" class="ui celled table" cellspacing="0" style="width: 650px;">
<thead>
<tr>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">Name</th>
<th style="text-align: center;">Asset</th>
<th style="text-align: center;">Asset Name</th>
<th style="text-align: center;">Star Time</th>
<th style="text-align: center;">End Time</th>
<th style="text-align: center;">Duration</th>
<th style="text-align: center;">Cause Code</th>
<th style="text-align: center;">Cause Code Full Name</th>
<th style="text-align: center;">Comments</th>
<th style="text-align: center;">Event Type</th>
<th style="text-align: center;">Failure Mechanism</th>
<th style="text-align: center;">Failure Mechanism Subdivision</th>
<th style="text-align: center;">Production Loss</th>
<th style="text-align: center;">Fuel Used</th>
<th style="text-align: center;">WebID</th>
</tr>
</thead>
</table>
</div>