1、Url对应内容
url(r'^$', views.show_orderlist), ---请求的页面路径:
url(r'^order_list/$',views.show_order_list), ----对应页面Ajax中的url内容;
具体内容如下:
1、def show_orderlist(request):
str_url = request.META.get('HTTP_REFERER')
page =1
datalist = get_order_list()
rows = len(datalist)
total_page = ceil(rows / 10)
last = total_page
next = int(page) + 1
if next > total_page:
next = total_page
current = int(page) - 1
if current <= 0:
current = 1
template = get_template('orderlist.html')
html = template.render(locals())
return HttpResponse(html)
2、
#Ajax调用的获取数据的内容
def show_order_list(reqeust):
str_url = reqeust.META.get('HTTP_REFERER')
strs = re.findall('orderlist/(\w+)', str_url)
num = reqeust.GET['rows']
s_page = 0
page = 0
if len(strs) > 0:
page = int(strs[0])
else:
page = 1
if page > 1:
s_page = page - 1
n_page = page
if "D1" in str_url:
varrs = str_url.split('?')[1].split('=')
start_date = varrs[1][0:10]
end_date = varrs[2]
datalist = get_orderlist_byDate(start_date,end_date) #后台获取数据信息
else:
datalist = get_order_list() #后台获取数据信息
total_rows = len(datalist)
total_page = ceil(total_rows / int(num)) #获取总页数
if n_page > total_page:
n_page = total_page
#########################################################################
dataset = datalist[s_page * int(num):n_page * int(num)]
#///#
row_array =[]
rows = len(dataset)
for index in range(0,rows):
dic_data ={}
dic_data["order_id"]=str(index)
dic_data["cell"] = dataset[index]
row_array.append(dic_data)
context={
"page":"1",
"total":str(rows),
"records":str(rows),
"rows":row_array
}
return HttpResponse(json.dumps(context))
html内容
{% extends 'base.html' %}
{% load staticfiles %}
{% block CSS %}
<link href="{% static 'css/plugins/datapicker/bootstrap-datepicker.css' %}" type="text/css" rel="stylesheet">
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.css" %}" rel="stylesheet">
<link href="{% static "css/animate.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/codemirror/codemirror.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/codemirror/ambiance.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/chosen/chosen.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/dropzone/dropzone.css" %}" rel="stylesheet">
<link href="{% static "css/plugins/jqGrid/ui.jqgrid.css" %}" rel="stylesheet" type="text/css">
<link href="{% static "css/style.css" %}" rel="stylesheet">
<script src="{% static "js/jquery-2.1.1.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
{% endblock %}
{% block contxt %}
<div class="row border-bottom white-bg page-heading">
<div class="col-lg-6" align="left">
<button id="addBtn" type="button" class="btn btn-w-m btn-primary">增加</button>
<button type="button" class="btn btn-w-m btn-info" id="editBtn" >编辑</button>
<button type="button" class="btn btn-w-m btn-danger" id="delBtn">删除</button>
</div>
<div align="right">
<label for="">日期: </label>
<input type="text" name="start" placeholder="起始日期" id="start-picker" readonly value="{{ sdate }}">
<span>--</span>
<input type="text" name="end" placeholder="结束日期" id="end-picker" readonly value="{{ edate }}">
<button type="button" class="btn btn-w-m btn-success" id="btnQuery" onclick="btn_sel()">查询</button>
</div>
</div>
<div class="fh-breadcrumb">
<div class="full-height">
<div class="full-height-scroll white-bg ">
<div class="element-detail-box">
<div class="ibox-content">
<div class="jqGrid_wrapper">
<table id="table_list_2">
</table>
<div id="pager_list_2"></div><!--分页位置-->
<input type="hidden" id="hi_id" value="{{ id }}" />
<table>
<tr><td><a href="/orderlist/1/{{ conf }}">首页</a></td><td> </td>
<td><a href="/orderlist/{{ current }}/{{ conf }}">上一页</a></td><td> </td>
<td><a href="/orderlist/{{ next }}/{{ conf }}">下一页</a></td><td> </td>
<td><a href="/orderlist/{{ total_page }}/{{ conf }}">未页</a></td>
<td> </td><td>第【{{ page }} / {{ total_page }}】页</td>
</tr></table>
<input type="hidden" id="hi_page" value="{{ page }}" />
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block Message %}
<div id="ycf-alert" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<!-- Mainly scripts -->
<script src="{% static "js/plugins/metisMenu/jquery.metisMenu.js" %}"></script>
<script src="{% static "js/plugins/slimscroll/jquery.slimscroll.min.js" %}"></script>
<!-- Custom and plugin javascript -->
<script src="{% static "js/inspinia.js" %}"></script>
<script src="{% static "js/plugins/pace/pace.min.js" %}"></script>
<!-- Peity -->
<script src="{% static "js/plugins/peity/jquery.peity.min.js" %}"></script>
<script src="{% static "js/plugins/chosen/chosen.jquery.js" %}"></script>
<!--日期控件-->
<script src="{% static "js/plugins/datapicker/bootstrap-datepicker.js" %}"></script>
<script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/DateCtrl.js' %}" type="text/javascript"></script>
<script src="{% static "js/myjs/mytools.js" %}" ></script>
<!-- jqGrid -->
<script src="{% static "js/plugins/jqGrid/grid.locale-en.js" %}"></script>
<script src="{% static "js/plugins/jqGrid/jquery.jqGrid.min.js" %}"></script>
<!--
<script src="{% static "js/plugins/jquery-ui/jquery-ui.min.js"%}"></script>
-->
<script>
$(document).ready(function () {
$("#table_list_2").jqGrid({
url : "/order_list/",
datatype : "json",
height:"auto",
autowidth: true,
shrinkToFit: true,
rowNum: 10,
sortable:true,
sortname:'order_doc',
rowList: [10, 20, 30],
colNames:['序号','订单号','原料名称', '预订数量','补货数量','订货数量','单位','订货日期','发货日期','门店'],
colModel:[
{name:'order_id',index:'order_id', editable: false,width:30, sorttype:"int",search:true},
{name:'order_doc',index:'order_doc', editable: true,width:40, editrules:{required:true},search:true},
{name:'p_name',index:'p_name', editable: true, width:80,search:true,editrules:{required:true}},
{name:'reserve_num',index:'reserve_num', editable: true, width:40 },
{name:'futures_num',index:'futures_num', editable: true, width:40 },
{name:'confirm_num',index:'confirm_num', editable: true, width:40 },
{name:'unit',index:'unit', editable: true, width:30,search:true },
{name:'order_date',index:'order_date', editable: true, width:40,search:true },
{name:'ship_date',index:'ship_date', editable: true, width:40 },
{name:'store',index:'store', editable: true, width:30 }
],
pager: "#pager_list_2",
viewrecords: true,
pgbuttons:true,
loadonce: true,
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
hidegrid: false,
multiselect:true,
editurl:"#"
});
// Setup buttons
$("#table_list_2").jqGrid('navGrid', '#pager_list_2',
{edit: false, add: false, del: false, search: false},
{height: 150, reloadAfterSubmit: true}
);
// Add responsive to jqGrid
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_2').setGridWidth(width);
});
$("#editBtn").click(function(){
var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#table_list_2").jqGrid('editGridRow',gr,{height:450,
onclickSubmit : function(params, posdata) {
return {"g_id":$('#table_list_2').jqGrid('getCell', gr, 'g_id')};
},
closeAfterEdit : true,
reloadAfterSubmit:true,
afterComplete:function(data,postdata){
location.reload()
}
});
else alert("请选择一条数据");
var rowData = jQuery("#table_list_2").jqGrid('getRowData',gr);
//alert(rowData.special_specialtype);
});
$("#addBtn").click(function(){
jQuery("#table_list_2").jqGrid('editGridRow',"new",{height:350,closeAfterAdd : true,reloadAfterSubmit:true,
afterComplete:function(data,postdata){
location.reload()
}});
});
$("#delBtn").click(function(){
var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
//alert(gr);
if( gr != null ) jQuery("#table_list_2").jqGrid('delGridRow',gr,{height:120,
reloadAfterSubmit:true,
onclickSubmit : function(params, posdata) {
return {"order_id":$('#table_list_2').jqGrid('getCell', gr, 'order_id')};
},
afterComplete:function(data,postdata){
location.reload()
}
}
);
else alert("请选择一条数据!");
});
$("#searBtn").click(function(){
jQuery("#table_list_2").jqGrid('searchGrid',
{sopt:['cn','bw','eq','ne','lt','gt','ew']}
);
});
});
function change(id) {
alert(id);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
if(url != "/" && url != "/index/"){
$("li").removeClass("active");
$("[href*='" + url + "']").parent().parent().parent().addClass("active");
$("[href*='" + url + "']").parent().parent().addClass("in");
$("[href*='" + url + "']").parent().addClass("active");
//alert(url);
}
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//alert(ahtml);
/* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
})
</script>
{% endblock %}