pq grid 及 一些基本方法

前台

1.JSP部分

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left: 0px">
    <div class="mt-element-list">
        <div class="mt-list-head list-simple font-white bg-green">
            <div class="list-head-title-container">
                <h4 class="list-title">
                <i class="fa fa-cog" style="margin-right: 10px">
                </i><s:message code="GLASS_LIST_TAG"/></h4>
            </div>
        </div>
        <div class="mt-list-container list-simple" id="inFqcPrdListDiv">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px">
            <div id="inFqcPrdListGrd" style="margin:0 auto;"></div>
                <input id ="inFqcPrdRowSelData" hidden>
            </div>
        </div>
    </div>
</div>

2.JS部分

//自定义建表方法
(function ($) {
    var zTree;
    $.fn.extend({
        "ddCreatePqgrid": function (options) {
            // 创建pqGrid表格
            var defaultOption = {
                scrollModel: {
                    autoFit: true
                },
                height: 500,
                showBottom: false,
                showTitle: false,
                freezeCols: 1,
                virtualX: true,
                virtualY: true,
                resizable: true,
                numberCell: {
                    show: true
                },
                editable: true
            }

            options = $.extend(defaultOption, options);
            $(this).pqGrid(options);
        },
    });
});


//定义变量
var domObj = {
    $inFqcPrdRowSelData: $("#inFqcPrdRowSelData"),

    buttons: {
        $moveIn_btn: $('#moveIn_btn'),
        $register_btn: $('#register_btn'),
        $moveOut_btn: $('#moveOut_btn'),
    },
    $inFqcPrdListDiv: $('#inFqcPrdListDiv'),

    tables: {
        $inFqcPrdListGrd: $('#inFqcPrdListGrd'),
    },
};


var onCreateFun = {
//初始化表格方法
    initInFqcProInfoGrdFun: function () {
        var data = [];
        var colModelArray = [
            {title: "工单号", dataType: "string", dataIndx: 'wo_id_fk'},
            {title: "玻璃代码", dataType: "string", dataIndx: 'prd_seq_id'},
            {title: "状态", dataType: "string", dataIndx: 'prd_stat'},
            {title: "产品代码", dataType: "string", dataIndx: 'mdl_id_fk'},
            {title: "电讯检测结果", dataType: "string", dataIndx: 'ext_4'},
            {title: "外观检测结果", dataType: "string", dataIndx: 'ext_6'},
        ];

        var optionObj = {
            height: $(window).height() - domObj.$inFqcPrdListDiv.offset().top - $('.page-header.navbar').height(),
            selectionModel: {type: 'row', mode: 'single'},
            numberCell: {show: true},
            scrollModel: {pace: 'fast', autoFit: true, theme: true},
            wrap: false,
            stripeRows: true,
            hoverMode: 'row',
            colModel: colModelArray,
            dataModel: {
                data: data
            }
        };


//行单击时间，PQgrid目前只能先将值放到Input再做处理
        optionObj.rowClick = function (event, ui) {
            var clickData = ui.rowData.prd_seq_id;
            domObj.$inFqcPrdRowSelData.val(clickData);
        }


        domObj.tables.$inFqcPrdListGrd.ddCreatePqgrid(optionObj);
    },


// 监听屏幕大小变化 作内容自适应
    refreshTab3LayoutFun: function () {
        domObj.$inFqcPrdListDiv.height($(window).height() - domObj.$inFqcPrdListDiv.offset().top - $('.page-header.navbar').height());
        // domObj.tables.$inFqcPrdListGrd.ddChangePQGridTableLocation({
        //     referenceH: $(window).height(),
        //     differenceH: domObj.$inFqcPrdListDiv.offset().top + $('.page-header.navbar').height()
        // });
    },
}


// 页面初始化方法
function onStartFun() {
    onCreateFun.initInFqcProInfoGrdFun();
    onCreateFun.refreshTab3LayoutFun();
    //iniButtonAction();
};
onStartFun();

 

基本方法：

添加数据：

$("#inFqcPrdListGrd").pqGrid("addRow", {rowData: data});

清除数据：

cleanInFqcPrdListGrid: function () {
            $("#inFqcPrdListGrd").pqGrid("option", "dataModel.data", []);
            $("#inFqcPrdListGrd").pqGrid("refreshDataAndView");
        }