jqGrid使用一二例~

刚入坑的小菜鸡

已于 2023-10-17 16:51:02 修改

阅读量827

点赞数

分类专栏： jqgrid 文章标签： jquery jqgrid js javascript

于 2020-12-25 18:13:39 首次发布

本文链接：https://blog.csdn.net/weixin_45542303/article/details/110702786

版权

jqgrid 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jqGrid使用小结

文章目录

- jqGrid使用小结
- - 常用代码

常用代码

1. 数据命令

获取id行字段数据: var value = $("#listid").jqGrid('getCell', rowid , '字段名');
或 var value = $("#listid").getCell(rowid, 字段名)
赋值id行字段数据: $("#listid").jqGrid('setCell', rowid , '字段名' , '值',{css},{attr});
或 var value = $("#listid").setCell(rowid , '字段名' , '值',{css},{attr})
获取所有所有id: var ids = jQuery("#list").jqGrid("getDataIDs");
获取所有数据: var allData = $("#list").jqGrid("getRowData");
获取一行数据: var rowData = $("#list").jqGrid('getRowData',rowId);
获取多选行选中的行id : var rowIds = $("#list").jqGrid('getGridParam', 'selarrrow')

2. 行操作(行id为标的)

添加行 : $("#list").jqGrid("addRowData", id, rowData, "after", rowId);
插入id为 ‘id’ 的数据行到 id为 ‘rowId’ 的行后面(after替换为before为加到前面)
删除行 : jQuery("#list").delRowData(rowId);
保存行(编辑行时): jQuery('#list').saveRow(rowId);
退出编辑状态,并将编辑框内的内容加载到jqgrid中
取消编辑 : jQuery('#list').restoreRow(rowId);
退出编辑状态,不保存编辑框的内容
清空jqgrid的所有内容: jQuery("#list").jqGrid("clearGridData");
获取点击行的id: var id=$('#gridTable').jqGrid('getGridParam','selrow');

3. 事件

单击事件: onSelectRow: function(id){ }
双击事件: ondblClickRow: function(id){ }
jqgrid加载完成:loadComplete:function(){ }

4. 插件

字段下的搜索框(模糊搜索):
jQuery("#list2").jqGrid('filterToolbar',{ autoSearch: true, stringResult: true, defaultSearch: "cn", searchOnEnter: true }); //字段下面的搜索框
列冻结:
需在colMould字段中设置 frozen 为 true ; 冻结列应从第一列开始且不能跨列
$("#list").jqGrid('setFrozenColumns');

5. 功能

合并单元格
调用: gridComplete: function () { merge(["zhifan","department","produceName","id","workshift"]); }
方法:

  function merge(names) {
    //alert("aaaaaa");
    var trs = $("#list2>tbody>tr:gt(0)");
    $.each(names, function (ind, name) {
        var bg = trs.eq(0).children("[aria-describedby='list2_" + name + "']"),
            index = bg.index(),
            rowsp = 1;
        trs.slice(1).each(function (ind2, tr) {
            var me = $(tr).children("td").eq(index);
            if (bg.text() === me.text()) {
                rowsp++;
                me.hide();
            } else {
                bg.attr("rowspan", rowsp);
                bg = me;
                rowsp = 1;
            }
            bg.attr("rowspan", rowsp);
        });
    });
}

动态显示隐藏列

$("#list").setGridParam().hideCol("colname"); 隐藏 colname为 ColName 的列名
$("#list").setGridParam().showCol("colname"); 显示 colname为 ColName 的列名

6.初始化参数(解释)

拖动列 : sortable: true
增加行号: rownumbers: true
设置行号列跨度 : rownumWidth : 宽度数值
开启多选行 : multiselect : true
//获取选中的数据行id
var ids = $("#list").jqGrid('getGridParam', 'selarrrow');
//实现单选(原理为选择时重置下已选项)
beforeSelectRow:function(){
   $("#list").jqGrid("resetSelection");
  return(true);
}
//隐藏全选
$("#cb_list").css("display","none");

7.colModel 参数

整数加千分位 : formatter: "number", formatoptions: {thousandsSeparator:","}
小数加千分位 : formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}

其中thousandsSeparator是千分位的分隔符,defaulValue是为空时默认值, decimalPlaces是小数位数, 小数位没有的补 0

