我有一个jqGrid，当我进入编辑模式时，我需要有2个选择列表。我需要根据选择列表1中的选择过滤第二个列表。
这是我第一次尝试使用jqGrid，所以我遇到了一些问题。
我已经看到一些使用硬编码数组等的示例，但是我需要从数据库中提取信息而我无法使其工作。
我想我需要抓住这一手。 :-P
我的列是AssemblyTypeName和AssemblyName，我需要按顺序填写它们。
我的jqGrid代码如下：
$("#jqTable").jqGrid({
// Ajax related configurations
url: '@Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function () { return $("#ProgramID option:selected").val(); },
buildID: function () { return $('#Builds option:selected').val(); }
},
// Specify the column names
colNames: ["Actions", "Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{ name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
{ name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("_AssemblyTypes")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("_Assemblies")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],
// Grid total width and height and formatting
//width: 650,
//height: 220,
altrows: true,
// Paging
//toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template",
// grid command functionality
editurl: '@Url.Action("_AjaxUpdate")',
onSelectRow: function (AssemblyID) {
if (AssemblyID && AssemblyID !== lastsel) {
$('#jqTable').jqGrid('restoreRow', lastsel);
var cm = $("#jqTable").jqGrid('getColProp', 'AssemblyTypeName');
cm.editable = false;
$("#jqTable").jqGrid('editRow', AssemblyID, true);
cm.editable = true;
lastsel = AssemblyID;
}
}
}).navGrid("#jqTablePager",
{ refresh: false, add: true, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
感谢您的帮助和耐心。
答案 0 :(得分：0)
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: '@Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function () { return $("#ProgramID option:selected").val(); },
buildID: function () { return $('#Builds option:selected').val(); }
},
// Specify the column names
colNames: ["Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("_AssemblyTypes")',
buildSelect: function (data) {
jqGridAssemblyTypes = jQuery.parseJSON(data);
var s = '<select>';
if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
var ri = jqGridAssemblyTypes[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
},
dataInit: function (elem) {
var AssemblyTypes = $(elem).val();
$("#jqTable").setColProp('AssemblyName', { editOptions: { dataUrl: '@Url.Action("Assemblies", "Build")' + '/' + AssemblyTypes} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
var AssemblyType = $(e.target).val();
$.ajax({
url: '_JQGridAssemblies',
data: { AssemblyTypes: AssemblyType },
dataType: 'json',
async: false,
success: function (assemblies) {
jqGridAssemblies = assemblies;
}
});
resetAssemblyValues();
// build 'AssemblyName' options based on the selected 'AssemblyType' value
var sc = jqGridAssemblies;
var newOptions = '';
for (var assemblyName in sc) {
if (sc.hasOwnProperty(assemblyName)) {
newOptions += '<option role="option" value="' +
jqGridAssemblies[assemblyName] + '">' +
jqGridAssemblies[assemblyName] + '</option>';
}
}
// populate the new
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("select#AssemblyName.FormElement", form[0]).html(newOptions);
}
}
}
]
}
},
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '@Url.Action("_Assemblies")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],
// Grid total width and height and formatting
//width: 650,
//height: 220,
altrows: true,
// Paging
//toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 50, 100],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template",
// grid command functionality
editurl: '@Url.Action("_AjaxUpdate")'
}).navGrid("#jqTablePager",
{ refresh: false, add: true, edit: true, del: true },
{
url: '@Url.Action("_AjaxUpdate")',
editData: {
extraParam: function (params, postdata) {
programID = $("#ProgramID option:selected").val();
buildID = $('#Builds option:selected').val();
startDate = $('#DateBegin').val();
endDate = $('#DateEnd').val();
return programID + '|' + buildID + '|' + startDate + '|' + endDate;
},
reloadAfterSubmit: true,
closeAfterEdit: true
}
}, // settings for edit
{
url: '@Url.Action("_AjaxUpdate")',
addData: {
extraParam: function (params, postdata) {
programID = $("#ProgramID option:selected").val();
buildID = $('#Builds option:selected').val();
startDate = $('#DateBegin').val();
endDate = $('#DateEnd').val();
return programID + '|' + buildID + '|' + startDate + '|' + endDate;
},
reloadAfterSubmit: true,
closeAfterAdd: true
}
}, // settings for add
{
url: '@Url.Action("_AjaxUpdate")',
delData: {
extraParam: function (params, postdata) {
programID = $("#ProgramID option:selected").val();
buildID = $('#Builds option:selected').val();
startDate = $('#DateBegin').val();
endDate = $('#DateEnd').val();
return programID + '|' + buildID + '|' + startDate + '|' + endDate;
},
reloadAfterSubmit: true,
closeAfterDelete: true
}
}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);