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{

}

 

问题四：表格完成响应式

问题的原因：

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

解决的办法：

// 初始化表格
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();

</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (stateValue) {<br>　　　　 /<span style="color: #339966;">/将没有权限的集合转为json数据
    </span></span><span style="color: #0000ff;">var</span> values =<span style="color: #000000;"> JSON.parse(stateValue);
    </span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i &lt; values.length; i++<span style="color: #000000;">) {<br>　　　　　　　<span style="color: #339966;">//判断按钮是否在没有权限的集合中，在表示为没有权限，返回其所在索引
        </span></span><span style="color: #0000ff;">if</span>($.inArray(values[i].name,menu)!=-1<span style="color: #000000;">){<br>　　　　　　　　　<span style="color: #339966;">//数组中移除相关的name，方法名，图标名，即不生成按钮<br>　　　　　　　　　 <span style="color: #000000;"><span style="color: #3366ff;">var</span> index = $.inArray(values[i].name);</span></span>
            menu.splice(index,</span>1<span style="color: #000000;">);
            opera.splice(index,</span>1<span style="color: #000000;">);
            icons.splice(index,</span>1<span style="color: #000000;">);
        }
    }<br>　　　　 <span style="color: #339966;">//循环生成按钮
    </span></span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i = 0; i &lt; menu.length; i++<span style="color: #000000;">) {
        button </span>+= '&lt;a name="'+menu[i]+'" class="btn btn-sm btn-default" onclick="'+opera[i]+'('+id+')"&gt;&lt;i class="'+icons[i]+'"&gt;&lt;/i&gt;&lt;/a&gt;'+ '&amp;nbsp'<span style="color: #000000;">;
    }
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
    button </span>= '&lt;a name="editBut" class="btn btn-sm btn-default" onclick="update('+id+')"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;'+ '&amp;nbsp'+
    '&lt;a name="deleteBut" class="btn btn-sm btn-default" onclick="deleteConfirm('+id+')"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;'+ '&amp;nbsp'+
    '&lt;a name="browseBut" class="btn btn-sm btn-default" onclick="browse('+id+')"&gt;&lt;i class="fa fa-th"&gt;&lt;/i&gt;&lt;/a&gt;'<span style="color: #000000;">;
}
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> 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(“请选择一行进行删除！”);
}
}

</span><span style="color: #008000;">//</span><span style="color: #008000;"> 浏览功能</span>

function browse(rowid){
if( rowid != null ) {
jQuery("#jqGrid").jqGrid(‘viewGridRow’,rowid,{left:500,width:300,reloadAfterSubmit:false});
} else{
alert(“请选择一行进行查看！”);
}

</span><span style="color: #008000;">//</span><span style="color: #008000;"> 删除浏览中的操作按钮</span>
$("#trv_operator"<span style="color: #000000;">).css({
     </span>"display":"none"<span style="color: #000000;">
 }); 

}

 

问题六：表格中点击行按钮触发事件，传递的参数为[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: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
            errorTextFormat: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (data) {
                </span><span style="color: #0000ff;">return</span> 'Error: ' +<span style="color: #000000;"> data.responseText;
            }
        },
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 新增信息弹框</span>

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