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;

                }

            });

}

巴特西

jQuery Grid高级指南

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

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

问题四：表格完成响应式

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

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

问题的原因：

解决的办法：

最新文章

热门文章