JqGrid 的新增、刪除、修改URL設置，列格式設置下拉框，選中行觸發事件記錄

一、列設置爲下拉框關鍵屬性： edittype: "select", editoptions:{}

設置可編輯關鍵屬性：editable: true, 設置爲true則可以編輯，默認爲 false。如下代碼中所示。

colModel: [
            { label: 'id', name: 'id', width: 30, hidden: true, key: true },
            { label: '狀態', name: 'state', editable: true, edittype: "select", editoptions: {value: "4:無生產; 3:在制; 1:量產; 2:試產; 5:其他"}, width: 60 },
        ],

二、選中編輯行觸發的事件onSelectRow 如下代碼中所示：

$jqGrid.jqGrid({
        url: baseURL + 'project/file/list',
        datatype: "json",
        colModel: [
            { label: 'id', name: 'id', width: 30, hidden: true, key: true },
            { label: '狀態', name: 'state', editable: true, edittype: "select", editoptions: {value: "4:無生產; 3:在制; 1:量產; 2:試產; 5:其他"}, width: 60 },
        ],
        // 選中行時觸發的事件
        onSelectRow : function(id) {
            if (id && id !== lastsel) {
                jQuery('#jqGrid').jqGrid('restoreRow', lastsel);
                jQuery('#jqGrid').jqGrid('editRow', id, true, function (){},
                    function (r) {
                        var parse = JSON.parse(r.responseText);
                        if (parse.code == 0) {
                            alert('修改成功', function () {
                                vm.reload();
                            });
                        } else {
                            alert('修改失敗', function () {
                                vm.reload();
                            });
                        }
                    });
                lastsel = id;
            }
        },
        // 表格名稱
        caption : "項目檔案",
    );

三、修改、新增、刪除的URL --->editurl 這個URL是修改、新增、刪除的共同URL，JqGrid中沒有在屬性中區分。

在後臺中通過一個屬性名稱爲 “oper” 的屬性接收

@RequestMapping("/updateProjectEntity")
    public R updateProjectEntity(@ModelAttribute ProjectManagementEntity entity, @RequestParam(value="oper") String oper) 

$jqGrid.jqGrid({
        url: baseURL + 'project/file/list',
        datatype: "json",
        colModel: [
            { label: 'id', name: 'id', width: 30, hidden: true, key: true },
            { label: '狀態', name: 'state', editable: true, edittype: "select", editoptions: {value: "4:無生產; 3:在制; 1:量產; 2:試產; 5:其他"}, width: 60 },
        ],
        onSelectRow : function(id) {
            if (id && id !== lastsel) {
                jQuery('#jqGrid').jqGrid('restoreRow', lastsel);
                jQuery('#jqGrid').jqGrid('editRow', id, true, function (){},
                    function (r) {
                        var parse = JSON.parse(r.responseText);
                        if (parse.code == 0) {
                            alert('修改成功', function () {
                                vm.reload();
                            });
                        } else {
                            alert('修改失敗', function () {
                                vm.reload();
                            });
                        }
                    });
                lastsel = id;
            }
        },
        // 表格名稱
        caption : "項目檔案",
        // 保存編輯之後的URL地址
        editurl : baseURL + 'project/file/updateProjectEntity',
    
    );

四、設置字段格式 formatter：“number” 和 formatoptions：{}。這裏是千分號，其它的可以查閱官網上的

$("#jqGrid").jqGrid({
        url: baseURL + 'indicators/capita/list',
        datatype: "json",
        colModel: [
            { label: '項次', name: 'lineItem', width: 60, key: true },
            { label: '上一年', name: 'lastYear', width: 50, formatter : "number",
                formatoptions : {
                    decimalSeparator : ".",
                    thousandsSeparator : ",",
                    decimalPlaces : 0,
                    defaulValue : 0}
                },
        ],
       
        // 加載完成後事件
        loadComplete:function (xhr) {
            window.parent.document.getElementsByTagName("body")[0].className = "skin-blue sidebar-mini sidebar-collapse";
        }
    });

五：如果沒有使用自適應的列寬，必須設置屬性 shrinkToFit:false,否則不會根據列中設置的寬度。但是如果自定義了列寬，一般都需要釋放垂直和水平的滾動條，如下代碼中所示

var $jqGrid = $("#jqGrid");
    $jqGrid.jqGrid({
        url: baseURL + 'project/file/list',
        datatype: "json",
        colModel: [
            { label: 'id', name: 'id', width: 30, hidden: true, key: true },
            { label: '狀態', name: 'state', editable: true, edittype: "select", editoptions: {value: "4:無生產; 3:在制; 1:量產; 2:試產; 5:其他"}, width: 60 }
        ],
        // 表格名稱
        caption : "項目檔案",
        // 保存編輯之後的URL地址
        editurl : baseURL + 'project/file/updateProjectEntity',
        // 加載完成後事件
        loadComplete:function () {
            window.parent.document.getElementsByTagName("body")[0].className = "skin-blue sidebar-mini sidebar-collapse";
        },
        // 自定義列寬 必須屬性
        shrinkToFit:false,
        // autowidth: true,
        height: 450,
        gridComplete:function(){
            // X 軸和 Y 軸的滾動條 隱藏  $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
        }
    });
  
    );

六、這個記錄一下之前的代碼，方便以後查找

$(function () {
    var lastsel;
    var $jqGrid = $("#jqGrid");
    $jqGrid.jqGrid({
        url: baseURL + 'project/file/list',
        datatype: "json",
        colModel: [
            { label: 'id', name: 'id', width: 30, hidden: true, key: true },
            { label: '狀態', name: 'state', editable: true, edittype: "select", editoptions: {value: "4:無生產; 3:在制; 1:量產; 2:試產; 5:其他"}, width: 60 }
        ],
        onSelectRow : function(id) {
            if (id && id !== lastsel) {
                jQuery('#jqGrid').jqGrid('restoreRow', lastsel);
                jQuery('#jqGrid').jqGrid('editRow', id, true, function (){},
                    function (r) {
                        var parse = JSON.parse(r.responseText);
                        console.log("修改結果回調參數：" + parse.code);
                        if (parse.code == 0) {
                            alert('修改成功', function () {
                                vm.reload();
                            });
                        } else {
                            alert('修改失敗', function () {
                                vm.reload();
                            });
                        }
                    });
                lastsel = id;
            }
        },
        // 表格名稱
        caption : "項目檔案",
        // 保存編輯之後的URL地址
        editurl : baseURL + 'project/file/updateProjectEntity',
        // 加載完成後事件
        loadComplete:function () {
            window.parent.document.getElementsByTagName("body")[0].className = "skin-blue sidebar-mini sidebar-collapse";
        },
        // 自定義列寬 必須屬性
        shrinkToFit:false,
        sortorder: "asc",
        sortname: "id",
        width:"100%",
        // autowidth: true,
        height: 450,
        viewrecords: true,
        rowNum: 15,
        rowList : [15,30,50],
        // rownumbers: true,
        // rownumWidth: 25,
        multiselect: true,
        multiboxonly:true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            // X 軸和 Y 軸的滾動條 隱藏  $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });
        }
    });
    $jqGrid.jqGrid('navGrid', "#jqGridPager",
        {edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false},
        // options for the Edit Dialog
        {
            editCaption: "The Edit Dialog",
            recreateForm: true,
            checkOnUpdate : true,
            checkOnSubmit: true,
            closeAfterEdit: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        },
        // options for the Add Dialog
        {
            closeAfterAdd: true,
            recreateForm: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        },
        // options for the del Dialog
        {
            zIndex: 1000,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        }
    );
    // $jqGrid.jqGrid('navGrid','#pcrud',{});
});

var vm = new Vue({
    el:'#projectFile',
    data:{
        q:{
            key: null
        }
    },
    methods: {
        query: function () {
            vm.reload();
        },
        reload: function (event) {
            var page = $("#jqGrid").jqGrid('getGridParam','page');
            $("#jqGrid").jqGrid('setGridParam',{
                postData:{'key': vm.q.key},
                page:page
            }).trigger("reloadGrid");
        }
    }
});