日期格式化 : formatter:"date",formatoptions:{newformat:"Y-m-d h:i:s"}
隐藏列: hidden: true
整列加html属性 : cellattr:function(){return "style='background-color:#F8F8FF' name='xxx'"

给该列所有单元格加 style(其中设置了背景色为#F8F8FF) 和 name

禁用排序 : sortable:false (默认可排序),这里的排序指点击列名会进行升序/降序排序

8.搜索框

方法 : $("#list").jqgrid('filterToolbar','param') 或 $("#list").filterToolbar(param)

param参数说明:

参数名	参数类型	默认值	参数说明
autosearch	Boolean	true	查询规则，如果是text类型则是当按下回车键才去执行查询；如果是select类型的查询则当值改变时就去执行查询
searchOnEnter	Boolean	true	如果为true,则按下回车后进行搜索,与autosearch 参数相关. 如果为false 则为搜索值改变即进行搜索
beforeSearch	function	null	查询(搜索)之前执行的方法
afterSearch	function	null	查询(搜索)结束后执行的方法
beforeClear	function	null	查询条件清除前执行的方法
afterClear	function	null	查询条件清除后执行的方法
searchurl
stringResult
groupOp
defaultSearch	String	“bw”	默认查询规则 bw : 以…开始, 其他规则见下表
searchOperators	Boolean	false	是否可以改变查询规则 -> 在需要改变规则的字段下的colModel中添加 `searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}` 其中的sopt值(规则)自定义,从下方 defaultSearch对照表中选取
resetIcon	String	“x”	清除查询条件的标识

defaultSearch 查询规则对照表

参数	对应符号	解释
eq	==	text 类型的对比
ne	!	不等于
lt	<	小于
le	<=	小于等于
gt	>	大于
ge	>=	大于等于
bw	^	以 … 开始
bn	!^	不以… 开始
in	=	包含于(多值中的一个)
ni	!=	不包含(不含多值中的任意一个)
ew		以…结束
en		不以…结尾
cn	~	包含
nc	!~	不包含
nu
nn

9. 拖拽行(官方文档名字叫:排序行)

 // 行拖拽功能
 $("#list").jqGrid('sortableRows', {
     items : '.jqgrow:not(.unsortable)',
     update:function(e,ui){//拖拽完成后
         //console.log(e)
         //console.log(ui)
         var item = ui.item[0];
         var id = item.id //拖动行的id

     }}
 )

end. 遇到的bug(或特殊业务的拓展)

冻结列与横向滚动条间距过大的问题(现象为横向滚动条上方一部分未冻结)

/**
 * 解决冻结列冻结区域比表格短的bug
 * 原理为将原来的冻结层高度调的和表格高度一致
 * @param listId 表格id
 */
function repairFrozenBug(listId){
    //给冻结区域重新定义高度
    $("#gview_"+listId+" .frozen-bdiv").css("height",$("#gview_"+listId+" .ui-jqgrid-bdiv").css("height"));

    //当表格区域高度变化时给冻结区域重新定义高度
    $("#gview_"+listId+" .ui-jqgrid-bdiv").resize(function(){

        //只有当冻结区域高度与表格高度不相等的时候才重新定义
        if($("#gview_"+listId+" .ui-jqgrid-bdiv").css("height") != $("#gview_"+listId+" .frozen-bdiv").css("height")){
            $("#gview_"+listId+" .frozen-bdiv").css("height",$("#gview_"+listId+" .ui-jqgrid-bdiv").css("height"));
        }
    })
}

想要编辑的列在冻结层(冻结层会覆盖原来的数据列,导致编辑不了),此处以下拉框为例

//放到开启编辑方法之后

//设备列被冻结时的编辑问题(jqgrid冻结的原理是在原表覆盖一层冻结层, 所以开启编辑时只开启了数据层,冻结层不会进入编辑状态)
//获取隐藏的(数据列的)设备下拉框
var se = $("#list").getCell(rowId,"列名");
//添加通用class
se = se.replace("editable","editable 随便一个class名");
//将下拉框添加到冻结层
$("td[aria-describedby='list_列名']").html(se);

//如果有已选值则填充已选值
//说明--这里的"旧数据"指的是, 第一次编辑后,如果再次编辑时还保留第一次选择的值(如果每次都重新选择,则可以忽略)
if(!旧数据== ""){
    $(".随便一个class名").val(旧数据);
}

//冻结层的下拉框值变化时,改变数据层下拉框的值
$("#list_frozen .随便一个class名").change(function () {
    $("#list .随便一个class名").val($(this).val())
})