有没有一种方法可以使用jqGrid加载大数据而无需分页

时间:2020-04-02 08:50:54

标签: javascript pagination jqgrid loading bulkinsert

我正在尝试使用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();
}

0 个答案:

没有答案