jQuery Grid入门指南(2)
上周以为已经把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>'+ ' ';
}
}else{
button = '<a name="editBut" class="btn btn-sm btn-default" onclick="update('+id+')"><i class="fa fa-edit"></i></a>'+ ' '+
'<a name="deleteBut" class="btn btn-sm btn-default" onclick="deleteConfirm('+id+')"><i class="fa fa-trash"></i></a>'+ ' '+
'<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;
}
});
}
