jQuery Grid高级指南

上周以为已经把jqgrid 表格这部分已经搞得差不多了，没想到在实际用的时候，出现了不少问题，重新把这块知识整理一下。

问题一：设置表格的自动刷新

问题的原因：

　　使用表格自带的增删改查的功能，编辑完数据后表中数据会刷新。但是手写方法修改数据，例如模态框，修改完成后并不会在表中进行数据的刷新。

解决的办法：

　　在请求发送之后，模态框关闭之前使用jqgrid的reloadGrid。

$("#jqGrid").trigger("reloadGrid");

问题二：表中日期的显示格式

问题的原因：

　　当数据库中的字段是date类型时，直接将数据加载到表格中，显示得是一串数字，为时间的毫秒值。

解决的办法：

　　给字段后追加时间转换的方法

{ label: '日期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert },

　　编写dateConvert方法

function dateConvert(cellvalue){
    var times= new Date(cellvalue) ;
    date = times.toLocaleString();
    return date;
}

问题三：设置表中每行交替显示样式不同

问题的原因：

　　在设置表格的属性altRows:true 后，表格的样式并没有发生改变

解决的办法：

　　在添加altRows:true属性之后，还需要设置altclass来规定需要交替显示得样式

altRows: true,  //设置行交替样式
altclass: 'differ', //手动写的交替的样式

.differ{
    background-color: #DDDDDC;
}

问题四：表格完成响应式

问题的原因：

　　这个问题本来已经在上一篇博客中得到了解决，可是又发现了一个新的问题，就是当表格的列数比较多时，表格中不会出现滚动条，手动调整窗口大小时才会出现。

解决的办法：

// 初始化表格
function gridInit(){
　　// 获取当前页面的宽度
    var Width = document.body.clientWidth;
    $("#jqGrid").jqGrid({
        url: '<%=basePath%>theTypeController/queryPerform/query',
        mtype: "post",
        datatype: "json",
        colModel: [
            { label: '这是文本', name: 'theText' ,align: 'center',editable: true },
            { label: '这是日期', name: 'theDate' ,align: 'center',editable: true,formatter:dateConvert },
            { label: '这是数字', name: 'theNumber' ,align: 'center',editable: true },
            { label: '这是主键', name: 'theId',key:true ,align: 'center',editable: true },
            { label: '操作', name: 'operator', align: 'center',formatter: operation}
        ],
        viewrecords: true,    //定义是否要显示总记录数
        rowNum: 5,            //每页显示的条数
        height: 'auto',        //自动行高
        width: Width-60,
        shrinkToFit:false,  //设置为true时，列数充满表格，当列数较多时，只会缩小列宽，并不会出现滚动条，需要将属性设置为false
        autoScroll: true,    //设置滚动条
        altRows: true,        //设置行交替样式
        altclass: 'differ', //交替的样式
        multiselect: true,  //是否可以多选
        rowList: [5,10,20],    //用来改变显示记录数
        pager: "#jqGridPager"    //定义翻页用的导航栏

    });
}

问题五：表格行中增加自定义按钮

问题的原因：

　　目前的项目中，需要给角色赋予增删改查的权限，当角色没有权限的时候，表中不应该出现对应的按钮，即动态的生成按钮。

解决的办法：

　　首先在表格中添加操作的列

{ label: '操作', name: 'operator', align: 'center',formatter: operation}

　　根据权限动态生成按钮，项目中是获取到该角色没有的权限名，根据权限名找到对应的按钮name，将其设置为隐藏

//根据权限动态生成表格中行按钮
function operation(cellvalue, options, rowObject) {
    var id = "'"+options.rowId+"'";　　//id写成这样的理由下面进行解释
    var button = "";
　　//定义按钮的name
    var menu = ["editBut","deleteBut","browseBut"];
　　//定义操作的方法名
    var opera = ["update","deleteConfirm","browse"];
　　//按钮的图标名
    var icons = ["fa fa-edit","fa fa-trash","fa fa-th"];
　　//获得所有没有权限的集合
    var stateValue = $("#PLATFORM_VIEWSTATE_49DFD9F16B6D11E6A077645A042EAA66_ID").val();

    if (stateValue) {
　　　　 //将没有权限的集合转为json数据
        var values = JSON.parse(stateValue);
        for (var i = 0; i < values.length; i++) {
　　　　　　　//判断按钮是否在没有权限的集合中，在表示为没有权限，返回其所在索引
            if($.inArray(values[i].name,menu)!=-1){
　　　　　　　　　//数组中移除相关的name，方法名，图标名，即不生成按钮
　　　　　　　　　 var index = $.inArray(values[i].name);
                menu.splice(index,1);
                opera.splice(index,1);
                icons.splice(index,1);
            }
        }
　　　　 //循环生成按钮
        for(var i = 0; i < menu.length; i++) {
            button += '<a name="'+menu[i]+'" class="btn btn-sm btn-default" onclick="'+opera[i]+'('+id+')"><i class="'+icons[i]+'"></i></a>'+ '&nbsp';
        }
    }else{
        button = '<a name="editBut" class="btn btn-sm btn-default" onclick="update('+id+')"><i class="fa fa-edit"></i></a>'+ '&nbsp'+
        '<a name="deleteBut" class="btn btn-sm btn-default" onclick="deleteConfirm('+id+')"><i class="fa fa-trash"></i></a>'+ '&nbsp'+
        '<a name="browseBut" class="btn btn-sm btn-default" onclick="browse('+id+')"><i class="fa fa-th"></i></a>';
    }
    return button;
}

　　按钮对应的方法

// 添加功能
function add(){
        jQuery("#jqGrid").jqGrid('editGridRow',"new",
           {url:"<%=basePath%>ttttttController/createPerform/",
            left:500,width:300,reloadAfterSubmit:false,closeAfterEdit: true});
}

// 编辑功能
function update(rowid){
    if( rowid != null ) {
        jQuery("#jqGrid").jqGrid('editGridRow',rowid,
           {url:"<%=basePath%>ttttttController/updatePerform/",
            left:500,width:300,reloadAfterSubmit:false,closeAfterEdit: true});
    } else{
        alert("请选择一行进行修改！");
    }
}

// 删除功能
function deleteConfirm(rowid){
    if( rowid != null ) {
        jQuery("#jqGrid").jqGrid('delGridRow',rowid,
           {url:"<%=basePath%>ttttttController/deletePerform/",
            left:500,width:300,reloadAfterSubmit:false});
    } else{
        alert("请选择一行进行删除！");
    }
}

    // 浏览功能
function browse(rowid){
    if( rowid != null ) {
        jQuery("#jqGrid").jqGrid('viewGridRow',rowid,{left:500,width:300,reloadAfterSubmit:false});
    } else{
        alert("请选择一行进行查看！");
    }

    // 删除浏览中的操作按钮
    $("#trv_operator").css({
         "display":"none"
     });
}

问题六：表格中点击行按钮触发事件，传递的参数为[object HTMLTableRowElement]

问题的原因：

　　在实现删除和修改功能时，表中设置的key为数字类型时，传参过程正常进行。但是当key为字符串时，参数传入新方法中会变成[object HTMLTableRowElement]，无法进行对应的操作。

解决的办法：

　　经过调试发现，例如修改按钮，点击按钮，触发update(options.rowId)方法，参数值为abc时，在浏览器中可以看到，点击事件为update(abc)，参数会发生异常。

　　只需将options.rowId提前处理好后再传递到方法中，例如写成这样的形式，var id = " ' "+options.rowId+" ' "; 给参数两端加上单引号之后，方法就会变为update('abc')。

问题七：对表格中的数据进行筛选

问题的原因：

　　根据输入框中输入的条件，点击修改按钮，筛选出需要的数据

解决的办法：

// 首先获取查询条件中的值
var theNumber = $("input[name='theNumber']").val();
var theId = $("input[name='theId']").val();
// 使用jqgrid中的方法
$("#jqGrid").jqGrid('setGridParam',{
     postData:{
          'theNumber' : theNumber ,
          'theId' : theId
              }
            }).trigger("reloadGrid"); //重新载入

问题八：表格坐下角增删改查刷新的方法

问题的原因：

　　利用表格中自带的方法进行数据操作，可以在表格的属性中设置editurl，不同操作向后台传递的参数不同，后台使用oper接收，编辑为edit，删除为delete，增加为add；若在弹框中设置了url，则会覆盖editurl

解决的办法：

$('#jqGrid').navGrid('#jqGridPager', {
        edit: false, add: false, del: true, search: false, refresh: false, view: false,
        position: "left", cloneToTop: false },
            // 编辑信息弹框
            {
                url:"<%=basePath%>ttttttController/updatePerform/",
                editCaption: "编辑信息",
                recreateForm: true,
                left:650,
                width:300,
                beforeSubmit : function( postdata, form , oper) {
                    if( confirm('确定更新信息吗?') ) {
                        return [true,''];
                    } else {
                        return [false, '不能提交!'];
                    }
                },

                closeAfterEdit: true,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText;
                }
            },
            // 新增信息弹框
            {
                url:"<%=basePath%>ttttttController/createPerform/",
                addCaption: "新增信息",
                closeAfterAdd: true,
                recreateForm: true,
                left:500,
                width:300,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText;
                }
            },
            // 删除信息弹框
            {
                url:"<%=basePath%>ttttttController/deletePerform/",
                delCaption: "删除信息",
                left:500,
                width:300,
                errorTextFormat: function (data) {
                    return 'Error: ' + data.responseText;
                }
            });
}