1.主界面：
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/bootstrap/header.jsp"%>
<title></title>
</head>
<body class="no-skin">
<%@ include file="/bootstrap/navbar.jsp"%>
<div class="main-container" id="main-container">
<script type="text/javascript">
try {
ace.settings.check('main-container', 'fixed')
} catch (e) {
}
function cc(data){
alert(data);
}
</script>
<%@ include file="/bootstrap/siderbar.jsp"%>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try {
ace.settings.check('breadcrumbs', 'fixed')
} catch (e) {
}
</script>
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
</li>
<li class="active">用户信息管理</li>
</ul>
<!-- /.breadcrumb -->
<!-- <div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon"> <input type="text"
placeholder="Search ..." class="nav-search-input"
id="nav-search-input" autocomplete="off" /> <i
class="ace-icon fa fa-search nav-search-icon"></i>
</span>
</form>
</div> -->
</div>
<div class="page-content">
<%@ include file="/bootstrap/setting.jsp"%>
<div class="page-header"></div>
<div class="row">
<table id="grid-table"></table>
<div id="grid-pager"></div>
<script type="text/javascript">
var $path_base = ".";//编辑时url传递参数
</script>
</div>
</div>
</div>
</div>
<!-- /.main-content -->
<%@ include file="/bootstrap/footer.jsp"%>
</div>
<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
//当前页填充页面
$(window).on(
'resize.jqGrid',
function() {
$(grid_selector).jqGrid('setGridWidth',
$(".page-content").width());
})
//调整左侧折叠
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on(
'settings.ace.jqGrid',
function(ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed'
|| event_name === 'main_container_fixed') {
//是为了给开发人员设计页面的改变与视图刷新
setTimeout(function() {
$(grid_selector).jqGrid('setGridWidth',
parent_column.width());
}, 0);
}
})
//如果jqgrid在另一个页面 要用他的父类的宽度
/**
$(window).on('resize.jqGrid', function () {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
})
//and also set width when tab pane becomes visible
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if($(e.target).attr('href') == '#mygrid') {
var parent_width = $(grid_selector).closest('.tab-pane').width();
$(grid_selector).jqGrid( 'setGridWidth', parent_width );
}
})
*/
jQuery(grid_selector).jqGrid({
url :'${path}/sys/listFirmInfosAjaxPC',
datatype : "json",
autowidth:true,
height : 300,
colNames : [
' 姓名',
' 性别',
' 失效时间'
],
colModel : [
{
name : 'fcname',
index : 'fcname',
editable: true, //是否可编辑
formoptions:{ //编辑时，分布。
rowpos:2,
colpos:1
}
},
{
name : 'fsex',
index : 'fsex',
editable: true,
width : 100,
edittype : "select", //编辑类型
editoptions : {value :"0:男;1:女"}, //选项
formatter :function(cellvalue){
switch(cellvalue){
case 0 :return "男";
case 1 :return "女";
}
},
formoptions:{
rowpos:2,
colpos:2
}
},
{
name : 'fexpiredate',
index : 'fexpiredate',
editable: true,
formatter: 'date', //日期初始化
formatoptions:{srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d'}, //日期格式配置
formoptions:{
rowpos:7,
colpos:1
}
},
{
name : 'fid',
index : 'fid',
formatter :function(cellvalue){
return '<a href="${path }/pages/sys/bnkdataManage.jsp?fid='+cellvalue+'">健康数据</a>';
}
},
],
viewrecords : true,
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : pager_selector,
altRows : true,
//toppager: true,
multiselect : true,
//multikey: "ctrlKey",
multiboxonly : true,
loadComplete : function() {
var table = this;
setTimeout(function() {
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl : "/dummy.html",//nothing is saved
caption : "信息列表"
//,autowidth: true,
/**
,
grouping:true,
groupingView : {
groupField : ['name'],
groupDataSorted : true,
plusicon : 'fa fa-chevron-down bigger-110',
minusicon : 'fa fa-chevron-up bigger-110'
},
caption: "Grouping"
*/
});
$(window).triggerHandler('resize.jqGrid');//根据触发窗调整grid大小
//当编辑一行的时候，替换元素
function aceSwitch(cellvalue, options, cell) {
setTimeout(function() {
$(cell).find('input[type=checkbox]').addClass(
'ace ace-switch ace-switch-5').after(
'<span class="lbl"></span>');
}, 0);
}
//使用 picDate
function pickDate(cellvalue, options, cell) {
setTimeout(function() {
$(cell).find('input[type=text]').datepicker({
format : 'yyyy-mm-dd',
autoclose : false
});
}, 0);
}
function customFmatter(cellvalue, options, rowObject){
}
//按钮工具
jQuery(grid_selector).jqGrid(
'navGrid',
pager_selector,
{ //工具选项
edit : true,
editicon : 'ace-icon fa fa-pencil blue',
add : true,
addicon : 'ace-icon fa fa-plus-circle purple',
del : true,
delicon : 'ace-icon fa fa-trash-o red',
search : true,
searchicon : 'ace-icon fa fa-search orange',
refresh : true,
refreshicon : 'ace-icon fa fa-refresh green',
view : true,
viewicon : 'ace-icon fa fa-search-plus grey',
},
{
//编辑表单调整
closeAfterEdit: true,
width: 700,
recreateForm : true,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find(
'.ui-jqdialog-titlebar').wrapInner(
'<div class="widget-header" />')
style_edit_form(form);
},
url:'${path}/sys/updateFirmInfosPC'
},
{
//width: 700,
width: 600,
closeAfterAdd : true,
recreateForm : true,
viewPagerButtons : false,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find(
'.ui-jqdialog-titlebar').wrapInner(
'<div class="widget-header" />')
style_edit_form(form);
},
url:'${path}/sys/addFirmInfosPC'
},
{
recreateForm : true,
beforeShowForm : function(e) {
var form = $(e[0]);
if (form.data('styled'))
return false;
form.closest('.ui-jqdialog').find(
'.ui-jqdialog-titlebar').wrapInner(
'<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
},
onClick : function(e) {
//alert(1);
},
url:'${path}/sys/deleteFirmInfosPC',
//删除时传递参数 找了好几个小时才找到 value 是获取行与获取id
delData: {
delId: function () {
var value=jQuery(grid_selector).jqGrid('getRowData',jQuery(grid_selector).jqGrid('getGridParam','selarrrow')[0]).fid;
return value;
}
}
},
{
recreateForm : true,
afterShowSearch : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find(
'.ui-jqdialog-title').wrap(
'<div class="widget-header" />')
style_search_form(form);
},
afterRedraw : function() {
style_search_filters($(this));
},
multipleSearch : true,
url:'${path}/sys/listFirmInfosAjaxPC'
/**
multipleGroup:true, //是否支持多条件查询
showQuery: true //是否展示查询条件
*/
},
{
//可见表单
recreateForm : true,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find(
'.ui-jqdialog-title').wrap(
'<div class="widget-header" />')
}
})
function style_edit_form(form) {
//编辑时，初始化表单，日期选择类型。
form.find('input[name=fexpiredate]').datepicker({
format : 'yyyy-mm-dd',
autoclose : true
})
form.find('input[name=stock]').addClass(
'ace ace-switch ace-switch-5').after(
'<span class="lbl"></span>');
//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
//更新按钮
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend(
'<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').hide();
buttons.eq(0).append(
'<i class="ace-icon fa fa-chevron-left"></i>');
buttons.eq(1).append(
'<i class="ace-icon fa fa-chevron-right"></i>');
}
function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm btn-white btn-round').find(
'[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend(
'<i class="ace-icon fa fa-trash-o"></i>');
buttons.eq(1).addClass('btn-default').prepend(
'<i class="ace-icon fa fa-times"></i>')
}
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass(
'btn btn-sm btn-info').find('.ui-icon').attr('class',
'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass(
'btn btn-sm btn-inverse').find('.ui-icon').attr(
'class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass(
'btn btn-sm btn-purple').find('.ui-icon').attr('class',
'ace-icon fa fa-search');
}
function beforeDeleteCallback(e) {
var form = $(e[0]);
if (form.data('styled'))
return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
}
function beforeEditCallback(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
//it causes some flicker when reloading or navigating grid
//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
//or go back to default browser checkbox styles for the grid
function styleCheckbox(table) {
/**
$(table).find('input:checkbox').addClass('ace')
.wrap('<label />')
.after('<span class="lbl align-top" />')
$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
.find('input.cbox[type=checkbox]').addClass('ace')
.wrap('<label />').after('<span class="lbl align-top" />');
*/
}
//unlike navButtons icons, action icons in rows seem to be hard-coded
//you can change them like this in here if you want
function updateActionIcons(table) {
/**
var replacement =
{
'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
'ui-icon-disk' : 'ace-icon fa fa-check green',
'ui-icon-cancel' : 'ace-icon fa fa-times red'
};
$(table).find('.ui-pg-div span.ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
*/
}
//replace icons with FontAwesome icons like above
function updatePagerIcons(table) {
var replacement = {
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$(
'.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon')
.each(
function() {
var icon = $(this);
var $class = $.trim(icon.attr('class')
.replace('ui-icon', ''));
if ($class in replacement)
icon.attr('class', 'ui-icon '
+ replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({
container : 'body'
});
$(table).find('.ui-pg-div').tooltip({
container : 'body'
});
}
//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
$(document).one('ajaxloadstart.page', function(e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
});
</script>
</body>
</html>
<img src="https://img-blog.youkuaiyun.com/20160831103123080?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
