0
나는 Trirand MVC jqGrid 패키지를 가지고 있지만이 질문은 jqGrid에 대해 전체적으로 중요하다고 생각합니다.jqGrid 콤보 상자 열의 '값'및 '텍스트'속성은 어떻게 처리합니까?
내 GridModel에서new JQGridColumn
{
DataField = "PaymentSchemeId",
HeaderText = "Payment Scheme",
DataType = typeof(ParkadePaymentScheme),
Searchable = true,
SearchToolBarOperation = SearchOperation.IsEqualTo,
SearchType = SearchType.DropDown,
SearchControlID = WidgetNames.DropDownSearchPaymentScheme,
Editable = true,
EditType = EditType.DropDown,
EditorControlID = WidgetNames.DropDownEditPaymentScheme
},
(그리드에 대한 뷰 모델) : 나는 아이디에 바인딩 열 있습니다. 디스플레이 모드에서 그리드는 예상대로 PaymentSchemeId의 값을 표시합니다. 편집 모드에서는 모든 지불 체계와 함께 드롭 다운을 표시하고 하나를 선택하면 Id 대신 이름이 표시되지만 부작용 만 있다고 생각합니다.
PaymentSchemeName 속성 값을 표시하는 동안 PaymentSchemeId 값을 바인드하고 저장하는 열을 어떻게 설정합니까?
그리드에 의해 렌더링되는 스크립트는 다소 길지만 의미있는 것을 수정하기를 두려워합니다. 내 엔티티 테이블 PaymentScheme에 FK를 가지고 있기 때문에, 나는 기대 PaymentSchemeId 2의 값을 가지고
{"page":1,"total":1,"records":1,"rows":[{"id":"1","cell":["","1","Brooklyn Mall","2","True",""]}],"userdata":{}}
, 그리고는 PK 저장 :
jQuery(document).ready(function() {
jQuery('#IndexGrid').jqGrid({
url: '/Parkade/IndexDataRequest?jqGridID=IndexGrid',
editurl: '/Parkade/EditRow?jqGridID=IndexGrid&editMode=1',
mtype: 'GET',
datatype: 'json',
page: 1,
colNames: ["Edit Actions", "Id", "Name", "Payment Scheme", "Active?", "Remarks"],
colModel: [{
"search": false,
"sortable": false,
"formatoptions": {
"editbutton": true,
"delbutton": true,
"keys": true
},
"width": 50,
"formatter": "actions",
"name": "",
"index": ""
}, {
"searchoptions": {
"searchhidden": true
},
"index": "Id",
"hidden": true,
"key": true,
"name": "Id"
}, {
"stype": "select",
"editable": true,
"index": "Name",
"searchoptions": {
"value": ":All;Brooklyn Mall:Brooklyn Mall"
},
"name": "Name"
}, {
"editoptions": {
"value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot"
},
"editable": true,
"stype": "select",
"edittype": "select",
"searchoptions": {
"value": ":All;Pay on Foot:Pay on Foot"
},
"name": "PaymentSchemeId",
"index": "PaymentSchemeId"
}, {
"editoptions": {
"value": "True:Yes;False:No"
},
"editable": true,
"stype": "select",
"edittype": "select",
"searchoptions": {
"value": ":All;True:True"
},
"name": "IsActive",
"index": "IsActive"
}, {
"width": 300,
"index": "Remarks",
"searchoptions": {
dataInit: function (el) {
setTimeout(function() {
var ec = 'AutoCompleteRemarks';
if (typeof (jQuery(el).autocomplete) !== 'function') alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js');
jQuery(el).autocomplete(eval(ec + '_acid'));
}, 200);
}
},
"editable": true,
"name": "Remarks"
}],
viewrecords: true,
scrollrows: false,
prmNames: {
id: "Id"
},
headertitles: true,
autowidth: true,
pager: jQuery('#IndexGrid_pager'),
loadError: jqGrid_aspnet_loadErrorHandler,
rowNum: 20,
rowList: [10, 20, 30],
editDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
editData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
addDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
editData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
delDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
delData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
searchDialogOptions: {
"multipleSearch": true,
"recreateForm": true,
"resize": false
},
viewRowDialogOptions: {},
jsonReader: {
id: "Id"
},
sortorder: 'asc',
height: '85%',
viewsortcols: [false, 'vertical', true]
}).navGrid('#IndexGrid_pager', {
"edit": false,
"add": true,
"del": false,
"search": true,
"refresh": true,
"view": false,
"position": "left",
"cloneToTop": true
}, jQuery('#IndexGrid').getGridParam('editDialogOptions'), jQuery('#IndexGrid').getGridParam('addDialogOptions'), jQuery('#IndexGrid').getGridParam('delDialogOptions'), jQuery('#IndexGrid').getGridParam('searchDialogOptions'), jQuery('#IndexGrid').getGridParam('viewRowDialogOptions')).bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {
jQuery(document.body).css('font-size', '100%');
jQuery(document.body).html(xht.responseText);
};
jQuery('#IndexGrid').filterToolbar({
"searchOnEnter": false
});
});
/Parkade/IndexDataRequest?jqGridID=IndexGrid 요청의 응답입니다 PaymentSchemeId에있는 해당 레코드 중 하나의 레코드이므로 Id 접미사와 전체 드롭 다운이 필요합니다. JS :
예에서 볼 수 있듯이 드롭 다운은 채워진 서버 측이며 기타 관련 코드가 추가되었습니다. PaymentSchemeId에 ID가 int 인 것으로 기대합니다. 나는 내가 기대했던 것을 정확히 얻는다. 드롭 다운에 대한 값이
"editoptions": {
"value": "3:Pay on Entry;1:Pay on Exit;2:Pay on Foot"
로 열 정의와 렌더링 그래서 GET 요청은 컨트롤러에서 무시되는 jqGridID=IndexGrid 쿼리 문자열을 이유로하지 마십시오, 그대로 자신의 예를 복사에 매우 가까운입니다 :
public JsonResult IndexDataRequest()
{
var gridModel = new ParkadeGridModel();
JQGridState gridState = gridModel.Grid.GetState();
Session[SessionKeys.JqGridState] = gridState;
SetupGrid(gridModel.Grid);
ViewData["PaymentSchemeId_Data"] = _indexModel.PaymentSchemes;
return gridModel.Grid.DataBind(_indexModel.Items.AsQueryable());
}
당신이하기 전에 :
private void SetupGrid(JQGrid grid, string indexMsg = null)
{
_indexModel = BuildIndexModel();
grid.DataUrl = Url.Action("IndexDataRequest");
grid.EditUrl = Url.Action("EditRow");
grid.Columns.Insert(0, new JQGridColumn
{
EditActionIconsColumn = true,
EditActionIconsSettings = new EditActionIconsSettings
{
SaveOnEnterKeyPress = true
},
HeaderText = "Edit Actions",
Width = 50,
Searchable = false,
Sortable = false
});
SetupParkadeNameDropDown(grid);
SetupPaymentSchemeDropDown(grid);
SetupYesNoDropDown(grid);
}
그리고 :
private void SetupPaymentSchemeDropDown(JQGrid parkadesGrid)
{
JQGridColumn paymentColumn = parkadesGrid.Columns.Find(c => c.DataField == "PaymentSchemeId");
if (parkadesGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData)
{
var searchList = _indexModel.Items.Select(m => m.PaymentSchemeName).Distinct().Select(l => new SelectListItem { Text = l, Value = l });
paymentColumn.SearchList = searchList.ToList();
paymentColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" });
var editList = _paymentSchemeRepository.Get().OrderBy(p => p.Name).ToList();
paymentColumn.EditList = editList.Select(l => new SelectListItem { Text = l.Name, Value = l.Id.ToString() }).ToList();
}
}
는 나는이 FK 컬럼에 대한 포맷터로 '선택'을 이용해야한다고 생각하지만, 그들이 제공하는 성가 시게하지 않았기 때문에 나는 아직도 이것을 달성하기 위해 내 열 정의에 Trirand의 CustomFormatter을 사용하는 방법을 내려고 노력하고 있어요 DropDownFormatter 옵션.
Trirand MVC jqGrid에서 생성 한 JavaScript 코드를 포함 할 수 있습니까? – Oleg
@Oleg 모든 영광이 있습니다. – ProfK
그건 그렇고, 첫 번째 열 (' "formatter": "actions"'포함)에는''name ":" "'오류가있는 것 같습니다. ''act "'와 같은 이름을 컬럼에 부여해야합니다. 당신의 주된 질문 :'PaymentSchemeId'에 대해'url :/Parkade/IndexDataRequest? jqGridID = IndexGrid''에서 반환하는 데이터는 무엇입니까? "Entry 지불", "Pay on Exit"및 "Pay on Foot"또는 ids 1, 2, 3 같은 텍스트가 있습니까? 당신은 썼다 : "전시 모드에서 격자는 예상대로 PaymentSchemeId의 가치를 표시합니다.", 그러나 그것은 당신이 기대하는 것이 분명하지 않습니다 *. 'formatter :'select''를 사용하지 마십시오. 이상하게 보입니다. – Oleg