bootstrap.min.css Bootstrap v3.3.7
bootstrap.min.js Bootstrap v3.3.7
jquery.min.js jQuery v2.1.4
<!--v5.6.0-->
jquery.jqGrid.min.js
grid.locale-cn.js
ui.jqgrid-bootstrap.css
ui.jqgrid-bootstrap-ui.css
注意：
bootstrap.min.css 中 使用了Bootstrap 字体图标(Glyphicons)，要 引入 ../fonts ,需要自行下载放到 指定路径下
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot?#iefix
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff2
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular
html 页面设置
<div class="jqGrid_wrapper">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
function queryUserJqGrid(){
let page ={'pageSize': 2,'pageNum': 1, 'data':{} }
$.jgrid.defaults.styleUI = "Bootstrap";
//初始化右键菜单
$("#jqGrid").jqGrid({
url: httpUrl+"/api/manage/user/page",
datatype : "json",
ajaxGridOptions: {
contentType: "application/json",
},//post请求需要加
mtype: "POST",//post请求需要加
postData: page,
serializeGridData: function(postData) {
return JSON.stringify(postData);
},//post请求需要加
colNames : ["用户ID", "用户名称","组织编码","组织名称", "创建时间", "状态", "操作" ],
colModel : [{
name : "id",
index : "id",
width : 50,
},{
name : "userName",
index : "userName",
width : 50,
}, {
name : "organizationId",
index : "organizationId",
width : 80
}, {
name : "organizationName",
index : "organizationName",
width : 80
}, {
name : "createTime",
index : "createTime",
width : 80
}, {
name : "status",
index : "status",
width : 50,
formatter:function(cellvalue, options, rowObject){
}
}, {
name : "id",
index : "id",
width : 50,
formatter:function(cellvalue, options, rowObject){
return '<a id="table_'+rowObject.code+'" href="javascript:tableToEdit(\''+rowObject.code+'\');" isOpen="'+rowObject.isOpen+'" code="'+rowObject.code+'" sortBy="'+rowObject.sortBy+'" name="'+rowObject.name+'" catalogCode="'+rowObject.catalogCode+'" tableName="'+rowObject.tableName+'" showType="'+rowObject.showType+'" isShow="'+rowObject.isShow+'">编辑</a>'
+'<a href="javascript:;" style="margin-left:10px" οnclick=deleteRow("'
+rowObject.code
+ '","'+rowObject.name
+ '","'+rowObject.catalogCode
+'")>删除</a>';
}
}],
jsonReader: {
root: "data.list", // 数据模型
page: "data.pageNum", // json中代表当前页码
total: "data.pages", // json中代表页码总数
records: "data.total", // json中代表数据总行数
//rows:"pageSize",
repeatitems : false
},
prmNames : {
page:"pageNum",
rows:"pageSize",
},
pager : "#jqGridPager",
rowList : [ 10, 20, 30 ],
rowNum : 2,
rownumbers: true,
viewrecords : true,显示总记录数
//multiselect: false, //可多选，出现多选框
//multiselectWidth: 25, //设置多选列宽度
autowidth : true,//自动匹配宽度
shrinkToFit : true,//当初始化列宽度时候的计算类型,true，则按比例初始化列宽度,false，则列宽度使用colModel指定的宽度
//height : $(window).height() - 160,
hidegrid : false,
refresh : true,
height: 'auto'
}).navGrid('#jqGridPager',{edit:true,add:true,del:true,search:true,refresh:true});
}
function query() {
var metatableVo = $('#searchForm').serializeJson();
$("#table_list").jqGrid('clearGridData'); //清空表格
$("#table_list").jqGrid('setGridParam',{ // 重新加载数据
url: httpUrl+'/matedata/metadata/metaTables/page',
datatype : "json",
ajaxGridOptions: {
contentType: "application/json",
},//post请求需要加
mtype: "POST",//post请求需要加
postData:{'data':metatableVo},
serializeGridData: function(postData) {
return JSON.stringify(postData);
},//post请求需要加
prmNames : {
page:"pageNum",
rows:"pageSize",
},
}).trigger("reloadGrid");
}
css加样式：
<style>
.form-control,
.single-line {
border-color: #ccc
}
.hr-line-dashed {
border-top: 1px dashed #ccc;
color: #fff;
background-color: #fff;
height: 1px;
margin: 20px 0;
}
.layui-layer-setwin .layui-layer-close1 {
background-position: 0px 0px;
cursor: pointer;
}
.layui-layer-close1 {
cursor: pointer;
background-position: 0px 0px;
}
.ui-jqgrid tr:nth-child(2n-1) {
background: rgb(245, 245, 245);
}
#data_type {
border: none;
background: transparent;
}
</style>
<style type="text/css">
.ui-jqgrid .ui-pg-selbox,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox {
padding: 0 0 3px 3px;
}
</style>
下载
jQuery Grid Plugin – jqGrid » Downloads
其他
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 搜索开源库
bootstrap3 Glyphicons fonts路径 - 简书
jquery.jqGrid.min.js:376 Uncaught TypeError: Cannot read property 'msie' of
Demo
http://guriddo.net/?page_id=119
http://www.guriddo.net/demo/bootstrap/
jqGrid demos-jqGrid实例-中文-mn886.net
WIKI
学习文档
JqGrid 使用方法详解 - ____chen - 博客园