基础用法
<div style="margin-top:5px;">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
$("#jqGrid").Grid({
url: '../platUserRole/list',
colModel: [
{label: '角色ID', name: 'roleId', index: 'role_id', align:"center", key: true, width: 80},
{label: '角色名称', name: 'roleName', index: 'role_name', align:"center", width: 80},
{label: '作用人数', name: 'effectNum', index: 'effectNum', align:"center", width: 80},
{label: '操作', name: 'operate', index: 'operate', sortable: false, align:"center", width: 50,
formatter: function(value, col, row) {
return '<a οnclick="vm.roleEditBtn(' + row.roleId + ')">编辑</a> <a οnclick="vm.deleteBtn(' + row.roleId + ','+row.effectNum+')">删除</a>';
}
}
],
autowidth:true,
height:250
});
常用方法：
1、重新设置查询条件，并重置搜索结果
searchBtn: function() {
let page = $("#jqGrid").jqGrid('getGridParam', 'page');
$("#jqGrid").jqGrid('setGridParam', {
postData: {'name':vm.search.name,'status':vm.search.status},
page: page
}).trigger("reloadGrid");
},
2、获取选中数据的keyid
//单选
let id = $("#jqGrid").getGridParam("selrow");
//多选
let ids = $("#jqGrid").getGridParam("selarrrow");
3、根据keyid获取表格选中的数据
//选中数据，返回该数据完整信息
let id = $("#jqGrid").getGridParam("selrow");
let data = $("#jqGrid").jqGrid('getRowData', id);
console.info('data is ',data);
4、增加操作列。思路：1、在colModel中增加一列 2、在列中使用formatter方法，返回html
//单参数传递操作列写法
{label: '操作', name: 'oper', index: 'oper', width: 100,
formatter: function(value, col, row) {
return "<a class='btn btn-primary' οnclick='vm.selectAttrClassBtn(\"" + row.id +"\")'>编辑</a>";
}
}
//多参数传递操作列写法
{label: '操作', name: 'oper', index: 'oper', width: 100,
formatter: function(value, col, row) {
return "<a class='btn btn-primary' οnclick='vm.selectAttrClassBtn(\"" + row.id + "\",\""+ row.name+"\",\""+row.sex+"\",\""+row.age+"\")'>编辑</a>";
}
}
5、单元格数据内容居中
方式1：在colModel列中增加align:"center"属性
{label: '角色ID', name: 'roleId', index: 'role_id', align:"center", key: true, width: 80},
方式2：使用CSS
……
<style>
#jqGrid tr td{
text-align:center;
}
</style>
……
<body>
<div style="margin-top:5px;">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
……
6、设置横向滚动条
$("#jqGrid").Grid({
url: '../platUserRole/list',
colModel: [
{label: '角色ID', name: 'roleId', index: 'role_id', align:"center", key: true, width: 80},
{label: '角色名称', name: 'roleName', index: 'role_name', align:"center", width: 80},
{label: '作用人数', name: 'effectNum', index: 'effectNum', align:"center", width: 80},
{label: '操作', name: 'operate', index: 'operate', sortable: false, align:"center", width: 50,
formatter: function(value, col, row) {
return '<a οnclick="vm.roleEditBtn(' + row.roleId + ')">编辑</a> <a οnclick="vm.deleteBtn(' + row.roleId + ','+row.effectNum+')">删除</a>';
}
}
],
//设置横向滚动条
shrinkToFit:false,
autowidth:true
});
7、实现单元格显示图片，点击可以查看大图
……
//使用img标签，其中eyeImage为click事件处理方法（查看大图）
{label: '二维码', name: 'qrUrl', index: 'qr_url', width: 80,
formatter: function (value,col,row) {
return "<img width='50px' height='50px' οnclick='eyeImage(\""+ value +"\")' src='" + value + "'>";
}
},
……
function eyeImg(url)
{
layer.open({
type: 1,
title: false,
closeBtn: 1,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: '<img src="'+ url +'">'
});
}
……
8、默认初始化不向服务器请求
//使用datatype: 'local'属性实现初始化不向服务器请求
//需要请求服务器时设置datatype:'json'即可
$("#inform").Grid({
url: '../shopdynamicscommentrecord/list?operateType=1',
//初始化不向服务器请求
datatype: 'local',
colModel: [
{label: 'id', name: 'id', index: 'id', key: true, hidden: true},
{label: '图片', name: 'pictureOne', index: 'picture_one', width: 80,hidden:true},
{label: '图片', name: 'pictureTwo', index: 'picture_two', width: 80,hidden:true},
{label: '图片', name: 'pictureThree', index: 'picture_three', width: 80,hidden:true},
{label: '图片', name: 'pictureFour', index: 'picture_four', width: 80,hidden:true},
{label: '扩展字段', name: 'parm', index: 'parm', width: 80,hidden:true}
]
});
let page = $("#inform").jqGrid('getGridParam', 'page');
$("#inform").jqGrid('setGridParam', {
url:'../shopdynamicscommentrecord/list?operateType=1',
//请求服务器
datatype:'json',
postData: {'userName': vm.q.userName},
page: page
}).trigger("reloadGrid");
9、隐藏水平滚动条
隐藏水平滚动条
<style>
.ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; }
</style>
10、jqGrid “加载中” 文字修改
方式一：使用GIF
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(../statics/img/loading.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
border:0;
height: 60px;
width: 60px;
}
$("#jqGrid").Grid({
url: '../../list',
...
loadtext:'',
...
});
要删除jqgrid的“正在加载…”文本，您可以使用loadtext:’’ jqGrid选项或覆盖grid.locale-en.js的全局设置：$.jgrid.defaults.loadtext=’’;
方式二：使用FontAwesome
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "f110";
font-family: FontAwesome;
font-size:40px;
}
$(function () {
$.jgrid.defaults.loadtext='';
});
11、设置表格高度和默认显示条数
$("#jqGrid").Grid({
url: '../../list',
...
height: 550,
pager: "#jqGridPager",
rowNum:50,
rowList: [30,50,100],
loadonce:false,//关键所在
...
});
效果：
参考：https://www.orcode.com/question/1107257_ke76d2.html
3671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
