jqGrid 使用心得

参考:

https://blog.csdn.net/u012411219/article/details/51315419

https://www.cnblogs.com/kissdodog/p/3875992.html

https://blog.csdn.net/yjlwl1213/article/details/41750703

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.初始化

 1 $("#orderGridList").jqGrid({            
 2             url: "/PlatformManage/Order/GetOrderList",//路径
 3             datatype: 'json',//表格数据类型
 4             postData:   {searchText:searchText,name:name},//搜索时的参数
 5             height: $("#gridList").height() / 2 - 20,//表格高度
 6             autowidth: true,//表格宽度
 7             shrinkToFit: true,
 8             altRows: true,
 9             rownumbers: true,//是否显示行号
10             rowNum: 10,//显示的行数
11             rowList: [10, 25, 50, 100],//分页的
12             colNames: ["Formid", "用户姓名", "微信备注名"],//表头名称
13             colModel: [//对应json字段
14                 { name: 'Formid', hidden: true },
15                 { name: 'Customername', width: 70, align: 'center' },
16                 {
17                     name: 'Distributionfee', width: 70, align: 'center',
18                     formatter: function (cellvalue, options, rowObject) {
19                         if (cellvalue == 0 || cellvalue == "" || cellvalue == null || cellvalue == undefined || cellvalue == "undefined") {
20                             return '0元';
21                         }
22                         else {
23                             return cellvalue + '';
24                         }
25                     }
26                 },
27                 {
28                     name: 'Createtime', width: 150, align: 'center',
29                     formatter: "date", formatoptions: { srcformat: 'Y/m/d H:i:s', newformat: 'Y/m/d H:i:s' }
30                 },
31                 {
32                     name: "Id", width: 120, align: "center",
33                     formatter: function (cellvalue) {
34                         return "<button type='button' data-id='" + cellvalue + "' class='btn  btn-primary  btn-xs orderPrint'>打印</button>";
35                     }
36                 },
37             ],
38             pager: "#orderGridPager",//分页容器id
39             caption: "订单列表",//表格标题
40             hidegrid: true,
41             sortname: 'Createtime desc',//默认排序字段
42             viewrecords: true,//是否展示表格右下角的记录总数提示
43             onSelectRow: function (id) {//点击行的处理函数
44                 var orderId = $("#orderGridList").jqGridRowValue().Formid;
45                 //重新加载表格
46                 $("#goodGridList").setGridParam({ postData: { orderId: orderId }, page: 1 }).trigger('reloadGrid');
47             },
48             loadComplete: function (data) {//加载完成后的处理函数
49                 var wxTotalMoney = data.totalDataStatistical.OrderTJ_wxTotalMoney;//微信
50                 var yeTotalMoney = data.totalDataStatistical.OrderTJ_yeTotalMoney;//余额
51                 var psfTotalMoney = data.totalDataStatistical.OrderTJ_psfTotalMoney;//配送费
52                 var totalMoney = parseFloat((wxTotalMoney + yeTotalMoney).toFixed(2));//总计
53                 var customerCount = data.totalDataStatistical.OrderTJ_customerCount;//用户数量
54                 var vipCustomerCount = data.totalDataStatistical.OrderTJ_vipCustomerCount;//vip用户数量
55                 var notVipCustomerCount = data.totalDataStatistical.OrderTJ_notvipCustomerCount;//非vip用户数量
56                 var orderCount = data.totalDataStatistical.OrderTJ_orderCount;//订单数量
57                 var str = "总计:" + totalMoney + "元,微信到账:" + wxTotalMoney + "元,余额到账:" + yeTotalMoney + "元,配送费合计:" + psfTotalMoney + "元,订单数量:" + orderCount + "单,总用户数量:" + customerCount + "位,会员用户数量:" + vipCustomerCount + "位,非会员用户数量:" + notVipCustomerCount + "";
58                 $(this).jqGrid("setCaption", "订单列表(" + str + "");//设置表格标题
59                 $(this).find(".rating").each(function () {
60                     $(this).rating('create');
61                 })
62             }
View Code

 

 

posted @ 2018-04-10 12:04  庖丁哥  阅读(742)  评论(0)    收藏  举报