[Javascript] ia-grid.js 코드 샘플

 

---

 

function callbackRowspan(rowId, val, rawObject, cm) {
    if (rawObject.attr != undefined) {
        var attr = rawObject.attr[cm.name], result;
        if (attr.rowspan) {
            result = ' rowspan=' + '"' + attr.rowspan + '"';
        } else if (attr.display) {
            result = ' style="display:' + attr.display + '"';
        }
        return result;
    }
};

function IAGrid(options) {

    var _this = this;
    var _options = options;
    var _optionsId = options.id;

    var defaultOptions = {
        id : "#grid",
        title : "제목없음",
        width : '100%',
        tableDivId : "",
        height : 'max-content',
        columns : [ "sample" ],
        data : [],
        style : {},
        caption : " ",
        rownumbers : false,
        multiselect : false,
        tabId : "",
        popup : ""
    }

    var jObjectid = '';

    this.options = $.fn.extend(true, defaultOptions, options);


    this.jObject = $('#' + this.options.id);

    var _jObject = this.jObject;

    var colName = this.options.columns.map(function(d, i) {
        if (typeof (d) == "string") {
            return d;
        } else if (typeof (d) == "object") {
            return d.name;
        }
    });

    this.isNumericWithUnit = function(d) {
        return false;
    };

    // 컬럼의 폭을 정하고, 각 컬럼별 데이터가 숫자인지, 단위를 포함한 숫자인지, 일반 텍스트인지 확인하여,
    // 숫자또는 단위를 포함한 숫자는 오른쪽 정렬, 일반 텍스트는 가운데 정렬로 한다.
    // 단, 이미 'align'이 존재하는 경우는 위의 자동정렬 적용에서 제외한다.
    this.options.colModel = this.options.columns.map(function(d, i) {

        /*
         * colModel options
         *
         * name:id index:id width:55 editable: true , editable:false
         * align:"right" hidden:true, key:true sortable:false, sorttype:"float"
         * (int, date) formatter: 'integer' formatter:'date' formatter: 'link'
         *
         * formatter:'currency'
         * formatter:'currency',formatoptions:{thousandsSeparator:","}
         * formatter:'currency', formatoptions:{prefix:"€"}
         * formatter:'checkbox' formatter:'date',
         * formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"} formoptions:{
         * rowpos:5,elmprefix:"    "} grouping:true,
         * groupingView : { groupField : ['name'] }, groupingView : { groupField :
         * ['name'], groupSummary : [true], groupColumnShow : [true], groupText : ['<b>{0}</b>'],
         * groupCollapse : false, groupOrder: ['asc'] }, cellattr:
         * function(rowId, value, rowObject, colModel, arrData) { return '
         * colspan=2'; }, cellattr: function(rowId, value, rowObject, colModel,
         * arrData) { return " style=display:none; "; } formatter:'actions',
         * formatoptions:{keys:true}},
         * searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}
         *
         */

        var _colmodel = {
            name : 'name'
        };

        if (d.name) {
            _colmodel.name = d.key;
            _colmodel.index = d.key;
        } else {
            _colmodel.index = d.key;
        }

        if (d.width) {
            _colmodel.width = d.width;
        } else {
            // 나중에 데이터와 컬럼명의 길이를 체크하여 자동으로 길이를 부여하도록 한다.
            // 사용자(개발자)가 이미 'width'의 값을 정의한 경우는 제외한다.
            // to do
            _colmodel.width = d.width;
        }

        if (d.align) {
            _colmodel.align = d.align;
        } else {
            if (typeof (_this.options.data) != "undefined") {
                if (_this.options.data.every(function(row, i) {
                    return $.isNumeric(row[d.key])
                            || _this.isNumericWithUnit(row[d.key]);
                })) {
                    _colmodel.align = "right";
                } else {

                    _colmodel.align = "center";
                }
            }

        }

        if (d.cellattr) {
            _colmodel.cellattr = d.cellattr;
        }

        if (d.frozen) {
            _colmodel.frozen = d.frozen;
        }
        // jqGrid를 생성할때 , 인자로 입력되는 colModel에 새로 속성값( 예, forzon, cellattr 이외 기타
        // )을 추가한다면, 위의 코드처럼 유사하게 정의하여 추가한다.
        // to do

        if (d.summaryTpl) {

        } else {
            _colmodel.summaryTpl = "{0}  ({1})";
        }

        if (d.summaryType) {

        } else {
            _colmodel.summaryType = "sum";
        }

        if (d.formatter) {

        } else {
            // _colmodel.formatter = 'number';
        }

        if (d.key) {
             /*TODO:*/
        } else {
            //_colmodel.key = true;
        }

        if (d.editable) {
             /*TODO:*/
        } else {
            //_colmodel.editable = true;
        }


        return _colmodel;
    });

    // this.jObject.jqGrid(jObjectid,'#pmethod',{edit:false,add:false,del:false});

    var groupDepth = this.options.columns.reduce(function(prev, curr) {
        return (curr.group && curr.group.length > 0) ? Math.max(curr.group
                .split("|").length, prev) : prev;
    }, 0);

    var prevGroups = [];

    for (var i = 0; i < groupDepth; i++)
        prevGroups[i] = []; // []

    var groupHeaders = this.options.columns.reduce(function(prev, curr) {
        if (typeof (curr) == "object") {

            if (curr.group && curr.group.length > 0) {
                curr.groups = [];
                var groups = curr.group.split("|");
                var firstGroupIndex = 0;

                for (var gi = firstGroupIndex; gi < groupDepth; gi++) {
                    var title = groups[gi - firstGroupIndex];
                    if (title) {
                        var obj;

                        if (prev[gi - firstGroupIndex].length > 0) {
                            prev[gi - firstGroupIndex].some(function(pd, i) {
                                return pd.titleText == title ? (obj = pd)
                                        : (obj = false);
                            });
                        } else {
                            obj = false;
                        }

                        if (obj) {
                            obj.numberOfColumns += 1;
                        } else {
                            var a = {
                                startColumnName : curr.key,
                                numberOfColumns : 1,
                                titleText : title
                            };
                            prev[gi].push(a);
                        }
                    }
                }// end for
            }
        }
        return prev;
    }, prevGroups); // end groupHeader

    /*
     * sample Header
     *
     * var groupHeaders = [ [ { startColumnName: 'collection', numberOfColumns:
     * 4, titleText: '기본' }, { startColumnName: 'int', numberOfColumns: 2,
     * titleText: '너무어려움' }], [ { startColumnName: 'collection',
     * numberOfColumns: 2, titleText: '쉬움' }, { startColumnName: 'equ3',
     * numberOfColumns: 2, titleText: '어려움' } ] ];
     */

    /*
     * _this.jObject.jqGrid('setGroupHeaders', { useColSpanStyle: true,
     * groupHeaders:groupHeaders[0] });
     */

    this.jObject.jqGrid("setFrozenColumns");

    // this.jObject.setGridWidth(500 , false);

    /*
     * this.setData = function(data){ this.jObject.jqGrid('setGridParam', {
     * datatype: 'local', data : data }).trigger("reloadGrid"); }
     *
     * if( this.options.data ){ this.setData(this.options.data); }
     */



    this.jObject.jqGrid({
        afterSubmitCell : function(res) {
            /*TODO:*/
             var aResult = $.parseJSON(res.responseText);
             var userMsg = "";
             if((aResult.msg == "success")) {
                 userMsg = "데이터가 변경되었습니다.";
             }

             return [(aResult.msg == "success") ? true : false, userMsg];
             /*
                  +++ 추가 내용
                  사용자가 afterSubmitCell을 구현하는 경우
                  [성공여부, 띄울메시지] 배열을 리턴해야한다고 함
             */
        },
        beforeSubmitCell : function(rowid, cellname, value) {
            /*TODO:*/
              return {"id":rowid, "cellName":cellname, "cellValue":value}
        },
        caption : this.options.caption ? this.options.caption : "",
        cellEdit:true,
        cellsubmit:'remote', /*TODO:*/
        cellurl:'/test/test', /*TODO:*/
        colNames : colName,
        colModel : this.options.colModel,
        cmTemplate: { title: false },
        data : this.options.data,
        datatype : 'local',
        footerrow : true,
        height : this.options.height,
        hidegrid : false,
        loadonce : false,
        mergeCells : [],
        multiselect : JSON.parse(this.options.multiselect),
        onSelectRow : function(id) {
            alert('id = ' + id);
        },
        pager : '#pager_' + _optionsId,
        rowList : [ 20, 30, 50, 100 ],
        rowNum : 20,
        rownumbers : JSON.parse(this.options.rownumbers),
        rownumWidth : 60,
        shrinkToFit : false,
        sortorder : 'asc',
        // userDataOnFooter : true,
        viewrecords : true,
        width : this.options.width,
        loadComplete : function() {

            /*
             * 그리드 데이터 총 갯수 var allRowsInGrid =
             * _jObject.jqGrid('getGridParam','records');
             */

            var tableId = _this.options.id;
            var doAreadyExist = IAGridTableIdInfo.tableInfoArray.some(function(
                    d, i) {
                return d.tableId === _this.options.id;
            })

            var divId = _options.tableDivId;
            var captionId = 'gview_' + _this.options.id;
            var tabId = _options.tabId;
            var pagerId = 'pager_' + _optionsId;
            tableId = tableId;

            if (!doAreadyExist) {
                var tableInfo = new IAGridTableIdInfo.makeTableInfoObject(
                        divId, captionId, tableId, tabId, pagerId);
                IAGridTableIdInfo.tableInfoArray.push(tableInfo);
            }

            makeFooterDataSet(_jObject, _options, divId);



        }
    });


    /*
     * 안 생김
     *
     * this.jObject.navButtonAdd('#pager_test1', { caption:"Clear", title:"Clear
     * Search", buttonicon:'ui-icon-refresh', onClickButton:function(){
     * alert("test"); } });
     */

    groupHeaders.forEach(function(d, i) {
        _this.jObject.jqGrid('setGroupHeaders', {
            useColSpanStyle : true,
            groupHeaders : d
        });
    });

}

