socialforge/app/views/contests/_boards.html.erb

<% board = @contest.boards.where("parent_id is NULL").first %>
<div class="pro_new_setting_conbox" style="width:100%; border:none;">
  <div class="sy_new_tchbox clear undis" style="margin-left:10px; margin-right:10px;" id="add_sub_board">
    <%= form_tag url_for(:controller => 'boards', :action => 'create', :contest_id => @contest.id, :board_id => board.id), :id=> 'add_board_form_subboard',:remote => true do %>
        <ul class="pro_newsetting_con mb15">
          <li>
            <label class="fl">新增子栏目名称&nbsp;&nbsp;:&nbsp;</label>
            <input id="subfield_name" name="name" placeholder="请输入子栏目名称" maxlength="30" class="fl h28" style="width: 420px" type="text">
            <a href="javascript:void(0);" class="fr sy_btn_grey" onclick="$('#add_sub_board').toggle();">取消</a>
            <a href="javascript:void(0);" class="fr sy_btn_blue mr5" id="subMenuSubmit">保存</a>
          </li>
          <div class="cl"></div>
          <span id="new_notice" class="undis fl c_red">名称不能为空</span>
        </ul>

    <% end %>
  </div>
  <div class="clear ml10 mr10">
    <table class="sy_new_table clearfix mb15" cellpadding="0" cellspacing="0">
      <thead>
      <tr>
        <th>名称</th>
        <th style="width:280px;">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="game-text-left"><span class="ml20"></span>竞赛讨论区</td>
        <td class="game-text-right"><a href="javascript:void(0);" class="sy_btn_green mr5" onclick="$('#add_sub_board').toggle();">添加子栏目</a></td>
      </tr>
      <% count = board.children.count %>
      <% board.children.reorder("position asc").each_with_index do |board, i|%>
          <tr>
            <td class="game-text-left">
              <div id="board_sub_show_<%= board.id %>" class="ml40 w350 hidden" title="<%=board.name %>"><%=board.name %></div>
              <div id="board_sub_edit_<%= board.id %>" style="display:none;" class="ml40">
                <input type="text" name="name" class="h28 w300" id="board_sub_name_<%=board.id %>" maxlength="30"
                       onblur="update_sub_board_name('#board_sub_show_<%= board.id %>','#board_sub_edit_<%= board.id %>','<%= board.id %>','<%= @contest.id %>',$(this).val());" value="<%= board.name %>"/>
              </div>
            </td>
            <td class="game-text-right">
              <% unless i == 0 %>
                  <%= link_to('上移', {:controller => 'boards', :action => 'update_position', :id => board.id, :contest_id => @contest.id, :opr => 'up'},:remote => true, :method => 'post', :class => "sy_btn_blue mr5", :title => '上移') %>
              <% end %>
              <% if i < count - 1 %>
                  <%= link_to('下移', {:controller => 'boards', :action => 'update_position', :id => board.id, :contest_id => @contest.id, :opr => 'down'},:remote => true, :method => 'post', :class => "sy_btn_blue mr5", :title => '下移') %>
              <% end %>
              <a href="javascript:void(0);" class="sy_btn_blue mr5" onclick="edit('#board_sub_show_<%= board.id %>','#board_sub_edit_<%= board.id %>');">编辑</a>
              <a href="javascript:void(0);" class="sy_btn_blue mr5" onclick="delete_confirm_box_2('<%=contest_board_path(board, :contest_id => @contest.id) %>', '确定要删除<%=board.name %>吗？')">删除</a>
            </td>
          </tr>
      <% end %>
      </tbody>
    </table>
  </div>
</div>

<script>
    $(function(){
        $("#subMenuSubmit").one('click', function(){
            sub_board_submit();
        });
    });
    function sub_board_submit(){
        if ($("#subfield_name").val().trim() != ""){
            $("#new_notice").hide();
            $("#add_board_form_subboard").submit();
        } else {
            $("#new_notice").show();
            $("#subMenuSubmit").one('click', function(){
                sub_board_submit();
            });
        }
    }

    function update_sub_board_name(show_id, edit_id, field_id, domain_id, input_value) {
        if (input_value.trim() != "" && $(show_id).html().trim() != input_value.trim()) {
            var htmlvalue = '<div id="muban_popup_box" style="width:300px;"><div class="muban_popup_top"><h3 class="fl">提示</h3><a href="javascript:void(0);" class="muban_icons_close fr"></a></div>'+
                    '<div class="clear mt15"><p class="text_c f16 fontGrey7">确定修改为' + input_value + '？</p><div class="cl"></div><a href="javascript:void(0)" class="fr sy_btn_blue mt10"' +
                    ' style="margin-right: 92px;" onclick="update_confirm(1,' + field_id + ',' + domain_id + ');">确定</a>'+
                    '<a href="javascript:void(0);" class="fr sy_btn_grey mt10 mr10" onclick="update_confirm(2,' + field_id + ',' + domain_id + ');">取消</a></div></div>';
            pop_box_new(htmlvalue, 300, 140);
        }
        $(show_id).show();
        $(edit_id).hide();
    }

    function update_confirm(type, field_id, domain_id){
        if(type == 1){
            $.ajax({
                url: "/boards/" + field_id + "/update_name?contest_id="  + domain_id + "&name=" + $("#board_sub_name_"+field_id).val(),
                type: 'put'
            });
        } else {
            hideModal();
            $("#board_sub_edit_"+field_id).children("input").val($("#board_sub_show_"+field_id).html().trim());
        }
    }

    function edit(show_id, edit_id) {
        $(show_id).toggle();
        $(edit_id).toggle();
        $(edit_id).find('input').focus();
        $(edit_id).find('input').on('keypress', function (e) {
            if (e.keyCode == 13) {
                this.blur();
            }
        })
    }
</script>