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

随机推荐

Hdoj 1086.You can Solve a Geometry Problem too 题解
Problem Description Many geometry(几何)problems were designed in the ACM/ICPC. And now, I also prepare ...
Android assets res 文件夹的区别
大家都知道建立一个Android项目后会产生assets与res的两个文件夹,理论上他们都是存放资源的文件夹,那么他们到底有什么区别呢? 1.assets:不会在R.java文件下生成相应的标记,存放 ...
mac上安装ta-lib
Now I am ready to start installing TA-Lib. Generally I followed the steps listed in here. 1. Install ...
【原】本地仓库推送到远程仓库：fatal: refusing to merge unrelated histories
最近,在操作git的时候,遇到各种问题,下面总结一下. 最开始,我不是先把远程仓库拉取到本地 ,而是直接在本地先创建一个仓库,再git remote add添加远程仓库. 当然,gitee官方还是有操 ...
shell中，2>&1详解
我们在Linux下经常会碰到nohup command>/dev/null 2>&1 &这样形式的命令.首先我们把这条命令大概分解下,首先就是一个nohup表示当前用户和系 ...
【php】php实现数组分块
有时候需要将一个大数组按一定大小分块,那么可以实现这个功能,代码如下: /** * @param array $arr * @param int $size <p> * @param bo ...
centos7安装java环境和maven环境
Java 官方下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html Maven官方下载:http://mave ...
从Java的角度简单修复Cookie越权漏洞
技术实在是有限,讲解cookie越权的时候可能有点简单和粗糙.这里就简单记录学习下. 首先自己写一段存在漏洞的代码code: sendCookie.java package cookie; impor ...
手把手教你用1行代码实现人脸识别 --Python Face_recognition
环境要求: Ubuntu17.10 Python 2.7.14 环境搭建: 1. 安装 Ubuntu17.10 > 安装步骤在这里 2. 安装 Python2.7.14 (Ubuntu17.10 ...
SSH出现Connection refused错误
笔者在使用ssh localhost时出现Connection refused提示,初步判断是22端口未开启服务,也有可能是防火墙未正确配置. 测试使用netstat | grep 22测试,发现2 ...

jqgrid again

jqgrid again的更多相关文章

随机推荐

热门专题