function jqGridToExcel(_jObject, fileName){
    _jObject.jqGrid("exportToExcel",{
        includeLabels : true,
        includeGroupHeader : true,
        includeFooter: true,
        fileName : fileName + ".xlsx",
        maxlength : 500
    });
};

function jqGridPrint(parentsDiv){
    var popTitle = "print";
    var popUpUrl = "jqPrint.html"

    var printObj;

    printObj = window.open(popUpUrl, popTitle, "width=925, height=500, scrollbars=yes, toolbar=yes");
    /* 하단 작동 안됨 */
    printObj.onload = function(){
        printObj.document.getElementById("printArea").innerHTML = parentsDiv.parent().html();
        printObj.document.getElementById("divId").value = "";
    }


};

var IAGridTableIdInfo = {

    makeTableInfoObject : function(divId, captionId, tableId, tabId, pagerId) {
        this.divId = divId;
        this.captionId = captionId;
        this.tableId = tableId;
        this.tabId = tabId;
        this.pagerId = pagerId;

    },
    tableInfoArray : []

}

var makeFooterDataSet = function(_jObject, _options, divId) {
    /*
     * 수정 진행 중
     *
     * 1. 초기화면이 아니라 데이터가 들어오면 적용되도록 변경하기
     * 2. 합계, 평균, 최대, 최소 3. 보통은, 맨 아래행에 합계,
     * 하지만 측정자료통계 > 신축공동주택 통계 > 시공자의 실내공기질 측정, 공고 현황 A의 경우는 4항 마다 합계
     * 3. footer 하단 css
     *
     *
     *
     *  ;
     *
     * var reccount = _jObject.jqGrid('getGridParam','reccount'); var colAvg =
     * Math.round(colSum/reccount * 100/100);
     *
     * _jObject.jqGrid('footerData', 'set', { crateName:'합계', VALUE:avgTest });
     *
     *
     * 자동측정망 > 자동측정망분석 > 시간대별분석
     *
     */

    var jObjectId = _jObject.attr("id");

    var sumFooterRow = $('#' + divId + ' .ui-jqgrid-sdiv').find("tr.footrow");
    var minFooterRow;
    var maxFooterRow;
    var avgFooterRow;

    var noFootersExist = true;
    if (sumFooterRow.nextAll(".footerRowClone").length > 0) {
        noFootersExist = false;
    }

    if (noFootersExist) {
        if (true) {
            var avgTest = _jObject.jqGrid("getCol", "VALUE", false, "sum");
            var reccount = _jObject.jqGrid('getGridParam', 'reccount');
            _jObject.jqGrid('footerData', 'set', { crateName : '합계', VALUE : avgTest });
            sumFooterRow.find("td[aria-describedby=" + jObjectId + "_rn]").text("합 계");

        }
        if (true) {
            avgFooterRow = sumFooterRow.clone();
            avgFooterRow.removeClass("footrow").addClass("footerRowClone");
            avgFooterRow.insertAfter(sumFooterRow);

            avgFooterRow.find("td[aria-describedby=" + jObjectId + "_rn]").text("평균값");
            avgFooterRow.find("td[aria-describedby=" + jObjectId + "_VALUE]").text(" 테스트 진행 중 1,평균");
        }
        if (true) {
            minFooterRow = sumFooterRow.clone();
            minFooterRow.removeClass("footrow").addClass("footerRowClone");
            minFooterRow.insertAfter(sumFooterRow);

            minFooterRow.find("td[aria-describedby=" + jObjectId + "_rn]").text("최소값");
            minFooterRow.find("td[aria-describedby=" + jObjectId + "_VALUE]").text(" 테스트 진행 중2,최소");
        }
        if (true) {
            maxFooterRow = sumFooterRow.clone();
            maxFooterRow.removeClass("footrow").addClass("footerRowClone");
            maxFooterRow.insertAfter(sumFooterRow);

            maxFooterRow.find("td[aria-describedby=" + jObjectId + "_rn]").text("최대값");
            maxFooterRow.find("td[aria-describedby=" + jObjectId + "_VALUE]").text(" 테스트 진행 중 3, 최대");
        }
    }

}

 

---