這是我目前的列模型:具有行特定下拉列表的JqGrid?
colModel: [
{ name: 'LastName', index: 'LastName', width: 120, align: 'center' },
{ name: 'FirstName', index: 'FirstName', width: 120, align: 'center' },
{ name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' },
{ name: 'DOB', index: 'DOB', width: 100, align: 'center' },
{ name: 'id', index: 'id', align: 'center', hidden: true },
{ name: 'checked', index: 'checked', align: 'center', hidden: true },
{ name: 'courtType', index: 'courtType', align: 'center', editable: true, sortable: false, width: 100 },
{ name: 'CaseNumber', index: 'CaseNumber', align: 'center', editable: true, sortable: false, width: 100 },
{ name: 'CourtFileNumber', index: 'CourtFileNumber', align: 'center', editable: true, sortable: false, width: 100 },
{ name: 'WarrantDocket', index: 'WarrantDocket', align: 'center', editable: true, sortable: false, width: 100 },
{ name: 'Sentencing', index: 'Sentencing', align: 'center', editable: true, sortable: false, width: 100 },
{ name: 'notes', index: 'notes', align: 'center', editable: true, sortable: false, width: 400 },
{ name: 'name', index: 'name', width: 200,
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: getAllSelectOptions() }
}
],
這讓我從getAllSelectOptions下拉列表()。
function getAllSelectOptions() {
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida',
'4': 'Hawaii', '5': 'London', '6': 'Oxford'
};
return states;
}
有沒有辦法根據每個行的ID和webmethod調用(或其他方式)獲取不同的列表?
var createCourtGridURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetGetdData";
var jqGridDataURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetSelectData";
編輯:工作守則
var myGrid = $('#selectedInmateList'),
decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown;
if (jqXHR.responseText.charAt(0) === '[') {
try {
errorInfo = $.parseJSON(jqXHR.responseText);
errorText = "";
for (i = 0; i < errorInfo.length; i++) {
if (errorText.length !== 0) {
errorText += "<hr/>";
}
errorText += errorInfo[i].ExceptionType + ": " + errorInfo[i].Message;
}
}
catch (e) { }
} else {
html = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
if (html !== null && html.length > 1) {
errorText = html[1];
} else {
errorText = jqXHR.responseText.replace(/\n/, "<br>");
}
}
return errorText;
},
buildSelectFromJson = function (data) {
var html = '<select>', d = data.d, length = d.length, i = 0, item;
for (; i < length; i++) {
item = d[i];
html += '<option value=' + item + '>' + item + '</option>';
}
html += '</select>';
return html;
};
myGrid.jqGrid({
url: createCourtGridURL,
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" },
ajaxSelectOptions: { contentType: "application/json", dataType: 'json'/*, type: "POST"*/ },
serializeGridData: function (postData) {
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
mtype: 'POST',
colNames: ['Id', 'Last Name', 'First Name', 'Middle Name', 'DOB', 'Checked', 'User'],
colModel: [
{ name: 'id', index: 'id', align: 'center', hidden: true },
{ name: 'LastName', index: 'LastName', width: 120, align: 'center' },
{ name: 'FirstName', index: 'FirstName', width: 120, align: 'center' },
{ name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' },
{ name: 'DOB', index: 'DOB', width: 100, align: 'center' },
{ name: 'checked', index: 'checked', align: 'center', hidden: true },
{ name: 'User', index: 'User', width: 400, editable: true,
stype: 'select', edittype: 'select',
/*
searchoptions: {
sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
dataUrl: jqGridDataURL,
buildSelect: buildSelectFromJson
},
*/
editoptions: {
sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
dataUrl: function() {
var rowID = selectedRowId = myGrid.jqGrid('getGridParam', 'selrow');
return jqGridDataURL + '?id=' + rowID;
},
buildSelect: buildSelectFromJson,
dataEvents: [
{
type: 'change',
fn: function (e) {
//alert('change event')
}
}
]
}
}
],
pager: '#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: 'desc',
rownumbers: true,
viewrecords: true,
height: '100%',
cellEdit: true,
multiselect: true,
cellsubmit: 'clientArray', //?
pager: '#selectedInmatePager',
gridview: true,
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
cell: ""
},
caption: 'Selected Court Inmates',
loadError: function (jqXHR, textStatus, errorThrown) {
// remove error div if exist
$('#' + this.id + '_err').remove();
// insert div with the error description before the grid
myGrid.closest('div.ui-jqgrid').before(
'<div id="' + this.id + '_err" style="max-width:' + this.style.width +
';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>');
},
loadComplete: function() {
// remove error div if exist
$('#' + this.id + '_err').remove();
}
});
myGrid.jqGrid('navGrid', '#selectedInmatePager', { add: false, edit: true, del: false },
{}, {}, {}, { multipleSearch: true, overlay: false, width: 480 });
對不起,但尚不清楚你到底想要什麼。哪個'datatype'有網格?如果您使用遠程數據類型('「json」或'「xml」'),那麼知道您是否使用'loadonce:true'選項很重要。你使用'formatter:'select''。所以輸入數據應該包含像你的例子中的'1','2',...''6'這樣的id。是這樣嗎?你是否需要允許在每行的編輯過程中允許每行允許*不同的**列表?您使用哪種編輯模式? – Oleg 2015-03-02 17:39:23
@Oleg每行需要有一個行特定的下拉菜單。所以當我點擊行時,我需要點擊一個接收rowID的webmethod,並以某種方式構建此DropDown並將其返回。我發佈了我的jqGrid代碼。 – 0x4f3759df 2015-03-02 17:46:13