<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jqGrid表格内容查询读取代码</title>
<link href="jqgrid/css/ui.jqgrid-bootstrap.min.css" rel="stylesheet" />
<link href="jqgrid/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8"src="jqgrid/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" charset="utf-8"src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" charset="utf-8"src="jqgrid/js/grid.locale-cn.min.js"></script>
<script type="text/javascript" charset="utf-8"src="jqgrid/js/layer/layer.min.js"></script>
<script type="text/javascript" charset="utf-8"src="jqgrid/js/layer/extend/layer.ext.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jqgrid/js/form.min.js"></script>
<script>
$(function() {
loadGrid();
//da();
var str = { "userName": "赵建鹏", "sex": "man" };
//alert(str.userName);
});
//装载表格
function loadGrid() {
$("#grid").jqGrid(
{
height : 400,
rownumbers : true,
colModel : [
{
label : '姓名',
name: 'name',
index: 'name',
width : 120
},
{
label : '年龄',
name : 'age',
index : 'age',
sortable : false,
width : 120
},
{
label : ' ',
name : 'id',
width : 120,
align : 'center',
sortable : false,
formatter : function(value, options, row) {
var btn = "";
btn += ' <a href="javascript:onDtl('
+ value
+ ')"class="mesq">查看信息</a> '
btn += ' <a href="javascript:onDel('
+ value
+ ')"class="mesd">删除信息</a> '
return btn;
}
} ],
rowNum : 20,
rowList : [ 20, 50, 100 ],
pager : '#pager',
sortname : 'id',
sortorder : "desc"
});
var rows = [
{"name":"name1","age":"21","id":"1"},
{"name":"name2","age":"22","id":"2"},
{"name":"name3","age":"23","id":"3"},
{"name":"name4","age":"24","id":"4"},
{"name":"name5","age":"25","id":"5"},
{"name":"name6","age":"26","id":"6"},
{"name":"name7","age":"27","id":"7"},
{"name":"name8","age":"28","id":"8"},
{"name":"name9","age":"29","id":"9"},
{"name":"name10","age":"30","id":"10"},
{"name":"name11","age":"31","id":"11"},
{"name":"name12","age":"32","id":"12"},
{"name":"name13","age":"33","id":"13"},
{"name":"name14","age":"34","id":"14"},
{"name":"name15","age":"35","id":"15"},
{"name":"name16","age":"36","id":"16"},
{"name":"name17","age":"37","id":"17"},
{"name":"name18","age":"38","id":"18"},
{"name":"name19","age":"39","id":"19"},
{"name":"name20","age":"40","id":"20"},
];
for(var i = 0; i < rows.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, rows[i]);
}
}
//查看信息
function onDtl(id){
layer.alert("姓名：name"+id+"</br>"+"年龄:"+(20+id)+"岁");
}
//删除
function onDel(id) {
layer.confirm('您确定要删除吗？',
{btn : [ '确定', '取消' ]},
function(){layer.alert("此处为删除信息的方法");}
);
}
//查询
function onQ() {
layer.alert("此处为携带"+$("#userName").val()+" "+$("#honestName").val()+"参数执行条件查询");
}
//显示全部
function showAll() {
$("#userName").val("");
$("#honestName").val("");
layer.alert("显示全部数据！");
}
//窗口变化时自适应宽度
window.onresize = function() {
$("#grid").setGridWidth(document.body.clientWidth - 12);
}
</script>
</head>
<body><script src="/demos/googlegg.js"></script>
<style>
.in{height:30px;border-radius:4px;}
.getS{background:#69Ea7c;color:#fff;padding:5px;padding-left:20px;padding-right:20px;border-radius:4px;}
.getS:HOVER{background:#49D44d;cursor:pointer;}
.mesd{color:#C12E2A}
.mesq{color:#4CAE4C}
</style>
<div style="padding-Top:5px;background:#ddd;height:40px">
<label style="margin-left:45px">姓名：</label> <input class="in" id="userName" placeholder=" 查询信息"/>
<label>年龄：</label> <input class="in" id="honestName"placeholder=" 查询信息"/>
<label onclick="onQ()" class="getS"> 查 询 </label>
<label onclick="showAll()" class="getS"> 显示全部</label>
<label onclick="javascript:window.history.back(-1);" class="getS"> 返 回 </label>
</div>
<div class="row">
<div class="col-sm-12" style="background:#eee">
<table id="grid" style="background:#eff"></table>
<div id="pager" style="height:35px;"></div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jqGrid表格内容查询读取代码.zip
版权申诉
49 浏览量
2023-09-27
22:14:00
上传
评论
收藏 792KB ZIP 举报
jqGrid表格内容查询读取代码.zip （35个子文件） 
jqgrid js 
npm.js 484B jquery-3.0.0.min.js 84KB bootstrap.min.js 36KB grid.locale-cn.min.js 4KB jquery.jqGrid.min.js 304KB form.min.js 10KB layer layer.min.js 15KB extend layer.ext.min.js 5KB skin layer.ext.css 3KB default 
loading-2.gif 2KB loading-1.gif 701B loading-0.gif 6KB
icon-ext.png 6KB icon.png 11KB layer.css 11KB css ui.jqgrid.min.css 13KB bootstrap.min.css 119KB ui-anim_basic_16x16_2.gif 1KB ui.jqgrid-bootstrap-ui.min.css 354B font-awesome.min.css 26KB bootstrap-theme.min.css 23KB ionicons.min.css 50KB ui.jqgrid-bootstrap.min.css 12KB fonts FontAwesome.otf 92KB
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB fontawesome-webfont.eot 67KB glyphicons-halflings-regular.woff2 18KB fontawesome-webfont.woff 79KB fontawesome-webfont.woff2 63KB fontawesome-webfont.svg 348KB fontawesome-webfont.ttf 135KB img 
index.html 5KB资源评论
