今天的工作是做了前几天说的label问题:
为以后知识图谱系统做铺垫,首先在修改Knowledge表结构:
class AddLabelToKnowledge < ActiveRecord::Migration[5.0]
def change
add_column :knowledges, :label, :string # 为以后扩展留下余地 标签
end
end
在view中,写输入框和添加按钮:
<div class="row-fluid">
<div class="span8 offset2" style="margin-top:10px">
<span class="span3">标签(最多添加5个):</span>
<div id="label_div" class="span8">
<%= render :partial => "knowledges/label_show",:locals => {:label_string => @blog.label } %>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8 offset2" id="input_label" style="margin-top:10px">
<%= f.text_field :label,id:"label_for_form" %>
<input id="labelInput" type="text" style="width:100px"/>
<button id="label_sub_button" type="button" onClick="label_show_click()">添加</button>
<%if @blog.label.nil?||@blog.label.empty?%>
<p style="display:none" id="label_count" value="0"></p>
<p style="display:none" id="label_string" value=""></p>
<%else%>
<p style="display:none" id="label_count"><%=@blog.label.split(";").size()%></p>
<p style="display:none" id="label_string" value="<%=@blog.label%>"></p>
<%end%>
</div>
</div>
其中label_show局部渲染如下:
<%if !label_string.nil?%>
<%label_list = label_string.split(";")%>
<div>
<%for label in label_list%>
<div style="display:inline">
<span class="label label-info"><%=label%></span>
<!--<button class="btn btn-small btn-danger del_btn" onClick="del_label()" style="margin-right:15px;height:20px;width:15px;padding:0px" type="button"></button>-->
</div>
<%end%>
</div>
<%end%>
下面写按钮的响应:
function label_show_click(){
var label = $("#labelInput").val();
if(label != ""){
var count = Number($("#label_count").val())+1;
var label_string = $("#label_string").html();
$("#label_count").val(count);
if(count == 1){
label_string = label;
}
else if(count == 5){
label_string = label_string+";"+label;
$("#input_label").css("display","none");
}
else{
label_string = label_string+";"+label;
}
$("#label_string").html(label_string);
$("#label_for_form").val(label_string);
}
$.ajax({
url:"../knowledges/render_label",
type: 'POST',
data: {label_string: label_string}
});
}
拿到各个相关值,将计算值加一、然后将关键词连成一个string对象,中间利用;隔开,以便分析使用时提取,然后将修改好的值设回对象,利用ajax发送请求局部渲染页面。
效果如下: