jqgrid again

之前有提及过jqgrid这个很不错的jquery grid, 非常适合企业MIS系统使用. 本文以一个显示学生成绩结果的页面, 来说明它的一些用法, 手写代码, 运行可能会报错, 不过思路是经过验证的.

=================================
加载theme
=================================
默认的jqgrid样式很难看, jqgrid 完全支持jquery ui的 theme, 我们选择一个好看的theme, 将 ui.theme.css 加到html中即可
theme 下载: http://jqueryui.com/themeroller/

=================================
不想在init和reload时都设置jqgrid的所有属性
=================================
我们自然不推荐一个页面多次设置同一个jqgrid的属性, 尤其jqgrid的colModel属性.
好的作法是, 在init grid的时候, 设置全部的属性, 而在reload时仅仅发出新数据请求.

=================================
鱼和熊掌皆得: 启用排序和允许reload
=================================
jqgrid 当然支持reload 操作, 重点代码是:
jQuery('#grid_resultset').jqGrid('setGridParam', {url: target_url});
jQuery('#grid_resultset').trigger('reloadGrid');


但需要特别注意: jqgrid 只有在设置 loadonce 为 true 后, 才允许客户端排序. 但如果 init jqgrid 时设置了loadonce=true 后, jqgrid将会在第一次加载后, 自动修改datatype属性值为 local , 这之后简单触发 reloadGrid trigger, jqgrid并不会真的做reload动作. 解决方法是, 在 reload之前, 先将 datatype 属性修改为 json.

总结为:
1. 在init时候, 设置属性 loadonce 为 true
2. reload 代码为:
    jQuery('#grid_resultset').jqGrid('setGridParam', {datatype:'json'});
    jQuery('#grid_resultset').jqGrid('setGridParam', {url: target_url});
    jQuery('#grid_resultset').trigger('reloadGrid');
    //enable jqgrid sortable again
    jQuery('#grid_resultset').jqGrid('setGridParam', {loadonce: true, forceClientSorting: true});
   看起来还挺复杂的, 所以我这边封装成一个 realoadJqGrid() 函数.

=================================
cell 内容的 formatter
=================================
1. 简单formatter
参考 formatPercentage()和unformatPercentage(), 以及 formatProfileLink()和 unformatProfileLink(), formatter函数应该是成对的, 当然一般情况下没有unformat函数也是可以的.

2. 复杂formatter, 比如ratio值的小计和总计
上例中, 我们要显示每个学生的课程优良率, 另外也要显示班级的优良率, 最后还有一个grand total行, 要显示全校的课程优良率.
小计: 统计一个班级的优良率,
总计: 统计一个学校的优良率,

要统计课程优良率, 针对每个学生, 优良率是: good_course_count/total_course_count, 但最后需要统计每个class的优良率, 是通过 jqgrid 的 grouping的, 优良率是放在grouping 行中的. 要统计全校的优良率, 会在最后的 grand total.
仅仅为column指定 formatterGoodScorePercentage() 是不够的, 还是为该column指定 summaryType 函数, 比如 summaryTypeGoodScore()

=================================
自动换行 Jqgrid 的 Header
=================================
将下面的css style加到html 的head节即可.

<html>

<body>

<table id="grid_resultset"></table>

<div id="pgrid_resultset"></div>

</body>

</html>

<script>

function formatPercentage(cellval, options, rowObject, act) {

   //http://www.guriddo.net/demo/guriddojs/functionality/formatters_custom/index.html

   var cellHtml= "<span originalValue='" + cellval + "'>" + Math.round(cellval*100)+"%" + "</span>";

   return cellHtml;

   //上面拼字符串太复杂了, 推荐使用 sprintf.min.js, 比如下面示例

   //var url_fmt="/module/download?file_type=%s&year=%s&month=%s&areas=%s";

   //var target_url=vsprintf(url_fmt, ['ytm', '2016','01' ]);

}

function unformatPercentage(cellval, options, cellObject){

   return $(cellObject.html()).attr("originalValue");

}

function formatProfileLink(cellval, options, rowObject, act) {

   if (options.rowId === "")  //grouping row

   {

       var cellHtml=  cellval;

       return cellHtml;

   }

   else

   {

       var cellHtml=  '<a href="/profile/cellval">cellval </a>';

       return cellHtml;

   }

}

function unformatProfileLink(cellval, options, cellObject) {

   return $(cellObject.html()).val();

}

