问题
Im using a Kendo UI listView with a template, how every when the form is submitted and the data is posted all dropdownlists are posted as an array. Thanks in advance!!!
Heres my drop down lists in the template
<input name="id_proof_clt" data-bind="value:id_proof_clt" data-value-field="value_opt" data-text-field="label_opt" data-option-label="Select" data-source="dsIdProof" data-role="dropdownlist" />
heres the array it posts
id_proof_clt['id_opt']
id_proof_clt['category_opt']
id_proof_clt['label_opt']
id_proof_clt['value_opt']
Now these are the fields in my DB table. I only want it to post the 'value_opt'. Heres my datasource.
var dsIdProof = new kendo.data.DataSource({
transport: {
read: {
url: "/data/options/",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation === "read") {
return options;
}
}
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "id_proof"
}]
});
The json it returns is:
jQuery1910549811847275123_1415223627371([{"id_opt":150,"category_opt":"id_proof","value_opt":"Driving Licence","label_opt":"Driving Licence"},{"id_opt":151,"category_opt":"id_proof","value_opt":"Passport","label_opt":"Passport"}])
Now heres my Transport, Model, Datasource and listView:
/***********************
CLIENT TRANSPORT
***********************/
var clientTransport = {
read: {
url: "/data/clients/",
dataType: "jsonp"
},
create: {
url: "/data/clients/create",
type: "POST",
dataType: "jsonp",
complete: function(e) {
if (document.getElementById('gridClients')) {
$("#gridClients").data("kendoGrid").dataSource.read();
}
}
},
update: {
url: "/data/clients/update",
type: "POST",
dataType: "jsonp",
complete: function(e) {
if (document.getElementById('gridClients')) {
$("#gridClients").data("kendoGrid").dataSource.read();
}
}
},
destroy: {
url: "/data/clients/destroy",
type: "POST",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
options.dob_clt = kendo.toString(options.dob_clt,"yyyy-MM-dd");
options.dob_2_clt = kendo.toString(options.dob_2_clt,"yyyy-MM-dd");
//IF FOREIGN KEYS ARE EMPTY SET TO NULL
if(options.sales_advisor_clt == ''){
options.sales_advisor_clt = 'null';
}
if(options.case_manager_clt == ''){
options.case_manager_clt = 'null';
}
if(options.chaser_clt == ''){
options.chaser_clt = 'null';
}
}
return options;
}
}
/***********************
CLIENT MODEL
***********************/
var clientModel = kendo.data.Model.define( {
id: "id_clt",
fields: {
id_clt: { editable: false },
title_clt: { editable: true },
fname_clt: { editable: true },
mname_clt: { editable: true },
lname_clt: { editable: true },
lmname_clt: { editable: true },
dob_clt: { type: "date", defaultValue: null },
address1_clt: { editable: true },
address2_clt: { editable: true },
city_clt: { editable: true },
county_clt: { editable: true },
postcode_clt: { editable: true },
previous_address1_clt:{ editable: true },
previous_address2_clt:{ editable: true },
previous_city_clt: { editable: true },
previous_county_clt: { editable: true },
previous_postcode_clt:{ editable: true },
telephone_clt: { editable: true },
mobile_clt: { editable: true },
email_clt: { editable: true },
title_2_clt: { editable: true },
fname_2_clt: { editable: true },
mname_2_clt: { editable: true },
lname_2_clt: { editable: true },
lmname_2_clt: { editable: true },
dob_2_clt: { type: "date", defaultValue: null},
mobile_2_clt: { editable: true },
email_2_clt: { editable: true },
id_proof_clt: { editable: true },
sales_advisor_clt: { defaultValue: 'null' },
case_manager_clt: { defaultValue: 'null' },
lead_ref_clt: { editable: true },
chaser_clt: { defaultValue: 'null' },
//Custom
claims: { editable: false },
status_clt: { editable: false },
sales_advisor: { editable: false },
//Log
created: { editable: false },
updated: { editable: false },
user: { editable: false }
}
});
/***********************
CLIENT DATA
***********************/
var clientData = new kendo.data.DataSource({
transport: clientTransport,
error: function(e) {
if(e.responseText){
alert(e.responseText);
}
},
schema: {
parse: function(response) {
$.each(response,function(idx,elem) {
if(elem.dob_clt && typeof elem.dob_clt=="string") {
elem.dob_clt = kendo.parseDate(elem.dob_clt,"yyyy-MM-dd");
}
if(elem.dob_2_clt && typeof elem.dob_2_clt=="string") {
elem.dob_2_clt = kendo.parseDate(elem.dob_2_clt,"yyyy-MM-dd");
}
});
return response
},
data: "data",
total: "total",
model: clientModel
},
serverPaging: true,
pageSize: <?PHP echo $pageSize; ?>,
page: <?PHP echo $page;?>,
serverFiltering: true,
filter: [
<?PHP if($_GET['id_clt']){ ?>
{ field: "id_clt", operator: "eq", value: "<?PHP echo $_GET['id_clt'];?>" },
<?PHP }; ?>
<?PHP if($_GET['status']){ ?>
{ field: "status_clt", operator: "<?PHP echo ($_GET['operator'] != "" ? $_GET['operator'] : "contains");?>", value: "<?PHP echo $_GET['status'];?>" },
<?PHP }; ?>
<?PHP if($mode == "dashboard"){ ?>
{ field: "sales_advisor_clt", operator: "eq", value: "<?PHP echo $userID ?>" },
<?PHP }; ?>
],
serverSorting: true,
sort: [{ field: "created", dir: "desc" }, { field: "updated", dir: "desc" }],
});
/***********************
CLIENT FORM
***********************/
if (document.getElementById("formClient")) {
var clientListView = $("#formClient").kendoListView({
dataSource: clientData,
template: kendo.template($("#viewTemplate").html()),
editTemplate: kendo.template($("#formTemplate").html()),
dataBound: function(e) {
// this.edit(this.element.children().first());
},
change: function(e) {
//this.edit(this.element.children().first());
}
}).data("kendoListView");
}
回答1:
You are binding the value of the dropdown list to an array id_proof_clt because you explicitly told it to by using data-bind="value: id_proof_clt". Instead, you should bind its source, not the value, by using data-bind="source: id_proof_clt".
来源：https://stackoverflow.com/questions/26767820/kendo-ui-drop-downs-posting-arrays