如何在jqgrid中填充mysql中的select下拉列表

Question

**>你好，我是一名初级开发人员。

选择"largeCategoryZone"时，用ASCIICode将其分隔为从数据库中检索值。

我想把这些值放在"smallCategoryZone"中。内容下面是我的代码。请检查并回答我。**

$(document).ready(function () {
$("#AdminCheckJqGrid").jqGrid({
url: "../barcode/barcodeAdminCheckInquiry/1",
datatype: "json",
loadtext: "loading...",
method: "GET",
postData: {
"certificateNumber": $("#certificateNumber").val()
},
colNames: ['sku', 'label', 'qty', 'realQty', 'palletType', 'palletBarcode','largeCategoryZone','middleCategoryZone','smallCategoryZone', 'remark'],
colModel: [
{label: 'sku', name: 'sku', width: '30', align: 'center'},
{label: 'label', name: 'label', width: '60', align: 'center'},
{label: 'qty', name: 'qty', width: '20', align: 'center'},
{label: 'realQty', name: 'realQty', width: 30,align: 'center', sortable: false, editable: true},
{label: 'palletType', name: 'palletType', width: 40, align: 'center', editable: true, edittype: 'select', editoptions: {dataUrl: '../code/palletType', buildSelect: setSelect}},
{label: 'palletBarcode', name: 'palletBarcode', width: 40, align: 'center', editable: true, edittype: 'select', editoptions: {dataUrl: '../code/palletBarcode', buildSelect: palletBarcodeSelect}},
{label: 'largeCategoryZone', name: 'largeCategoryZone', width: 40, align: 'center', editable: true, edittype: 'select', editoptions: {dataUrl: '../code/largeCategoryZone', buildSelect:setSelect ,
dataEvents: [{
type: 'change',
fn: function (e) {
var selectedData = e.currentTarget.value;
var dataFrist = selectedData.substr(0,1);
var dataAscii = dataFrist.charCodeAt();
$.ajax({
url: '../code/largeCategoryZone/' + dataAscii,
type: 'GET',
success: function (data) {
var jdata = jQuery.parseJSON(data).result;
var selectHtml = "";
for(var i=0; i < jdata.length; i++){
selectHtml += "<option value='" + jdata[i].subcode + "'>" + jdata[i].codename + "</option>";
}
if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
console.log("form"+form);
$("select#smallCategoryZone.FormElement", form[0]).html(selectHtml);
} else {
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
var rowId = jQuery("#AdminCheckJqGrid").jqGrid('getGridParam','selrow');
jQuery("select#" + rowId + "_smallCategoryZone").append(selectHtml);
}
}
});
}}]}},
{label: 'middleCategoryZone', name: 'middleCategoryZone', width: 40, align: 'center', editable: true, edittype: 'select', editoptions: {dataUrl: '../code/largeCategoryZone', buildSelect: setSelect}},
{label: 'smallCategoryZone', name: 'smallCategoryZone', width: 40, align: 'center', editable: true, edittype: 'select',editoptions: {  } },
{label: 'remark', name: 'remark', width: 50, sortable: false, editable: true, align: 'center', editoptions: {autocomplete: "off"}},
],
});
});

Answer 1

您的代码与上一版本的Guriddo jqGrid配合良好。你需要完善你的代码。

首先，在colModel 中定义select时，您需要为smallCategoryZone设置默认值

{label: 'smallCategoryZone', name: 'smallCategoryZone', width: 40, align: 'center', editable: true, edittype: 'select',editoptions: { value:":SelectCity" } },

第二：当调用ajax时，你需要检查数据是否在这里，并使用html而不是像表单编辑一样进行内联编辑)

if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
console.log("form"+form);
$("select#smallCategoryZone.FormElement", form[0]).html(selectHtml);
} else {
//var row = $(e.target).closest('tr.jqgrow');
//var rowId = row.attr('id');
var rowId = jQuery("#AdminCheckJqGrid").jqGrid('getGridParam','selrow');
jQuery("select#" + rowId + "_smallCategoryZone").html(selectHtml);
}

Answer 2

我用setCell 解决了下拉问题

var检查=$("#moveZoneJqGrid").jqGrid("setCell"，rowid，"moveToBarcode"，selectHtml)；

{label: 'moveToThird', name: 'smallCategoryZone', width: 25, align: 'center', editable: true, edittype: 'select',editoptions: {
dataEvents: [{
type: 'change',
fn: function(e) {
var rowid =  e.originalEvent.path[2].id;
var rowval = $('#moveZoneJqGrid').jqGrid('getRowData', rowid);
var jdata = new Object();

var largeCategoryZone = rowval.largeCategoryZone;
var middleCategoryZone = rowval.middleCategoryZone;
var smallCategoryZone = e.currentTarget.value;

$.ajax({
url: "../barcode/getBarcodeFromZone",
method: "GET",
data : {
"largeCategoryZone" : largeCategoryZone,
"middleCategoryZone" : middleCategoryZone,
"smallCategoryZone" : smallCategoryZone,
},
dataType: "json",
success: function (data) {
var jdata = data.inquiryList
var selectHtml = "<select>";

for(var i=0; i < jdata.length; i++){
selectHtml += '<option value="' + jdata[i].barcode + '">' + jdata[i].barcode + '</option>';
}
selectHtml += "</select>";

var check = $("#moveZoneJqGrid").jqGrid("setCell",rowid,"moveToBarcode",selectHtml);

},
error: function(xhr, status, err){
alert(status + "n" + err);
}
}); //ajax
} //fn function
}] // dataEvent
} //editoption
},
{label: 'moveToBarcode', name: 'moveToBarcode', width: '35', align: 'center', editable: true, edittype: 'select', editoptions: { }},