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 ...

随机推荐

树状数组区间加法&区间求和操作
树状数组区间加法&区间求和操作一般的树状数组解决区间加&单点询问并不复杂但是要解决区间求和... 我们假设原数组是$\{a_i\}$,差分数组\(\{d_i=a_i-a_{i- ...
js 时间类函数
js 时间类是 Date() var currtime = new Date();// 实例一个时间,是当前时间接收一个时间戳为参数 var time2=new Date(currtime.get ...
「SCOI2016」萌萌哒解题报告
「SCOI2016」萌萌哒这思路厉害啊.. 容易发现有个暴力是并查集然后我想了半天线段树优化无果然后正解是倍增优化并查集有这个思路就简单了,就是开一个并查集代表每个开头$i$每个长\(2^ ...
optimize PHP-FPM优化
php-fpm进程pidpids=$(ps aux | grep ${process} | grep -v "grep" | awk '{print $2}') php-fpm 关 ...
HDU5909Tree Cutting
题目大意给定一颗树,每个点有点权,问对于每个m,有多少个联通块的权值异或和为m. 题解解法1:可以考虑树形dp,设dp[u][i]表示以u为根的子树中u必须选,联通块权值异或值为i的联通块个数. ...
NOIP2018凉凉记
首先声明一下,我去不了TG,因为我太菜了GD的某教授把我打到PJ了…… 虽然就我这实力普及都不一定1= 不管了,这次是普及,就当扎实基础了.反正HF的 $\text{hhz}$ 也考PJ,见个面多好啊 ...
P1886 P2216 单调队列模板
何为单调队列? 单调队列是一个队列(废话) 而且必须同时满足下标单调和值单调两个单调特性. 跟优先队列不同,优先队列直接使用堆(heap)来实现,如何删去特定下标元素?不明. 本人喜欢用单调队列存下标 ...
封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil，nloglogutil
封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...
MongoDB 学习记录（一）
前言:之前一直只是简单了解MongoDB,而且是随便看看的那种,今天决定好好的整理一下,以便自己能温故而知新 1.MongoDB是什么 MongoDB 是一个高性能,开源,无模式的文档型数据库,开 ...
javascript 实现页面显示当前时间动态读秒
用户进入网站后,出于友好目的,可以添加一些欢迎语句,并且显示系统当前时间,动态读秒的操作.还是直接粘贴代码吧 <script type="text/javascript"&g ...

jqgrid again

jqgrid again的更多相关文章

随机推荐

热门专题