jqGrid 使用心得

Posted 2020-10-30 庖丁哥

1.导入插件

<script src="~/Content/js/jqprint/jquery.jqprint-0.3.js"></script>

2.设置容器

<table style="height:49%;" id="orderGridList"></table>//表格
<div id="orderGridPager"></div>//分页

3.初始化

$("#orderGridList").jqGrid({            
            url: "/PlatformManage/Order/GetOrderList",//路径
            datatype: ‘json‘,//表格数据类型
            postData:   {searchText:searchText,name:name},//搜索时的参数
            height: $("#gridList").height() / 2 - 20,//表格高度
            autowidth: true,//表格宽度
            shrinkToFit: true,
            altRows: true,
            rownumbers: true,//是否显示行号
            rowNum: 10,//显示的行数
            rowList: [10, 25, 50, 100],//分页的
            colNames: ["Formid", "用户姓名", "微信备注名"],//表头名称
            colModel: [//对应json字段
                { name: ‘Formid‘, hidden: true },
                { name: ‘Customername‘, width: 70, align: ‘center‘ },
                {
                    name: ‘Distributionfee‘, width: 70, align: ‘center‘,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == 0 || cellvalue == "" || cellvalue == null || cellvalue == undefined || cellvalue == "undefined") {
                            return ‘0元‘;
                        }
                        else {
                            return cellvalue + ‘元‘;
                        }
                    }
                },
                {
                    name: ‘Createtime‘, width: 150, align: ‘center‘,
                    formatter: "date", formatoptions: { srcformat: ‘Y/m/d H:i:s‘, newformat: ‘Y/m/d H:i:s‘ }
                },
                {
                    name: "Id", width: 120, align: "center",
                    formatter: function (cellvalue) {
                        return "<button type=‘button‘ data-id=‘" + cellvalue + "‘ class=‘btn  btn-primary  btn-xs orderPrint‘>打印</button>";
                    }
                },
            ],
            pager: "#orderGridPager",//分页容器id
            caption: "订单列表",//表格标题
            hidegrid: true,
            sortname: ‘Createtime desc‘,//默认排序字段
            viewrecords: true,//是否展示表格右下角的记录总数提示
            onSelectRow: function (id) {//点击行的处理函数
                var orderId = $("#orderGridList").jqGridRowValue().Formid;
                //重新加载表格
                $("#goodGridList").setGridParam({ postData: { orderId: orderId }, page: 1 }).trigger(‘reloadGrid‘);
            },
            loadComplete: function (data) {//加载完成后的处理函数
                var wxTotalMoney = data.totalDataStatistical.OrderTJ_wxTotalMoney;//微信
                var yeTotalMoney = data.totalDataStatistical.OrderTJ_yeTotalMoney;//余额
                var psfTotalMoney = data.totalDataStatistical.OrderTJ_psfTotalMoney;//配送费
                var totalMoney = parseFloat((wxTotalMoney + yeTotalMoney).toFixed(2));//总计
                var customerCount = data.totalDataStatistical.OrderTJ_customerCount;//用户数量
                var vipCustomerCount = data.totalDataStatistical.OrderTJ_vipCustomerCount;//vip用户数量
                var notVipCustomerCount = data.totalDataStatistical.OrderTJ_notvipCustomerCount;//非vip用户数量
                var orderCount = data.totalDataStatistical.OrderTJ_orderCount;//订单数量
                var str = "总计：" + totalMoney + "元，微信到账：" + wxTotalMoney + "元，余额到账：" + yeTotalMoney + "元，配送费合计：" + psfTotalMoney + "元，订单数量：" + orderCount + "单，总用户数量：" + customerCount + "位，会员用户数量：" + vipCustomerCount + "位，非会员用户数量：" + notVipCustomerCount + "位";
                $(this).jqGrid("setCaption", "订单列表（" + str + "）");//设置表格标题
                $(this).find(".rating").each(function () {
                    $(this).rating(‘create‘);
                })
            }