博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqgrid比较使用频繁但偏冷门的知识点
阅读量:6038 次
发布时间:2019-06-20

本文共 2489 字,大约阅读时间需要 8 分钟。

hot3.png

1、在你的jqgrid表格tfoot处加合计 开启属性:

footerrow: true,userDataOnFooter: true,

后台传过来的json格式如下,记得对应上字段名

{    ...    userData:{        id: "合计",         un_covered_area: "159580.84", un_inside_area: "161331.22", dis_area: "-1750.38",…    }}

2、固定了列宽后,如何设置横向滚动条?开启属性:

shrinkToFit:false,  // 设置滚动条

3、jqgrid增加行号列(两种方法) 第一种是jqgird自带的序号,打开属性开启:

rownumbers: true,

第二种是自己从后台拼装,我这里用的是php:

$current = 0;#组装序号$page = ((int)$map['start'] / (int)$map['length']) + 1;foreach($result as $key => $value) {    #组装序号    ++$current;    $result[$key]['nowcur'] = $v['nowcur'] = ($page - 1) * $map['length'] + $current;}

4、jqgrid如何去除分页,也仅仅是设置一个选项(后台怎么处理打印便知):

rowNum: 'all',

5、jqgrid开启多选属性:

multiselect: true,

6、jqgrid自适应父容器宽属性:

autowidth: true,

7、Jqgrid类似datatables的render功能(cellvalue是当前值,rowObject是当前行数据对象):

{       name: 'id',     index: 'id',    width:"20px",    sortable: false,  //禁止排序    formatter:function(cellvalue, options, rowObject){          return "";      }},  //序号

8、Jqgrid单行选择事件配置(rowid为gridcomplete方法中封装的主键id,而status表示当前行选没选中,您打印下便知啦):

onSelectRow: function (rowid, status){    ...}

9、jqgrid开启多选时如何触发多选事件 如果开启了多选

multiselect: true,

则会触发下面多选事件

onSelectAll: function (rowid, status){    ...}

10、jqGrid重载(参数可重置)

var data = {    search: decodeURIComponent($(this).serialize())};
$("#list").setGridParam({    postData: data}).trigger("reloadGrid"); // 重载jqgrid

里面可以设置新的多种配置参数

如果仅仅是刷新表格,那么用下面则会自动带上以前条件重新刷新一遍

$("#list").trigger("reloadGrid");//重载jqgrid

11、jqgrid获取取选中行的值:

第一种(可取出任意单击行字段值)

//得到jqgrid单行选择的行的数据function getGridId(id, sql_name) {    var ids = $("#" + id).jqGrid('getGridParam', 'selrow');    var rets = jQuery("#" + id).jqGrid('getRowData', ids);    if (rets) {        return rets[sql_name]    } else {        return false;    }}

调用如:

console.log(getGridId('list', 'id'));

第二种(取出选定的全部值)

/** * [jqgrip 获取一行信息] * @param param jqgrip表格id * @returns 返回单行表信息 */function jqgrip_get_Row(param){    var model = '#'+param;    var rowId = $(model).jqGrid('getGridParam', 'selrow'); // 获取信息的id    var rowData = $(model).jqGrid('getRowData', rowId);    return rowData;}

开启多选时,取出多行选中值

/** * jqgrip 获取多行信息 * @param param jqgrip表格id * @returns 返回多行表信息 */function jqgrip_get_multiRow(param){    var model = '#'+param;    var rowId = $(model).jqGrid('getGridParam', 'selarrrow'); // 获取信息的id    var multiRow =[];    for (var i = 0; i < rowId.length; i++) {        var res = $(model).jqGrid('getRowData', rowId[i]);        multiRow.push(res);    }    return multiRow;}

转载于:https://my.oschina.net/cxgphper/blog/871197

你可能感兴趣的文章
java 内存优化整理,从JVM内存管理的角度谈JAVA类的静态方法和静态属性
查看>>
EIGRP OSPF 重发布
查看>>
彻底摆脱配置文件 七(基于linux USER2信号检查当前管理的配置项信息)
查看>>
使用WEBINTERFACE访问多个FARM发布的应用
查看>>
[宅]最近3个月的宅生活
查看>>
PPT无法输入中文
查看>>
java 统计某个短的字符串出现在大的字符串中的次数
查看>>
各种情况下获取web工程的路径
查看>>
从ASM磁盘组中删除磁盘
查看>>
我的友情链接
查看>>
PHP合并discuz用户脚本
查看>>
刚学java时使用map。太难看了
查看>>
Windows自带记事本的实用技巧
查看>>
Linux 系统如何查看版本信息
查看>>
Screen终端远程及共享
查看>>
Deploy Ceph and start using it:simple librados cli
查看>>
anaconda python更换清华源
查看>>
sqoop2安装
查看>>
TODO:Node.js pm2使用方法
查看>>
看完后,思考30秒,相信你一定会有改变!
查看>>