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