文章目录
显示
v分类列表的删除和恢复功能
展现分类
python后端cat列表的读取和排序
@route_food.route( "/cat" )
def cat():
resp_data = {}
req = request.values
query = FoodCat.query
list = query.order_by(FoodCat.weight.desc(), FoodCat.id.desc()).all()
resp_data['list'] = list
resp_data['status_mapping'] = app.config['STATUS_MAPPING']
resp_data['current'] = 'cat'
return ops_render( "food/cat.html" , resp_data)
cat.html动态读取数据
<tbody>
{% if list %}
{% for item in list %}
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.status}}</td>
<td>{{item.weight}}</td>
<td>
<a class="m-l" href="{{ buildUrl('/food/cat-set') }}">
<i class="fa fa-edit fa-lg"></i>
</a>
<a class="m-l remove" href="javascript:void(0);" data="8">
<i class="fa fa-trash fa-lg"></i>
</a>
</td>
</tr>
{% endfor %}
{% else %}
<tr><td colspan="5">暂无数据</td></tr>
{% endif %}
</tbody>
运行可以看到争取的将分类读取出来
分类列表编辑功能实现
cat.html添加状态的判断(参考member
/index.html
)
{% if item.status==1 %}
<a class="m-l" href="{{ buildUrl('/food/cat-set') }}?id={{item.id}}">
<i class="fa fa-edit fa-lg"></i>
</a>
<a class="m-l remove" href="javascript:void(0);" data = "{{item.id}}">
<i class="fa fa-trash fa-lg"></i>
</a>
{%else%}
<a class="m-l recover" href="javascript:void(0);" data = "{{item.id}}">
<i class="fa fa-rotate-left fa-lg"></i>
</a>
{%endif%}
添加虚拟字段使得状态展示成中文
FoodCat.py
添加虚拟字段
@property
def status_desc(self):
return app.config['STATUS_MAPPING'][str(self.status)]
cat.html改为
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.status_desc}}</td>
<td>{{item.weight}}</td>
运行可以看到成功显示中文:
切换状态下拉框进行数据提交
基于account/index.js复制 创建food
/cat.js
;
var food_cat_ops = {
init:function () {
this.eventBind();
},
eventBind:function () {
$(".wrap_search select[name=status]").change(function () {
$(".wrap_search").submit()
});
var that = this;
$(".remove").click(function () {
that.ops("remove", $(this).attr("data"))
});
$(".recover").click(function () {
that.ops("recover", $(this).attr("data"))
});
},
ops:function (act, id) {
var callback = {
'ok':function () {
$.ajax({
url:common_ops.buildUrl("/food/cat-ops"),
type:"POST",
data:{
act:act,
id,id
},
dataType:'json',
success:function (res) {
var callback = null;
if(res.code == 200){
callback = function () {
window.location.href = window.location.href;
}
}
common_ops.alert(res.msg, callback);
}
});
},
'cancel':null
};
common_ops.confirm((act=="remove"?"确定删除?":"确定恢复?"),callback);
}
};
$(document).ready(function () {
food_cat_ops.init()
})
cat.html引入cat.js
{%block js %}
<script src="{{ buildStaticUrl('/js/food/cat.js') }}"></script>
{% endblock %}
Food.py
添加状态判断 根据状态展现对应的数据
@route_food.route( "/cat" )
def cat():
resp_data = {}
req = request.values
query = FoodCat.query
if 'status' in req and int(req['status'])>-1:
query = query.filter(FoodCat.status == int(req['status']))
list = query.order_by(FoodCat.weight.desc(), FoodCat.id.desc()).all()
resp_data['list'] = list
resp_data['search_con'] = req
状态切换后需要保留切换的状态:
可以参考member/index.html
<option value="-1">请选择状态</option>
{% for tem_key in status_mapping %}
<option value="{{tem_key}}" {% if tem_key == search_con['status'] %} selected {% endif %}>{{status_mapping[tem_key]}}</option>
{% endfor %}
运行就可以看到分类状态保存下来了
分类列表的删除和恢复功能
Food.py后台添加一个ops方法:(参考 account/Account.py的ops方法)
@route_food.route( "/cat-ops" , methods = ["POST"])
def catOps():
resp = {'code': 200, 'msg': '删除或者恢复成功', 'data': {}}
req = request.values
id = req['id'] if 'id' in req else 0
act = req['act'] if 'act' in req else ""
if not id:
resp['code'] = -1
resp['msg'] = "请选择要操作的账号"
return jsonify(resp)
if not act in ["remove", "recover"]:
resp['code'] = -1
resp['msg'] = "操作有误,请重试"
return jsonify(resp)
food_cat_info = FoodCat.query.filter_by(id = id).first()
if not food_cat_info:
resp['code'] = -1
resp['msg'] = "分类不存在"
return jsonify(resp)
if act == "remove":
food_cat_info.status = 0
elif act == "recover":
food_cat_info.status = 1
food_cat_info.update_time = getCurrentDate()
db.session.add(food_cat_info)
db.session.commit()
return jsonify(resp)