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

随机推荐

Angular、React.js 和Node.js到底选谁?
为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...
luogu3759 不勤劳的图书管理员 (树状数组套线段树)
交换的话,只有它们中间的书会对答案产生影响树状数组记位置,套线段树记书的编号它对应的页数和书的个数然后就是减掉中间那些原来是逆序对的,再把交换以后是逆序对的加上别忘了考虑这两个自己交换以后是不 ...
英语考试 FZU - 2254 （最小生成树）
先选一个单词出来完全自己背,然后从这个单词到其他各个单词所需要的精力看成距离,然后用最小生成树把这些单词连接起来,就是通过我现在选的这个单词到其他各个单词的最小精力,然后再加上把这个单词背起来的精力, ...
【Linux】linux正则表达式及通配符
正则表达式就是用于匹配每行输入的一种模式,模式是指一串字符序列.拥有强大的字符搜索功能.也非常方便的搜索过滤出我们想要的内容. linux正则表达式分为基本正则表达式(Basic Regexp)和扩展 ...
Can DBC文件翻译
1 引言 DBC文件描述单个CAN网络的通信.这个信息足以监测和分析网络并模拟不是物理可用的节点(剩余的总线模拟). DBC文件也可以用来开发电子控制单元的通信软件,该控制单元应该是CAN网络的一部分 ...
nginx日志文件的定时切割与归纳
应用环境:生产环境中的Nginx服务器,由于访问日志文件增长速度非常快,日志太大会严重影响服务器效率.同时,为了方便对日志进行分析计算,须要对日志文件进行定时切割.定时切割的方式有按月切割.按天切割 ...
20165223《Java程序设计》第九周Java学习总结
教材学习内容总结第13章- URL类 InetAddress类套接字 UDP数据报广播数据报 Java远程调用(RMI) 教材学习中的问题和解决过程 1. URL类 URL类构造方法: 使用字符 ...
web字体的设置
@font-face { font-family: 'OpenSans'; src: url("../fonts/open-sans-v15-latin-regular.woff2" ...
Java 验证代理ip
原文地址:http://www.cnblogs.com/junrong624/p/5416503.html 1 import java.io.IOException; import java.io.I ...
使用Docker for Windows初体验
https://www.baidu.com/link?url=61Kwadwh6h__2Vmjf7lAKVo1RjhsULAqERcMXYnYzkLKrRVpygwBJVnjultH8zbq& ...

jqgrid again

jqgrid again的更多相关文章

随机推荐

热门专题