function formatterGoodScorePercentage(cellval, options, rowObject, act) {

    if (options.rowId === "") {

        if (rowObject['name']!='Grand total')  //grand total row

        {

            if (cellval.total_course_count_sum==0)

               cellval=0;

            else

              cellval=cellval.good_course_count_sum/cellval.total_course_count_sum;

            var cellHtml= "<span originalValue='" + cellval + "'>" + Math.round(cellval*100)+"%" + "</span>";

            return cellHtml;

        }

        else   //grouping row

        {

           cellval=rowObject['total_course_count']/rowObject['good_course_count'] ;

            var cellHtml= "<span originalValue='" + cellval + "'>" + Math.round(cellval*100)+"%" + "</span>";

            return cellHtml;

         }

    } else    //ordinary row

    {

            var cellHtml= "<span originalValue='" + cellval + "'>" + Math.round(cellval*100)+"%" + "</span>";

            return cellHtml;

    }

}

function summaryTypeGoodScore(val, name, record) {

    if (typeof (val) === "string") {

        val = {max: false, total_course_count_sum: 0, good_course_count_sum: 0};

    }

    val.total_course_count_sum += record['total_course_count'];

    val.good_course_count_sum += record['good_course_count'];

    val.max = true;

    return val; 

}

function exportJqGrid(fab_line) {

    //  Export the data to csv file

    var url = '/download'

    window.location.assign(url) ;

}

function initJqGrid() {

        var target_url='/scorecard_api'

        // alert(target_url);

        var myUserData ={

           id:0,

           name:"Grand total",

           student_name:"",

           age:"",

           good_course_count:"",

           total_course_count:"",

           good_rate:""

           } ;

        jQuery("#grid_resultset").jqGrid({

        colModel: [

            { name: "class" ,index:'class',label: 'Class No', search: true, width: 60, sortable: true,sorttype: 'text',align:"left",formatter: formatProfileLink},

            { name: "student_name" ,index:'student_name',label: 'Student Name',key:true, search: true, width: 60, sortable: true,sorttype: 'text',align:"left",formatter: formatProfileLink},

            { name: "age" , index:'age', label: 'Student Age', search: false,width:100, sortable: true, sorttype: 'number', align:"left"},

            { name: "good_course_count" , index:'good_course_count', label: 'Good course count', search: false,width:100, sortable: true, sorttype: 'number', align:"left"},

            { name: "total_course_count" , index:'total_course_count', label: 'Total course count', search: false,width:100, sortable: true, sorttype: 'number', align:"left"},

            { name: "good_rate" , index:'good_rate', label: 'Good rate', search: false,width:100,  sortable: true, sorttype: 'number', align:"left",formatter: formatterGoodScorePercentage, summaryType:summaryTypeGoodScore }

        ],

            url:target_url,

            datatype: "json",

            userData: myUserData,

            shrinkToFit: false,

            rownumbers: false,

            height: 350 ,

            width: 1250,

            rowNum:10000,

            rowList: [],  // if [] given, hide the page count indicator. if [10000] given, one page will show at most 10000 records, and the 10000 number will show in pager bar

            viewrecords: true,   //定义是否要显示总记录数

            loadonce: true,  //allow sort when loadonce=true

            hoverrows: false, //禁用 mouse hovering

            sortable: true,

            forceClientSorting: true,

            gridview: true,

            ignoreCase: true,   //  Make the "Search" popup search case-insensitive

            multiselect:false,

            pager: '#pgrid_resultset',

            caption: "Student scorecard",

            // sortname : "name",  //默认的排序列,这个参数会被提交到后台

            // sortorder: "asc",

            grouping:true,

            groupingView : {

                    groupField : ['class'],

                    groupSummary : [true],

                    groupColumnShow : [true],

                    groupText : ['<b>{0}</b>'],

                    groupCollapse : true,

                    showSummaryOnHide: true,

                    groupOrder: ['asc']

                    },

            footerrow: true,

            userDataOnFooter: true

        });

         jQuery('#grid_resultset').jqGrid('navGrid', '#pgrid_resultset', {

                    search: true,

                    searchtext: "Search",  //  Make the Search icon have a "Search" label next to it

                    edit: false,

                    add: false,

                    del: false,

                    refresh: false

                },

                {}, // default settings for edit

                {}, // default settings for add

                {}, // delete

                {

                    closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: false, multipleGroup: false, showQuery: false,

                    sopt: ['cn', 'eq', 'ne'],

                    defaultSearch: 'cn'

                }).navButtonAdd('#pgrid_resultset', {

                    caption: "Export",

                    buttonicon: "ui-icon-disk",

                    onClickButton: function () {

                        exportJqGrid();

                    },

                    position: "last"

                });

}

