<%----%> <%--Ace--%> <%--Application--%>
<%--© Company Name
--%>Retrieve Password
Enter your email and to receive instructions
New User Registration
Enter your details to begin:
国外货,最近公司为了统一后台页面选中此框架,,学习中,先来看看这款Ui的截图登陆页面:
显示数据页面
添加数据页面
修改数据页面
接着是代码,
首先是登陆页面。。
<%@ page contentType="text/html;charset=UTF-8" %> <%@ page pageEncoding="UTF-8" %>登陆页面 <%----%> <%--Ace--%> <%--Application--%>
<%--© Company Name
--%>
var scripts = [null, "../assets/js/date-time/bootstrap-datepicker.min.js", "../assets/js/jqGrid/jquery.jqGrid.min.js", "../assets/js/jqGrid/i18n/grid.locale-cn.js", null]
ace.load_ajax_scripts(scripts, function () {
$('#login').click(function () {
var name = $('#name').val();
var password = $('#password').val();
if (name == "admin" && password == "admin") {
$('#loginForm').submit();
} else {
alert("用户名或密码错误");
return false;
}
});
});
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%--<% String path = request.getContextPath();--%>
<%--String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>--%>
<%-- --%>
云端K歌后台管理系统
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
APP版本管理
<%--添加新版本弹出框--%>
<%--添加成功提示窗--%>
<%--修改APP版本弹出框--%>
<%--修改成功提示窗--%>
<%--删除背景图片--%>
<%--删除成功提示窗--%>
数据展示页面js(添加,修改,删除都在此js中)
var scripts = [null, "../assets/js/date-time/bootstrap-datepicker.min.js", "../assets/js/jqGrid/jquery.jqGrid.min.js", "../assets/js/jqGrid/i18n/grid.locale-cn.js", null]
ace.load_ajax_scripts(scripts, function () {
//修改频道信息
function modify(ids,names,languages,bgimgexts,bgimgwidths,bgimgheights,selectedimgexts,selectedimgwidths,selectedimgheights) {
$('#ids').val(ids);
$('#names').val(names);
$('#languages').val(languages);
$('#bgimgexts').val(bgimgexts);
$('#bgimgwidths').val(bgimgwidths);
$('#bgimgheights').val(bgimgheights);
$('#selectedimgexts').val(selectedimgexts);
$('#selectedimgwidths').val(selectedimgwidths);
$('#selectedimgheights').val(selectedimgheights);
$('#modifyBgImgModal').modal('show');
}
function del(name,del_id) {
$('#delBgImgName').html(name);
$('#del_id').val(del_id);
$('#delBgImgModal').modal('show');
}
// 添加APP版本启用控制
function Kind(the){
var obj = the;
var container=document.getElementById("bgimgwidth");
var container1=document.getElementById("bgimgext");
var container2=document.getElementById("bgimgheight");
var a = document.getElementById("enablebgimg");
if(a.checked){
container.removeAttribute("disabled");
container2.removeAttribute("disabled");
container1.removeAttribute("disabled");
}else{
container2.setAttribute("disabled","disabled");
container.setAttribute("disabled","disabled");
container1.setAttribute("disabled","disabled");
}
}
function Kinds(the){
var obj = the;
var container=document.getElementById("selectedimgwidth");
var container1=document.getElementById("selectedimgext");
var container2=document.getElementById("selectedimgheight");
var a = document.getElementById("enableselectedimg");
if(a.checked){
container.removeAttribute("disabled");
container2.removeAttribute("disabled");
container1.removeAttribute("disabled");
}else{
container2.setAttribute("disabled","disabled");
container.setAttribute("disabled","disabled");
container1.setAttribute("disabled","disabled");
}
}
// 修改APP版本启用控制
function upKind(the){
var obj = the;
var container=document.getElementById("bgimgwidths");
var container1=document.getElementById("bgimgexts");
var container2=document.getElementById("bgimgheights");
var a = document.getElementById("enablebgimgs");
if(a.checked){
container.removeAttribute("disabled");
container2.removeAttribute("disabled");
container1.removeAttribute("disabled");
}else{
container2.setAttribute("disabled","disabled");
container.setAttribute("disabled","disabled");
container1.setAttribute("disabled","disabled");
}
}
function upKinds(the){
var obj = the;
var container=document.getElementById("selectedimgwidths");
var container1=document.getElementById("selectedimgexts");
var container2=document.getElementById("selectedimgheights");
var a = document.getElementById("enableselectedimgs");
if(a.checked){
container.removeAttribute("disabled");
container2.removeAttribute("disabled");
container1.removeAttribute("disabled");
}else{
container2.setAttribute("disabled","disabled");
container.setAttribute("disabled","disabled");
container1.setAttribute("disabled","disabled");
}
}
jQuery(function ($) {
var grid_selector = "#bgImgTable";
var pager_selector = "#bgImgPager";
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
})
jQuery(grid_selector).jqGrid({
url: '../ota/versionList',
datatype: "json",
height: 'auto',
width: 'auto',
colNames: ['编号', 'APP版本', '语言类别', '背景图片规格','选中图片规格','时间','操作'],
colModel: [
{name: 'id', index: 'id'},
{name: 'name', index: 'name'},
{name: 'language', index: 'language',formatter: function (cellvalue, options, rowObject) {
if(cellvalue==0){
return "简体中文";
}
if(cellvalue==1){
return "繁体中文";
}
}
},
{name: 'bei', index: 'bei'},
{name: 'xuan', index: 'xuan'},
{name: 'modifytime', index: 'modifytime', formatter: function (cellvalue, options, rowObject) {
var date = new Date(cellvalue);
return date.Format('yyyy-MM-dd hh:mm:ss');
}},
{name: 'myac', index: '', fixed: true, sortable: false, resize: false, formatter: function (cellvalue, options, rowObject) {
var htmlStr =
"
";
return htmlStr;
}}
],
loadError: function (xhr, status, error) {
alert("获取APP管理列表失败,请重新刷新");
},
viewrecords: true,
rowNum: 5,
rowList: [5, 10, 15],
pager: pager_selector,
altRows: true,
multiboxonly: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
}
});
$(window).triggerHandler('resize.jqGrid');
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'});
}
$(document).on('ajaxloadstart', function (e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
//隐藏水平滚动条
$(grid_selector).closest(".ui-jqgrid-bdiv").css({ 'overflow-x': 'hidden' });
});
//添加版本
$(document).ready(function () {
$("#addBgImgBtn").click(function () {
$('#addBgImgForm').ajaxSubmit({
type: 'post',
url: '../ota/insert',
success: function () {
var grid_selector = "#bgImgTable";
jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
$('#addSuccessModal').modal('show');
},
error: function () {
alert('添加频道失败,请重试');
}
})
});
});
//提交修改
$('#modifyBgImgBtn').click(function () {
$('#modifyBgImgForm').ajaxSubmit({
type: 'post',
url: '../ota/update',
success: function () {
var grid_selector = "#bgImgTable";
jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
$('#modifySuccessModal').modal('show');
},
error: function () {
alert('修改APP版本失败,请重试');
}
})
});
//确认删除
$('#delBgImgBtn').click(function () {
var id = $('#del_id').val();
$.ajax({
url: '../ota/delete?id=' + id,
success: function () {
var grid_selector = "#bgImgTable";
jQuery(grid_selector).jqGrid('setGridParam', {url: "../ota/versionList", page: 1}).trigger('reloadGrid');
$('#delSuccessModal').modal('show');
},
error: function () {
alert('删除失败,请重试');
}
});
});
});
function modify(ids,names,languages,bgimgexts,bgimgwidths,bgimgheights,selectedimgexts,selectedimgwidths,selectedimgheights) {
$('#ids').val(ids);
$('#names').val(names);
$('#languages').val(languages);
$('#bgimgexts').val(bgimgexts);
$('#bgimgwidths').val(bgimgwidths);
$('#bgimgheights').val(bgimgheights);
$('#selectedimgexts').val(selectedimgexts);
$('#selectedimgwidths').val(selectedimgwidths);
$('#selectedimgheights').val(selectedimgheights);
$('#modifyBgImgModal').modal('show');
}
张北论坛www.zhangbeibbs.com
邢台论坛www.hbxtbbs.com