编辑状态：
表格行内下拉：
日期控件：
弹框下拉表单：
上传导入文件：
模态框，处理状态提示：
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${basePath}js/jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${basePath}js/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"
src="${basePath}js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="${basePath}js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="${basePath}js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script>
var rules = [ {
ruleCode : '1',
name : '单循环'
}, {
ruleCode : '2',
name : '双循环'
}, {
ruleCode : '3',
name : '单败'
}, {
ruleCode : '4',
name : '双败'
} ];
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
Date.prototype.format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3)/3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
//为了使编辑状态的时间插件内容不为空白，自己扩展了该插件
$.extend($.fn.datagrid.defaults.editors,{
datebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
input.datebox(options);
/* input.datebox({
formatter: function (date) {
return new Date(date).format("yyyy-MM-dd");
}
}); */
return input;
},
destroy: function(target) {
$(target).datebox('destroy');
},
getValue: function(target) {
return $(target).datebox('getValue');//获得旧值
},
setValue: function(target, value) {
// console.info(value);
$(target).datebox('setValue', new Date(value).format("yyyy-MM-dd"));//设置新值的日期格式
},
resize: function(target, width) {
$(target).datebox('resize', width);
}
}
});
$(function() {
$('#tt')
.datagrid(
{
title : '阶段列表',
iconCls : 'icon-edit',
width : 1500,
height : 500,
singleSelect : true,
idField : 'id',
url : '${basePath}stage/stageList',
queryParams:{
bl_match_id:${billboardMatch.id}
},
columns : [ [
{
field : 'gid',
title : 'pool比赛ID',
width : 240,
//hidden : true,
//editor : 'text',
formatter : function(value, row, index) {
return '${billboardMatch.matchPoolId}';
}
},
{
field : 'id',
title : '阶段ID',
width : 240,
},
{
field : 'name',
title : '阶段名称',
width : 180,
editor : {
type :'text',
options :{
required : true
}
}
},
{
field : 'rid',
title : '赛制',
width : 70,
editor : {
type : 'combobox',
options : {
valueField : 'ruleCode',
textField : 'name',
data : rules,
required : true,
panelHeight:'auto'//下拉列表高度-自动
}
},
formatter : function(value) {
for (var i = 0; i < rules.length; i++) {
if (rules[i].ruleCode == value)
return rules[i].name;
}
return value;
}
},
{
field : 'groupnum',
title : '小组数',
width : 45,
align : 'right',
editor : {
type : 'numberbox',
options : {
required : true,
//precision : 1
}
}
},
{
field : 'peoplenum',
title : '参赛人数',
width : 60,
align : 'right',
editor : {
type : 'numberbox',
options : {
required : true,
//precision : 1
}
}
},
{
field : 'outtlet',
title : '每组出线',
width : 60,
align : 'right',
editor : {
type : 'numberbox',
options : {
required : true,
//precision : 1
}
}
},
{
field : 'freamsum',
title : '盘数 ',
width : 50,
align : 'center',
editor : {
type : 'numberbox',
options : {
required : true,
//precision : 1
}
}
},
{
field : 'startdate',
title : '开始日期',
width : 100,
editor : {
type : 'datebox',
options : {
required : true,
//precision : 1
}
},
formatter : function(value, row, index) {
return new Date(value).format("yyyy-MM-dd");
}
},
{
field : 'enddate',
title : '结束日期',
width : 100,
editor : {
type : 'datebox',
options : {
required : true,
//precision : 1
}
},
formatter : function(value, row, index) {
return new Date(value).format("yyyy-MM-dd");
}
},
/* {
field : 'status',
title : 'Status',
width : 50,
align : 'center',
editor : {
type : 'checkbox',
options : {
on : 'P',
off : ''
}
}
}, */
{
field : 'action',
title : '操作',
width : 80,
align : 'center',
formatter : function(value, row, index) {
if (row.editing) {
var s = '<a href="#" onclick="saverow(this)">保存</a> ';
var c = '<a href="#" onclick="cancelrow(this)">取消</a>';
return s + c;
} else {
var e = '<a href="#" onclick="editrow(this)">编辑</a> ';
var d = '<a href="#" onclick="deleterow(this)">删除</a>';
return e + d;
//return d; //阶段不可编辑
}
}
},
{
field : 'aginst',
title : '对阵',
width : 300,
align : 'center',
formatter : function(value, row, index) {
if (row.editing) {
return "";
} else {
var p = '<a href="#" onclick="openImptPlayer(this)">导入选手</a> ';
var e = '<a href="#" onclick="aginstMap(this)">对阵图</a> ';
var l = '<a href="#" onclick="aginstList(this)">对阵列表</a> ';
var d = '<button style="background-color:red;color:white;" onclick="synchroAginstInfo(this)">同步对阵</button> ';
return p + e + l + d;
}
}
},
] ],
onBeforeEdit : function(index, row) {
//当用户开始编辑一行时触发
row.editing = true;
updateActions(index);
},
onAfterEdit : function(index, rowData) {
//当用户完成编辑一行时触发
rowData.gid='${billboardMatch.matchPoolId}';
rowData.matchId='${billboardMatch.id}';//比赛id
console.info(rowData);
MaskUtil.mask('正在保存，请稍后...');
$.ajax({
url: '${basePath}stage/save',
data: rowData,
type: 'POST',
complete: function (xhr) {
// alert(xhr);
//alert(xhr.responseText);
var jsonObj=xhr.responseJSON;
if(jsonObj['code']!=0){
$('#tt').datagrid('beginEdit',index);
}else{
$('#tt').datagrid('reload');
}
MaskUtil.unmask();
$.messager.alert('警告',jsonObj['msg']);
}
});
rowData.editing = false;
updateActions(index);
},
onCancelEdit : function(index, row) {
//取消编辑时触发
row.editing = false;
updateActions(index);
}
});
});
//刷新行
function updateActions(index) {
$('#tt').datagrid('updateRow', {
index : index,
row : {}
});
}
//获取目标行索引
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
//进入编辑状态
function editrow(target) {
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
//删除
function deleterow(target) {
var index=getRowIndex(target);
var rows = $('#tt').datagrid('getRows');
var row = rows[index];
$.messager.confirm('删除', '您确定删除吗?', function(r) {
if (r) {
//$('#tt').datagrid('deleteRow', getRowIndex(target));
$.getJSON("${basePath}stage/delete",{stageId:row.id},function(result){
//此处返回的data已经是json对象
$('#tt').datagrid('reload');
$.messager.alert('警告',result.msg);
});
}
});
}
//取消编辑
function cancelrow(target) {
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
//保存
function saverow(target) {
$('#tt').datagrid('endEdit', getRowIndex(target));
}
//添加
function insert() {
if(${billboardMatch.matchClubId==null}){
$.messager.alert('警告',"还未绑定场馆，不能添加阶段");
return;
}
/* var row = $('#tt').datagrid('getSelected');
if (row) {
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
} */
var index=0;
$('#tt').datagrid('insertRow', {
index : index,
row : {
rid : '1'
}
});
$('#tt').datagrid('selectRow', index);
$('#tt').datagrid('beginEdit', index);
}
//对阵图
var aginstMap=function(target){
var index=getRowIndex(target);
var rows = $('#tt').datagrid('getRows');
var row = rows[index];
//alert("对阵图：stage.id="+row.id);
window.location.replace('${pool_url}/pool/stage/stage_againstmap.action?stage.id='+row.id);
}
//对阵列表
var aginstList=function(target){
var index=getRowIndex(target);
var rows = $('#tt').datagrid('getRows');
var row = rows[index];
//alert("对症列表：stage.id="+row.id);
window.location.replace('${pool_url}/pool/against/against_search.action?stageid='+row.id);
}
//打开绑定对话框
var openSdmDialog=function(){
$('#dialog_stadium').window('open');
}
//提交场馆绑定
var submit_stadium=function(){
if(${billboardMatch.matchClubId==null}){
//$('#f_stadium').submit();
$('#f_stadium').form('submit', {
url:'${basePath}stadium/binding',
type:'post',
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(result){
var data = $.parseJSON(result);
$('#dialog_stadium').window('close');
$.messager.alert('警告',data.msg);
}
});
}else{
$.messager.alert('警告',"已经绑定过了，不能重复绑定");
$('#dialog_stadium').window('close');
}
}
//打开导入人员
var imptPlayer_row=null;
var openImptPlayer = function(target){
var index=getRowIndex(target);
var rows = $('#tt').datagrid('getRows');
imptPlayer_row = rows[index];
$('#dialog_importPlayer').window('open');
}
//提交录入文件
var submit_importPlayer=function(){
//$.messager.alert("警告","stage.id="+imptPlayer_row.id);
$('#stageId').val(imptPlayer_row.id);
MaskUtil.mask('上传中，请稍后...');
$('#f_importPlayer').form('submit', {
url:'${basePath}player/imports',
type:'post',
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(result){
var data = $.parseJSON(result);
$('#dialog_importPlayer').window('close');
MaskUtil.unmask();
$.messager.alert('警告',data.msg);
}
});
}
var synchroAginstInfo=function(target){
var index=getRowIndex(target);
var rows = $('#tt').datagrid('getRows');
var currRow = rows[index];
//$.messager.alert("",currRow.id+" "+${billboardMatch.matchInfoId});
MaskUtil.mask('同步中，请稍后...');
$.ajax({
url: '${basePath}stage/synchroAginstInfo',
data: {
stageId:currRow.id
},
type: 'POST',
complete: function (xhr) {
// alert(xhr);
//alert(xhr.responseText);
MaskUtil.unmask();
var jsonObj=xhr.responseJSON;
/* if(jsonObj['code']!=0){
$('#tt').datagrid('beginEdit',index);
} */
$.messager.alert('警告',jsonObj['msg']);
}
});
}
//加载模态框
/*使用方法：
开启:MaskUtil.mask();
关闭:MaskUtil.unmask();
MaskUtil.mask('其它提示文字...'); **/
var MaskUtil = (function(){
var $mask,$maskMsg;
var defMsg = '正在处理，请稍待。。。';
function init(){
if(!$mask){
$mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");
}
if(!$maskMsg){
$maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")
.appendTo("body").css({'font-size':'12px'});
}
$mask.css({width:"100%",height:$(document).height()});
var scrollTop = $(document.body).scrollTop();
$maskMsg.css({
left:( $(document.body).outerWidth(true) - 190 ) / 2
,top:( ($(window).height() - 45) / 2 ) + scrollTop
});
}
return {
mask:function(msg){
init();
$mask.show();
$maskMsg.html(msg||defMsg).show();
}
,unmask:function(){
$mask.hide();
$maskMsg.hide();
}
}
}());
</script>
</head>
<body>
<!-- 表格 -->
<div style="margin: 20px 50px">
<h2>阶段管理</h2>
<div style="margin: 10px 0">
<a href="#" class="easyui-linkbutton" onclick="openSdmDialog()">绑定场馆</a>
<a href="#" class="easyui-linkbutton" onclick="insert()">添加阶段</a>
<table id="tt"></table>
</div>
<!-- 弹出框：场馆绑定 -->
<div id="dialog_stadium" class="easyui-dialog" title="绑定场馆"
style="width: 240px; height: 150px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true">
<form id="f_stadium" method="post">
<div style="margin: 20px 20px">
<input id="select_stadium" class="easyui-combobox"
name="stadium_id"
data-options="valueField:'id',textField:'name',url:'../stadium/allStadiumfs',value:'${billboardMatch.matchClubId}'" />
<input name="bl_match_id" type="hidden"
value="${billboardMatch.id}"> <a href="#"
class="easyui-linkbutton" onclick="submit_stadium()"
style="margin: 10px 50px">绑定场馆</a>
</div>
</form>
</div>
<!-- 弹出框：录入选手 -->
<div id="dialog_importPlayer" class="easyui-dialog" title="导入选手"
style="width: 300px; height: 150px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true">
<form id="f_importPlayer" method="post" enctype="multipart/form-data">
<div style="margin: 20px 15px">
<input name="file" class="easyui-filebox" style="width: 250px"
data-options="buttonText: '选择文件'"> <input id="stageId"
name="stageId" type="hidden"> <a href="#"
class="easyui-linkbutton" onclick="submit_importPlayer()"
style="margin: 10px 80px">提交录入</a>
</div>
</form>
</div>
</body>
</html>
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
