PanDuWeb/table_jqgrid.html

411 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<!-- jqgrid-->
<link href="css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
top: 900px !important;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox ">
<div class="ibox-title">
<h5>线索审核</h5>
</div>
<div class="ibox-content">
<div class="jqGrid_wrapper">
<table id="table_list_1"></table>
<div id="pager_list_1"></div>
</div>
</div>
</div>
<div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
</button>
<i class="fa fa-laptop modal-icon"></i>
<h4 class="modal-title">窗口标题</h4>
<small class="font-bold">这里可以显示副标题。
</div>
<div class="modal-body">
<p><strong>H+</strong> 是一个完全响应式基于Bootstrap3.3.7最新版本开发的扁平化主题她采用了主流的左右两栏式布局使用了Html5+CSS3等现代技术她提供了诸多的强大的可以重新组合的UI组件并集成了最新的jQuery版本(v2.1.1)当然也集成了很多功能强大用途广泛的jQuery插件她可以用于所有的Web应用程序如网站管理后台网站会员中心CMSCRMOA等等当然您也可以对她进行深度定制以做出更强系统。</p>
<div class="form-group"><label>Email</label> <input type="email" placeholder="请输入您的Email" class="form-control"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.7"></script>
<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<!-- jqGrid -->
<script src="js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<!-- Page-Level Scripts -->
<script>
$(document).ready(function () {
$.jgrid.defaults.styleUI = 'Bootstrap';
var mydata = [
{
id: "1",
invdate: "2010-05-24",
name: "test",
note: "note",
tax: "10.00",
total: "2111.00"
},
{
id: "2",
invdate: "2010-05-25",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"
},
{
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"
},
{
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"
},
{
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"
},
{
id: "6",
invdate: "2007-09-06",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"
},
{
id: "7",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"
},
{
id: "8",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "21.00",
total: "320.00"
},
{
id: "9",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "11",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "12",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "13",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "14",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "15",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "16",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "17",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "18",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "19",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "21",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "22",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "23",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "24",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "25",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "26",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
},
{
id: "27",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
},
{
id: "28",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
},
{
id: "29",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}
];
$("#table_list_1").jqGrid({
data: mydata,
datatype: "local",
height: "100%",
autowidth: true,
shrinkToFit: true,
rowNum: 14,
rowList: [10, 20, 30],
colNames: ['序号', '日期', '客户', '金额', '运费', '总额', '备注'],
colModel: [
{
name: 'id',
index: 'id',
align:'center',
width: 60,
sorttype: "int"
},
{
name: 'invdate',
index: 'invdate',
align:'center',
width: 90,
sorttype: "date",
formatter: "date"
},
{
name: 'name',
index: 'name',
align:'center',
width: 100
},
{
name: 'amount',
index: 'amount',
align:'center',
width: 80,
sorttype: "float",
formatter: "number"
},
{
name: 'tax',
index: 'tax',
width: 80,
align:'center',
sorttype: "float"
},
{
name: 'total',
index: 'total',
width: 80,
align:'center',
sorttype: "float"
},
{
name: '操作',
align: "right",
width: 80, formatter: function (value, grid, rows) {
var id = rows.id;
var button1 = "agree('" + id + "')";
var button2 = "disagree('" + id + "')";
return `<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开示例窗口
</button>`;
}
}
],
pager: "#pager_list_1",
viewrecords: true,
caption: "",
hidegrid: false
});
// Add responsive to jqGrid
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_1').setGridWidth(width);
});
});
</script>
</body>
</html>