http://www.chartle.net/과 비슷한 데이터 테이블을 만들어야합니다.jqGrid with dynamic colModel?
가장 importang 기능은 다음과 같습니다
이게 가능합니까?
문제는 동적으로 jQgrid ColModel을 변경할 수 없다는 것입니다. 내가 볼 수있는 두 가지 옵션은 다음과 같습니다
이 GridUnload를 사용하여 전체 격자를 삭제하고 (이 완전히 변경할 수있는 경우) 새로운 ColModel로 다시로드 :
jQuery를 (선택) .GridUnload (선택);
가능한 모든 행을로드하고 필요한 것을 표시하거나 숨 깁니다 (예 : 동적으로 저장하기위한 show hide columns plugin
을 사용하여 그 같은 JSON 데이터베이스 그리드의 구성 데이터를 저장하기에 충분해야한다.
나는
당신이 ASP.NET MVC를 사용하는 경우 .. 그것이 가능하다고 생각하지만 시도하지 않은 : 가 프로그래밍을 ViewData와 컨트롤러에서 그리드를 추가하려고 있나요? 그것은 하나의 아이디어입니다.
http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html 그것이
있는 jqGrid 3.6 동적으로 열을 표시/숨기기를 지원하는 데 도움이 희망과 3.6 데모 페이지에 "열 선택자"데모가 :
이 링크는 당신이 더 얻을 수 있습니다. 이게 당신의 필요에 충분한가? 자신의 문서에서
검색 getColProp 및 setColProp는 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
jQuery ("# grid_id"). setColProp ('colname', {editoptions : {value : "True : False"}}); – andep
bindJqGrid("SetPayInvoice", feeID, datasetID, 1);
function bindJqGrid(actionController, feeID, datasetID, step)
{
agreementID = $("#agreementID").val();
mappingTemplateID = $("#mappingTemplateID").val();
invoiceID = $("#invoiceID").val();
var action = '/PayInvoice/' + actionController + '?agreementID=' + agreementID + '&mappingTemplateID=' + mappingTemplateID + '&invoiceID=' + invoiceID + '&feeID=' + feeID + '&datasetID=' + datasetID;
var caption = "Invoice Exception";
$("#headerText").html(caption);
JQGrid(caption, action);
}
function JQGrid(caption, action)
{ $("#tblGrid").jqGrid('GridUnload');
$.ajax({
url: action,
dataType: "json",
mtype: 'POST',
success: function (result) {
if (result) {
if (!result.Error && result != "" && result != undefined) {
$("#TotalData").html(result.records);
$("#divWorkflowWrapper").show();
$("#dvFooter").show();
var colData = "";
colData = columnsData(result.column);
colData = eval('{' + colData + '}');
$("#tblGrid").jqGrid({
url: action,
datatype: 'json',
mtype: 'GET',
colNames: result.column,
colModel: colData,
autowidth: true,
height: 550,
rowNum: 25,
rowList: [25, 50, 75, 100],
loadtext: "Loading...",
pager: '#tblGridpager',
viewrecords: true,
gridview: true,
altRows: true,
cellEdit: true,
cellsubmit: "remote",
cellurl: '/PayInvoice/GridSavecell',
beforeSelectRow: function (rowid) { return false; },
ondblClickRow: function (rowid, iRow, iCol) {
jQuery("#tblGrid").editCell(iRow, iCol, true);
},
afterEditCell: function() {
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
edit = $(".edit-cell > *");
edit.blur(function() {
edit.trigger(e);
});
},
beforeSubmitCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
afterSaveCell: function (id, cellname, value, iRow, iCol) {
objedit(id, cellname, value);
return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
},
caption: caption
});
}
}
else {
$("#divWorkflowWrapper").hide();
$("#dvFooter").hide();
}
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr && thrownError) {
alert('Status: ' + xhr.status + ' Error: ' + thrownError);
}
}
});
}
게시 한 코드를 설명하는 것이 더 낫습니다. –
function objedit(id, cellname, value)
{
var flag = 0;
for (var i = 0; i < index; i++) {
if (obj[i][0] == id && obj[i][1] == cellname) {
obj[i] = [id, cellname, value]
flag++;
}
}
if (flag == 0) {
obj[index] = [id, cellname, value];
index++;
}
}
function columnsData(Data)
{
var formater = "";
var str = "[";
for (var i = 0; i < Data.length; i++) {
if (Data[i] == "Id")
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', hidden: true,}";
else
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
//------end grid part----------
나는 내가 다음 주에이 문제를 해결하려고합니다 먼저 내 대시 보드에 위도/경도지도 구성 요소를 만드는 방법에 대한 이동하기로 결정했다. 답변 주셔서 감사합니다! –