一、认识JqGrid
1、JQGrid介绍:
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。
2、jqGrid原理
jqGrid是典型的B/S架构,服务器端只是提供数据管理,客户端只提供数据显示。换句话说,jqGrid可以以一种更加简单的方式来展现你数据库的信息,而且也可以把客户端数据传回给服务器端。 对于jqGrid我们所关心的就是:必须有一段代码把一些页面信息保存到数据库中,而且也能够把响应信息返回给客户端。jqGrid是用ajax来实现对请求与响应的处理。
JqGrid Demos参考文档:https://blog.mn886.net/jqGrid/
二、实现表格操作行按钮
参考代码如下(quit.js文件):
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'admin/quit/list',
datatype: "json",
colModel: [
{ label: 'id', name: 'id', index: 'id', width: 50, key: true },
{ label: '申请人', name: 'username', index: 'username', width: 80 },
{ label: '申请理由', name: 'info', index: 'info', width: 80 },
{ label: '申请时间', name: 'time', index: 'time', width: 80 },
{ label: '状态', name: 'status', index: 'status', width: 80, formatter: function(value, options, row){
if(value == 0){
return '<span class="label label-warning">未审核</span>'
}
else if(value == 1){
return '<span class="label label-success">同意</span>';
}
else{
return '<span class="label label-danger">不同意</span>';
}
}},
{ label: '操作', width: 80, formatter: function (value, grid, rows) {
var id=rows.id;
var button1 = "agree('" + id + "')";
var button2 = "disagree('" + id + "')";
return '<input id="'+ id+ '" type="button" class="btn btn-info btn-xs" name="Submit" value="同意" οnclick="'+ button1 + '"/>'
+' '
+'<input id="'+ id+ '" type="button" class="btn btn-info btn-xs" name="Submit" value="不同意" οnclick="'+ button2 + '"/>'
; }}
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
});
function agree(id) {
$.ajax({
type: "POST",
url: baseURL + "admin/quit/agree",
contentType: "application/json",
data: JSON.stringify(id),
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
function disagree(id) {
$.ajax({
type: "POST",
url: baseURL + "admin/quit/disagree",
contentType: "application/json",
data: JSON.stringify(id),
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
var vm = new Vue({
el:'#rrapp',
data:{
showList: true,
title: null,
quit: {
status:0
}
},
methods: {
query: function () {
vm.reload();
},
add: function(){
vm.showList = false;
vm.title = "新增";
vm.quit = {status:0};
},
update: function (event) {
var id = getSelectedRow();
if(id == null){
return ;
}
vm.showList = false;
vm.title = "修改";
vm.getInfo(id)
},
saveOrUpdate: function (event) {
$('#btnSaveOrUpdate').button('loading').delay(1000).queue(function() {
var url = vm.quit.id == null ? "admin/quit/save" : "admin/quit/update";
$.ajax({
type: "POST",
url: baseURL + url,
contentType: "application/json",
data: JSON.stringify(vm.quit),
success: function(r){
if(r.code === 0){
layer.msg("操作成功", {icon: 1});
vm.reload();
$('#btnSaveOrUpdate').button('reset');
$('#btnSaveOrUpdate').dequeue();
}else{
layer.alert(r.msg);
$('#btnSaveOrUpdate').button('reset');
$('#btnSaveOrUpdate').dequeue();
}
}
});
});
},
del: function (event) {
var ids = getSelectedRows();
if(ids == null){
return ;
}
var lock = false;
layer.confirm('确定要删除选中的记录?', {
btn: ['确定','取消'] //按钮
}, function(){
if(!lock) {
lock = true;
$.ajax({
type: "POST",
url: baseURL + "admin/quit/delete",
contentType: "application/json",
data: JSON.stringify(ids),
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
$("#jqGrid").trigger("reloadGrid");
}else{
layer.alert(r.msg);
}
}
});
}
}, function(){
});
},
getInfo: function(id){
$.get(baseURL + "admin/quit/info/"+id, function(r){
vm.quit = r.quit;
});
},
reload: function (event) {
vm.showList = true;
var page = $("#jqGrid").jqGrid('getGridParam','page');
$("#jqGrid").jqGrid('setGridParam',{
page:page
}).trigger("reloadGrid");
}
}
});
注意:操作列按钮使用formatter来设置,定义按钮的触发动作方法需要写在外边。