function realoadJqGrid() {

    target_url='/scorecard_api?'+some_new_query_conditions;

    //reload jqgrid

    jQuery('#grid_resultset').jqGrid('setGridParam', {datatype:'json'});

    jQuery('#grid_resultset').jqGrid('setGridParam', {url: target_url});

    jQuery('#grid_resultset').trigger('reloadGrid');

    //enable jqgrid sortable again

    jQuery('#grid_resultset').jqGrid('setGridParam', {loadonce: true, forceClientSorting: true});

}

</script>

jqgrid again的更多相关文章

jqGrid合并表头
jqGrid是一款常用的制表软件,最近开发刚好用到.记录一下常用功能留着以后查找顺便发扬一下开源精神. 二级表头是一种经常会碰到的需求,很多时候为了方便查找需要在原有的表头上再加一层,区分表格不同列的 ...
jqGrid插件getCol方法的一个改进
jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大.我最近也频繁使用.但是这个插件也有一些不够完善的地方.比如这个getCol方法. getCol方法接受三个参数 colname ...
jqgrid+bootstrap样式实践
jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...
jqGrid jqGrid分页参数+条件查询
HTML <div class="row"> <div class="col-sm-20"> <form id="for ...
重复加载同一个jqgrid
重复加载同一个jqgrid时需要先清除原先的数据,再进行加载新的数据: 清除时使用方法:jQuery.jgrid.gridUnload('jqGridId'); 同时还有一个GridDestroy的方 ...
Web jquery表格组件 JQGrid 的使用 - 从入门到精通开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇问题研究里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
五分钟搭建起一个包含CRUD功能的JqGrid表格
之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...
[译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
jqGrid的autoencode参数设置为true在客户端可能引发的编码问题
不久前使用jqGrid+MVC做过一段时间开发. 一开始,分页参数几乎都是默认值,jqGrid的分页功能很好用. 考虑到each input is evil,我们的系统对安全性又有较高要求,所以,为了 ...
jQuery插件：jqGrid引入及基本属性
1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

随机推荐

[luogu3620][APIO/CTSC 2007]数据备份【贪心+堆+链表】
题目描述你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游戏 ...
iptables(3)
----------------------------iptables企业应用 ****************************单机防火墙列表#!/bin/bash#============ ...
ZOJ 4062 Plants vs. Zombies（二分答案）
题目链接:Plants vs. Zombies 题意:从1到n每个位置一棵植物,植物每浇水一次,增加ai高度.人的初始位置为0,人每次能往左或往右走一步,走到哪个位置就浇水一次.求m步走完后最低高度的 ...
#509. 「LibreOJ NOI Round #1」动态几何问题
下面给出部分分做法和满分做法有一些奇妙的方法可以拿到同样多的分数,本蒟蒻只能介绍几种常见的做法如果您想拿18分左右,需要了解:质因数分解如果您想拿30分左右,需要了解:一种较快的筛法如果您想拿 ...
docker 拷贝镜像文件
1.概述我们制作好镜像后,有时需要将镜像复制到另一台服务器使用. 能达到以上目的有两种方式,一种是上传镜像到仓库中(本地或公共仓库),但是另一台服务器很肯能只是与当前服务器局域网想通而没有公网的,所 ...
YSLOW（一款实用的网站性能检测工具）
概述 YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化. 安装官网:http://yslow.org/ ...
java 分隔函数split("",-1)的用途
转: java 分隔函数split("",-1)的用途 2017年12月14日 11:37:58 jaryle 阅读数:8517 1.如果字符串最后一位有值,则没有区别, 2. ...
Educational Codeforces Round 55 (Rated for Div. 2) B. Vova and Trophies
传送门 https://www.cnblogs.com/violet-acmer/p/10035971.html 题意: Vova有n个奖杯,这n个奖杯全部是金奖或银奖,Vova将所有奖杯排成一排,你 ...
查询redis数据
1.连接跳板机 2.跳板机连接服务器 3.服务器打开redis 4.查询redis数据
牛客网 2018年东北农业大学春季校赛 I题 wyh的物品
链接:https://www.nowcoder.com/acm/contest/93/I 来源:牛客网时间限制:C/C++ 5秒,其他语言10秒空间限制:C/C++ 262144K,其他语言5242 ...

jqgrid again

jqgrid again的更多相关文章

随机推荐

热门专题