Python-flask 对jqGrid的应用

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="">日期:  &nbsp;</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>&nbsp;&nbsp;</td>
                                <td><a href="/orderlist/{{ current }}/{{ conf }}">上一页</a></td><td>&nbsp;&nbsp;</td>
                                <td><a href="/orderlist/{{ next }}/{{ conf }}">下一页</a></td><td>&nbsp;&nbsp;</td>
                                <td><a href="/orderlist/{{ total_page }}/{{ conf }}">未页</a></td>
                                <td>&nbsp;&nbsp;</td><td>第【{{ page }}&nbsp;/&nbsp;{{ 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 %}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值