Javascript 如何用球队名称填充比赛括号，然后使球队名称不可编辑？_Javascript_Jquery_Json

Javascript 如何用球队名称填充比赛括号，然后使球队名称不可编辑？

javascript jquery json

Javascript 如何用球队名称填充比赛括号，然后使球队名称不可编辑？,javascript,jquery,json,Javascript,Jquery,Json,我正在开发一个锦标赛括号系统，我发现了一个名为“JQuery括号”的库，它可以提供很多帮助。但也存在一些问题：我计划从PostgreSQL数据库中检索团队名称（可能还有匹配分数），并将它们放在括号中。但是，数据必须是JSON格式的，解析器是Javascript格式的。我似乎想不出解决办法原始代码： <html> <head> <title>jQuery Bracket editor</title> <script type="text/j

我正在开发一个锦标赛括号系统，我发现了一个名为“JQuery括号”的库，它可以提供很多帮助。但也存在一些问题：

我计划从PostgreSQL数据库中检索团队名称（可能还有匹配分数），并将它们放在括号中。但是，数据必须是JSON格式的，解析器是Javascript格式的。我似乎想不出解决办法

原始代码：

<html>
<head>
<title>jQuery Bracket editor</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />
<style type="text/css">
.empty {
  background-color: #FCC;
}
.invalid {
  background-color: #FC6;
}
</style>
<script type="text/javascript">
function newFields() {
  return 'Bracket name [a-z0-9_] <input type="text" id="bracketId" class="empty" /><input type="submit" value="Create" disabled />'
}

function newBracket() {
  $('#editor').empty().bracket({
  save: function(data){
      $('pre').text(jQuery.toJSON(data))
    }
  })
  $('#fields').html(newFields())
}

function refreshSelect(pick) {
  var select = $('#bracketSelect').empty()
  $('<option value="">New bracket</option>').appendTo(select)
  $.getJSON('rest.php?op=list', function(data) {

    $.each(data, function(i, e) {
      select.append('<option value="'+e+'">'+e+'</option>')
    })
  }).success(function() {
    if (pick) {
      select.find(':selected').removeAttr('seleceted')
      select.find('option[value="'+pick+'"]').attr('selected','selected')
      select.change()
    }
  })
}

function hash() {
  var bracket = null
  var parts = window.location.href.replace(/#!([a-z0-9_]+)$/gi, function(m, match) {
    bracket = match
  });
 return bracket;
}

$(document).ready(newBracket)
$(document).ready(function() {
    newBracket()
    $('input#bracketId').live('keyup', function() {
      var input = $(this)
      var submit = $('input[value="Create"]')
      if (input.val().length === 0) {
        input.removeClass('invalid')
        input.addClass('empty')
        submit.attr('disabled', 'disabled')
      }
  else if (input.val().match(/[^0-9a-z_]+/)) {
    input.addClass('invalid')
    submit.attr('disabled', 'disabled')
  }
  else {
    input.removeClass('empty invalid')
    submit.removeAttr('disabled')
  }
})

$('input[value="Create"]').live('click', function() {
  $(this).attr('disabled', 'disabled')
  var input = $('input#bracketId')
  var bracketId = input.val()

  if (bracketId.match(/[^0-9a-z_]+/))
    return

  var data = $('#editor').bracket('data')
  var json = jQuery.toJSON(data)
  $.getJSON('rest.php?op=set&id='+bracketId+'&data='+json)
    .success(function() {
      refreshSelect(bracketId)
    })
})

refreshSelect(hash())

$('#bracketSelect').change(function() {
  var value = $(this).val()
  location.hash = '#!'+value
  if (!value) {
    newBracket()
    return
  }
  $('#fields').empty()

  $.getJSON('rest.php?op=get&id='+value, function(data) {
    $('#editor').empty().bracket({
        init: data,
        save: function(data){
            var json = jQuery.toJSON(data)
            $('pre').text(jQuery.toJSON(data))
            $.getJSON('rest.php?op=set&id='+value+'&data='+json)
          }
      })
      }).error(function() { })
    })
  })
</script>
</head>
<body>
Pick bracket: <select id="bracketSelect"></select>
<div id="main">
<h1>jQuery Bracket editor</h1>
<div id="editor"></div>
<div style="clear: both;" id="fields"></div>
<pre></pre>
</div>
</body>
</html>


jQuery括号编辑器
.空的{
背景色：#FCC；
}
.无效{
背景色：#FC6；
}
函数newFields（）{
返回“括号名称[a-z0-9_389;]”
}
函数newblacket（）{
$（“#编辑器”）.empty（）.括号({
保存：功能（数据）{
$（'pre'）.text（jQuery.toJSON（数据））
}
})
$（'#fields'）.html（newFields（））
}
函数刷新选择（拾取）{
var select=$（'#bracketSelect'）.empty（）
$（“新括号”）.appendTo（选择）
$.getJSON（'rest.php？op=list'，函数（数据）{
$。每个（数据、功能（即）{
选择。追加（“”+e+“”）
})
}).success（函数（）{
如果（选择）{
select.find（“：selected”）.removeAttr（'selected'）
select.find（'option[value=“”+pick+'“]）.attr（'selected'，'selected'）
select.change（）
}
})
}
函数hash（）{
var方括号=null
var parts=window.location.href.replace（/#！（[a-z0-9#）+$/gi，函数（m，匹配）{
括号=匹配
});
返回支架；
}
$（文件）.准备就绪（新球拍）
$（文档）.ready（函数（）{
新球拍（）
$（'input#bracketId'）.live（'keyup'，function（））{
变量输入=$（此）
var submit=$（'input[value=“Create”]”）
if（input.val（）.length==0）{
input.removeClass（'无效'）
input.addClass（'empty'）
submit.attr（'disabled'、'disabled'）
}
else if（input.val（）.match（/[^0-9a-z)]+/）{
input.addClass（'无效'）
submit.attr（'disabled'、'disabled'）
}
否则{
input.removeClass（'empty invalid'）
submit.removeAttr（'已禁用'）
}
})
$（'input[value=“Create”]”）。live（'click'，function（）{
$（this.attr（'disabled'，'disabled'））
变量输入=$（'input#bracketId'）
var bracketId=input.val（）
如果（括号ID.match（/[^0-9a-z_551;]+/）
回来
变量数据=$（“#编辑器”）。括号（'data'））
var json=jQuery.toJSON（数据）
$.getJSON（'rest.php？op=set&id='+bracketId+'&data='+json）
.success（函数（）{
刷新选择（括号ID）
})
})
刷新选择（哈希（））
$（'#方括号选择'）。更改（函数（）{
var值=$（this.val（）
location.hash='#！'+值
如果（！值）{
新球拍（）
回来
}
$（“#字段”）.empty（）
$.getJSON（'rest.php？op=get&id='+值，函数（数据）{
$（“#编辑器”）.empty（）.括号({
init：数据，
保存：功能（数据）{
var json=jQuery.toJSON（数据）
$（'pre'）.text（jQuery.toJSON（数据））
$.getJSON（'rest.php？op=set&id='+value+'&data='+json）
}
})
}).error（函数（）{}）
})
})
选择括号：
jQuery括号编辑器

检索数据后，在显示时，您需要将

禁用的

添加到html输入元素中。例如：

这将使您的文本字段不可编辑

如果您希望在人们填写括号时执行此操作，我建议您在每个括号后添加一个

，或者使用

mouseout（）

侦听器启动一个jquery事件，将

disabled

属性添加到输入字段中

<input type="text" id="bracketId" class="empty" disabled>