我正在尝试使用jqGrid加载大数据(至少5000行)而没有分页。我尝试了一些已经在此处发布的方法,但对我不起作用。条件是:无分页,至少5000行,超过15列,一些可编辑的列,例如输入框,组合。 当行数超过1000时,它会感觉缓慢而结结巴巴。请帮忙... 我的代码:
function getTable1_init() {
let tbl_1_title = ['의뢰번호', '기호', '소재지', '지번', '지목', '공부면적 (㎡)', '이용상황', '용도지역1', '용도지역2', '도로교통', '형상', '지세', '방위', '용도지역1 면적', '용도지역2 면적', '용도지대', '개별공지시가(원/㎡)', '공시년도', '표준지일련번호', '표준지소재지지번', '용도지구', '계획시설', '저촉률', '제한구역기타', '농지구분', '임야', '철도', '폐기물', '전년지가', '상승률', '2년전지가', 'PNUCode','','법원경매 참고데이터', '표준지2개이상', '불법형질변경', '미불용지', '사용료', '환매토지'];
tbl_1_columns = ['SerialNo', 'NumericNo', 'LandLocation', 'LandAddress', 'LandCategory', 'PubLedgerArea', 'UseSituation', 'UseAreaOne', 'UseAreaTwo',
'RoadTraffic', 'LandTrend', 'Direction', 'quarter', 'UseAreaOneArea', 'UseAreaTwoArea', 'UseBelt', 'IndiDeclaredLandVal', 'StandardArea_Serial',
'StandardArea_Address', 'UseDistrict', 'PlanningFacility', 'ConflictRate', 'RestrictedAreaETC', 'FarmType', 'Forest', 'Railroad',
'Waste', 'LandPrice_Lastyear', 'Growthrate', 'LandPrice_TwoYearAgo']
tbl_1.jqGrid({
styleUI : 'Bootstrap',
iconSet : 'Octicons',
datatype: 'local',
data: [],
//url: data_src_url,
//datatype: 'jsonstring',
//datastr: tbl_1_data,
width: 'auto',
height: 'auto',
colNames: tbl_1_title,
colModel: [
{ name: 'SerialNo', index: 'SerialNo', align: "center",sortable: true, width: 80, hidden: true },
{ name: 'NumericNo', index: 'NumericNo', template: "numberStr", sorttype: "number", align: "center", width: 60 },
{ name: 'LandLocation', index: 'LandLocation', align: "center",sortable: false, width: 200 },
{ name: 'LandAddress', index: 'LandAddress', align: "center",sortable: false, width: 100 },
{ name: 'LandCategory', index: 'LandCategory', align: "center", sortable: false, editable: true, width: 60 ,edittype: "text", editoptions: { value: landCategoryCombosData } },
{ name: 'PubLedgerArea', index: 'PubLedgerArea', template: "numberStr", align: "center", sortable: false, editable: true, width: 120 },
{ name: 'UseSituation', index: 'UseSituation', align: "center", sortable: false, editable: true, width: 150 ,edittype: "text", editoptions: { value: UseSituationCombosData } },
{ name: 'UseAreaOne', index: 'UseAreaOne', align: "center" ,template: "numberStr", sortable: false, editable: true, width: 100 ,edittype: "text", editoptions: { value: UseAreaCombosData } },
{ name: 'UseAreaTwo', index: 'UseAreaTwo', align: "center" ,template: "numberStr", sortable: false, editable: true, width: 100 ,edittype: "text", editoptions: { value: UseAreaCombosData } },
{ name: 'RoadTraffic', index: 'RoadTraffic', align: "center", sortable: false, editable: true, width: 200 ,edittype: "text", editoptions: { value: RoadTrafficCombosData } },
{ name: 'Shape', index: 'Shape', align: "center", sortable: false, editable: true, width: 120 ,edittype: "text", editoptions: { value: ShapeCombosData } },
{ name: 'LandTrend', index: 'LandTrend', align: "center", sortable: false, editable: true, width: 100 ,edittype: "text", editoptions: { value: LandTrendCombosData } },
{ name: 'Direction', index: 'Direction', align: "center", sortable: false, editable: true, width: 60 ,edittype: "text", editoptions: { value: "1:동;2:서;3:남;4:북;-1:없음" } },
{ name: 'UseAreaOneArea', index: 'UseAreaOneArea', align: "center" , template: "numberStr", sortable: false, editable: true, width: 130 },
{ name: 'UseAreaTwoArea', index: 'UseAreaTwoArea', align: "center" , template: "numberStr", sortable: false, editable: true, width: 130 },
{ name: 'UseBelt', index: 'UseBelt', align: "center", sortable: false, editable: true, width: 160, edittype: "text", editoptions: { value: "1:주택지대;2:공업지대;3:농경지대(전지대);4:농경지대(답지대);5:임야지대;6:택지후보지지대;7:상업지대;-1:없음" } },
{ name: 'IndiDeclaredLandVal', index: 'IndiDeclaredLandVal', align: "center", sortable: false, editable: true, width: 160 },
{ name: 'Year', index: 'Year', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'StandardArea_Serial', index: 'StandardArea_Serial', align: "center", sortable: false, editable: true, width: 130 },
{ name: 'SAreaAddress', index: 'SAreaAddress', align: "center", sortable: false, editable: true, width: 150 },
{ name: 'UseDistrict', index: 'UseDistrict', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'PlanningFacility', index: 'PlanningFacility', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'ConflictRate', index: 'ConflictRate', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'RestrictedAreaETC', index: 'RestrictedAreaETC', align: "center", sortable: false, editable: true, width: 120 },
{ name: 'FarmType', index: 'FarmType', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'Forest', index: 'Forest', align: "center", sortable: false, editable: true, width: 70 },
{ name: 'Railroad', index: 'Railroad', align: "center", sortable: false, editable: true, width: 70 },
{ name: 'Waste', index: 'Waste', align: "center", sortable: false, editable: true, width: 70 },
{ name: 'LandPrice_Lastyear', index: 'LandPrice_Lastyear', align: "center", sortable: false, editable: true, width: 80 },
{ name: 'Growthrate', index: 'Growthrate', align: "center", sortable: false, editable: true, width: 70 },
{ name: 'LandPrice_TwoYearAgo', index: 'LandPrice_TwoYearAgo', align: "center", sortable: false, editable: true, width: 90 },
{ name: 'PNUCode', index: 'PNUCode', align: "center", sortable: false, hidden: true},
{ name: 'Remarks', index: 'Remarks', align: "center", sortable: false, hidden: true},
{ name: 'insertInput', index: 'insertInput', align:"center", editable: false, width: 200, formatter: function(cellValue, options, rowObject){
let obj = {};
obj.options = options;
obj.rowObject = rowObject;
let literalObj = JSON.stringify(obj);
let btn = `<button type="button" class="btn btn-info" onclick='courtReferenceDataLand(${literalObj})'>참고</button>`;
return btn;
} },
{ name: 'GROUP1', hidden: true, formatter: function(value, option, row) {
switch(value) {
case 1: return true;
case 0: return false;
case true: return true;
case false: return false;
default: return value;
}
} },
{ name: 'GROUP2', hidden: true, formatter: function(value, option, row) {
switch(value) {
case 1: return true;
case 0: return false;
case true: return true;
case false: return false;
default: return value;
}
} },
{ name: 'GROUP3', hidden: true, formatter: function(value, option, row) {
switch(value) {
case 1: return true;
case 0: return false;
case true: return true;
case false: return false;
default: return value;
}
} },
{ name: 'GROUP4', hidden: true, formatter: function(value, option, row) {
switch(value) {
case 1: return true;
case 0: return false;
case true: return true;
case false: return false;
default: return value;
}
} },
{ name: 'GROUP5', hidden: true, formatter: function(value, option, row) {
switch(value) {
case 1: return true;
case 0: return false;
case true: return true;
case false: return false;
default: return value;
}
} },
],
sortname: 'NumericNo',
sortorder: "asc",
rowNum: 9999999,
multiselect: true,
async:false,
pager: '#pager_jqgrid1',
loadonce: true,
cellsubmit: 'clientArray'
});
tbl_1.jqGrid('bindKeys', true);
getTable1_refresh();
}