代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqgrid demo</title>
<link href="plugin/jqgrid-bootstrap/4.6/css/ui.jqgrid.css" media="screen" rel="stylesheet">
<link href="plugin/bootstrap/3.0.3/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="plugin/jqgrid-bootstrap/4.6/css/jqgrid.bootstrap.css" media="screen" rel="stylesheet">
<style>
body{
background-color:red;
}
</style>
</head>
<body>
<div id="msg"></div>
<div id="body">
<div id="main">
<div style="text-align:center">
客户id:<input type="text" name="myId" id="myId">
客户姓名:<input type="text" name="myName" id="myName">
<input type="button" value="查询" id="search">
</div>
<table id="jtable"></table>
<div id="jpager"></div>
<div>您选择了<lable id="count" style="color:red;">0</lable>个客户。</div>
</div>
</div>
<script src="plugin/jquery/1.9.1/jquery.js" type="text/javascript" ></script>
<script src="plugin/jqgrid-bootstrap/4.6/js/i18n/grid.locale-cn.js" type="text/javascript" ></script>
<script src="plugin/jqgrid-bootstrap/4.6/js/jquery.jqGrid.src.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
var mydata = [
{id:"1",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",sex:"0",age:28,name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",sex:"0",age:28,name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",sex:"0",age:28,name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
$("#jtable").jqGrid({
//url:"${root }/jqgrid/list", //请求的url
mtype: "POST",
data: mydata,
datatype: "local", //数据类型"local","xml","json",
colNames:['唯一号','姓名','性别','年龄', '出生日期', '银行存款', '税收', '总存款'],
colModel:[
{name:'id',index:'id', width:75,frozen:true},
{name:'name',index:'name', width:75,frozen:true},
{name:'sex',index:'sex', width:90,formatter:'select', editoptions:{value:"0:女;1:男"}},
{name:'age',index:'age', width:40},
{name:'invdate',index:'invdate', width:100, formatter:'date', formatoptions: {srcformat:"Y-m-d H:i:s", newformat :"Y年m月d日"}},
{name:'amount',index:'amount', width:180, formatter:'number', formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"},
{name:'tax',index:'tax', width:180, formatter:'number', formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"},
{name:'total',index:'total', width:180, formatter:'number', formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3} ,align:"right"}
],
rowNum:10,
rowList:[10,20,30],
shrinkToFit: false,
caption: "客户信息",
pager: "#jpager", //分页栏显示在id为pager1的div里面
multiselect: true, //复选框
width: 800, //Grid 宽度
height: 200 //行高 height: "100%",
}).jqGrid('setGroupHeaders', {
useColSpanStyle: true, //若为true将没有拆分的title合并
groupHeaders:[
{startColumnName: 'amount', numberOfColumns: 3, titleText: '银行存款'}
]
}).jqGrid('setFrozenColumns'); //除了frozen:true，还要调用此函数才能使冻结有效
jQuery("#jtable").jqGrid('navGrid','#jpager',{edit:true,add:true,del:true});
}) ;
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手