<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>jqGrid Demos</title>
|
<link href="../../../bootstrap/2.3.1/css_default/bootstrap.min.css" rel="stylesheet" type="text/css"/>
|
|
<!-- <link href="../css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> -->
|
<link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
|
|
<link href="../../../common/jeesite.css" type="text/css" rel="stylesheet"/>
|
|
<script src="../../../jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
|
<script src="../i18n/grid.locale-cn.js" type="text/javascript"></script>
|
<script src="../js/jquery.jqGrid.js" type="text/javascript"></script>
|
<script src="../plugins/grid.complexHeaders.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
$(document).ready(function(){
|
|
// ==============
|
|
var grid2 = $("#list2").jqGrid({
|
url:'server.json',
|
datatype: "json",
|
jsonReader: { // 自定义json数据格式
|
root: "list", page: "pageNo", total: "totalPage",
|
records: "count", subgrid: {root:"list"}
|
},
|
colNames:['编号','类型', '<font color=red>关键字</font>', '日期','访问数','其它'],
|
colModel:[
|
{name:'Id',index:'id', width:55, sortable:false, frozen : true},
|
{name:'DataType',index:'data_type', width:120, frozen : true},
|
{name:'KeyWords',index:'key_words desc, data_type', width:300},
|
{name:'DoTime',index:'do_time', width:360, align:"center"},
|
{name:'DataCount',index:'data_count', width:280, align:"right", formatter: 'number'},
|
{name:'test',index:'total', width:500,formatter: function(val, obj, row, act){
|
return " test"
|
}}
|
],
|
rowNum:-1, // 显示行数，-1为显示全部
|
//rowList:[10,20,30],
|
//pager: '#pager2',
|
//sortname: 'id',
|
//sortorder: "asc",
|
//viewrecords: true,
|
rownumbers: true, // 显示序号
|
shrinkToFit: false, // 不按百分比自适应列宽
|
multiselect: true, // 显示多选复选框
|
multiboxonly:true, // 单击复选框时在多选
|
footerrow: true, // 显示底部合计行
|
userDataOnFooter: true, // 使用json数据作为合计行数据
|
altRows: true, // 斑马线样式，交替行altclass
|
beforeRequest: function(data){
|
//console.log(data);
|
},
|
loadComplete: function(data){
|
//console.log(data.page);
|
},
|
loadError: function(data){
|
//console.log(data);
|
},
|
gridComplete : function() {
|
//var dataCount = $(this).getCol('DataCount',false,'sum');
|
//$(this).footerData("set",{name:"合计",
|
// DataCount:dataCount
|
//});
|
//$(".ui-jqgrid-sdiv").show();
|
$(window).resize();
|
}
|
//caption:"JSON Example"
|
});
|
// 二级表头
|
grid2.jqGrid('setGroupHeaders', {
|
useColSpanStyle: true,
|
groupHeaders:[
|
{startColumnName: 'Id', numberOfColumns: 2, titleText: 'Client Details'},
|
{startColumnName: 'DoTime', numberOfColumns: 3, titleText: 'Client KeyWords'}
|
]
|
});
|
// 三级表头
|
// grid2.jqGrid('setComplexHeaders', {
|
// complexHeaders:{
|
// defaultStyle:true,
|
// twoLevel:[
|
// {startColumnName: 'DoTime', numberOfColumns: 2, titleText: '二级表头'}
|
// ],
|
// threeLevel:[
|
// {startColumnName:'Id',numberOfColumns:2,titleText:'三级表头'},
|
// {startColumnName:'KeyWords',numberOfColumns:3,titleText:'三级表头2'}
|
// ]
|
// }
|
// });
|
grid2.jqGrid('setFrozenColumns'); // 冻结列，在colModel指定frozen: true
|
//grid2.jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
|
$(window).resize(function(){
|
grid2.jqGrid('setGridWidth',$(window).width()-100);// 自动调整表格大小
|
grid2.jqGrid('setGridHeight',$(window).height()/2-100);// 自动调整表格大小
|
$("#gbox_list2 .ui-jqgrid-bdiv").css({"padding-bottom":"20px"});
|
$("#gbox_list2 .ui-jqgrid-sdiv").width($(".ui-jqgrid-sdiv").width()-16);
|
$("#gbox_list2 .ui-jqgrid-sdiv").css({"position":"absolute","bottom":"16px"});
|
//$("#gbox_list2 .ui-jqgrid-sdiv td").css({"border-bottom":"solid 1px #ddd"});
|
$("#gbox_list2 .ui-jqgrid-sdiv td").not("td.jqgrid-rownum").css({"background":"#fdfdfd"});
|
$("#gbox_list2 .frozen-sdiv.ui-jqgrid-sdiv").css({"top":"auto","z-index":"1"});
|
$("#gbox_list2 .frozen-sdiv td:eq(3)").text("合计：");
|
}).resize();
|
|
// ===========
|
|
var grid = $("#list1").jqGrid({
|
url:'server.json',
|
datatype: "json",
|
jsonReader: {
|
root: "list",
|
page: "pageNo",
|
total: "totalPage",
|
records: "count",
|
subgrid: {root:"list"}
|
},
|
colNames:['编号','类型', '<font color=red>关键字</font>', '日期','访问数','操作'],
|
colModel:[
|
{name:'Id',index:'id', width:55, sortable:false, frozen : true},
|
{name:'DataType',index:'data_type', width:120, frozen : true},
|
{name:'KeyWords',index:'key_words desc, data_type', width:100},
|
{name:'DoTime',index:'do_time', width:160, align:"center"},
|
{name:'DataCount',index:'data_count', width:80, align:"right", formatter: 'number'},
|
{name:'btns',index:'total', width:100,formatter: function(val, obj, row, act){
|
return " <a href='#"+row.Id+"'>添加</a> <a href='#"+row.Id+"'>删除</a>"
|
}}
|
],
|
rowNum:-1,
|
//rowList:[10,20,30],
|
//pager: '#pager2',
|
//sortname: 'id',
|
//sortorder: "asc",
|
//viewrecords: true,
|
rownumbers: true,
|
//shrinkToFit: false,
|
multiboxonly:true,
|
multiselect: true,
|
beforeRequest: function(data){
|
//console.log(data);
|
},
|
loadComplete: function(data){
|
//console.log(data.page);
|
},
|
loadError: function(data){
|
//console.log(data);
|
},
|
gridComplete : function() {
|
$(window).resize();
|
}
|
//caption:"JSON Example"
|
});
|
grid.jqGrid('navGrid','hideCol',"Id").jqGrid('sortableRows');
|
//grid.jqGrid('setFrozenColumns');
|
//grid.jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
|
$(window).resize(function(){
|
grid.jqGrid('setGridWidth',$(window).width()-100);
|
grid.jqGrid('setGridHeight',$(window).height()/2-100);
|
}).resize();
|
});
|
</script>
|
</head>
|
<body>
|
<table id="list2"></table>
|
<div id="pager2"></div>
|
<br/>
|
<table id="list1"></table>
|
</body>
|
</html>
|
