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");
        }
    }
});