首页 > 技术文章 > 在jinja2的页面中使用javascript对页面元素进行删除

zifenger 2014-03-04 21:02 原文

  以对用户注册信息的审核为例。

  后端的代码为:

#encoding=utf-8
class RegisterCheck(system.page):
    '''注册信息审核'''
    path = "/RegisterCheck"
    def GET(self):
        web.header('Content-Type', 'text/html; charset=UTF-8')
        sql = """ SELECT * FROM user_info WHERE state=0"""
        user_info = list(db.query(sql))
        return render.getRender().RegisterCheck(
            title='注册信息审核',
            user_info=user_info,
            user_json = json.dumps(user_info))

    def POST(self):
        opt = web.input().get('opt')
        user_id = web.input().get("user_id")
        if opt=='1':
            db.update('user_info', where='user_id=$user_id', vars={'user_id':user_id}, state=1)
        elif opt=='2':
            remark = web.input().get("remark")
            db.update('user_info', where='user_id=$user_id', vars={'user_id':user_id}, state=2, remark=remark)
        return True

  页面代码:

    {% set count = 0 %}
    {% for user in user_info %} 
    <div class="row-fluid" id="row-{{user.user_id}}">
        <div class="">
            <h4><a href="javascript:;">{{user.user_name}}</a></h4>
            <small>
                <p><i>地址</i> {{user.city}} {{user.area}} {{user.street}}</p>
                <p><i>联系方式</i> {{user.phone}} {{user.email}} </p>
            </small> 
        </div>
        <div class="">
            <button id="accept" onclick="accept({{ user.user_id }})">合格</button>
            <button id="reject" onclick="reject({{ user.user_id }})">不合格</button>
            <textarea id="reject_remark" ></textarea>
        </div>
    </div>
    {% set count = count + 1 %} 
    {% endfor %}

<script type="text/javascript">
function accept(user_id)
{
    $.post("/account/userRegisterCheck", {opt:1, user_id: user_id}, function(ret) {
    $("#row-"+user_id).remove();
        alert('注册信息通过审核');
    });
}

function reject(user_id)
{
  remark = document.getElementById("reject_remark").value;
  if( remark.length>5 ){
    $.post("/account/userRegisterCheck", {opt:2, user_id: user_id, remark:remark}, function(ret) { 
    $("#row-"+user_id).remove(); 
    alert('注册信息未通过审核');
    });
  }
  else{
    alert("请填写的不合格原因");
  }
}
</script>

  每个用户信息的显示用一个 div 表示,以 id="row-{{user.user_id}}" 来标示每个div:

 <div class="row-fluid" id="row-{{user.user_id}}">

  操作后将该div从页面显示中删除:

 $("#row-"+user_id).remove();

 

 

 

推荐阅读