jqgrid标题换行、隐藏滚动条、重新提交数据加载页面、单元格绑定点击事件

最新推荐文章于 2023-04-14 16:13:56 发布

原创最新推荐文章于 2023-04-14 16:13:56 发布 · 4.6k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了jqgrid的四个关键配置和操作：如何实现表格标题的自动换行，隐藏滚动条，重新提交数据并加载页面，以及在单元格上绑定点击事件。通过调整CSS样式，可以达到标题换行的效果；通过设置jqGrid的loadComplete回调函数，可实现滚动条隐藏；通过设置和触发reloadGrid，能实现数据的重新加载；最后，展示了如何使用formatter和自定义函数为单元格添加点击事件。

1、标题换行

在页面中加入以下代码，就能实现标题自动换行

2、隐藏滚动条

$("#jqGridLineLevel").jqGrid({
                url: '<%=basePath%>/lineLevelStatistics/getJqGridData.do',
                postData:{arrIds:siteIds,lastStart:lastStart,lastEnd:lastEnd,phaseType:phaseType},
                mtype: "POST",
                datatype: "json",
                page: 1,
               loadonce: true,
               height:"100%",
               autoHeight:true,
               loadComplete: function (xhr) { //隐藏滚动条
                    $("#jqGridLineLevel").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'hidden','overflow-x':'hidden' });
                },
                subGridOptions : {
                   plusicon : "ace-icon fa fa-plus center bigger-110 blue",
                   minusicon : "ace-icon fa fa-minus center bigger-110 blue",
                   openicon : "ace-icon fa fa-chevron-right center orange"
               },
                rowNum: 20,
                loadtext:"加载中....."
                省略部分代码
            });

3、重新提交数据，加载页面

      var lastStart = $('#lastStart').val(); // 获取开始时间
       var lastEnd   = $('#lastEnd').val(); // 获取结束时间
       var phaseType = '${pd.phaseType}';

       // 获取选中工点的ID
       var postData = parent.selectNodes();
       var arrIds = postData.arr;
       var siteIds = arrIds.join(',');//所选工点Id
       var postData;
       postData.arrIds = siteIds;
       postData.phaseType = phaseType;
       postData.lastEnd = lastEnd;
       postData.lastStart = lastStart;
        //此处是重新加载的核心，参数自己定义
       $("#jqGridLineLevel").jqGrid().setGridParam({datatype:'json',postData:postData}).trigger('reloadGrid');

4、单元格绑定点击事件

formatter:formatLink 格式化方法，自己定义

colModel: [
{ name: 'siteId',width:450,align:"center" },
{ name: 'HistoryRetainAllCount', formatter:formatLink,align:"center"}]

//格式化方法,goSondict 可以自己定义内容

function formatLink(cellValue, options, rowObject) {

var hiddenIds = '参数';

return '<a href="javascript:goSondict(\'' + hiddenIds+ '\')">'+ cellValue + '</a>';

}